bool и оператор ? :
Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 17 из 34.
Некоторые значения могут быть только «да» или «нет»: включён ли свет, установлен ли флажок. Тип Dart для них — bool, а два возможных значения — true и false:
bool _isOn = false;Знак ! перед значением типа bool меняет его на противоположное, поэтому _isOn = !_isOn; превращает true в false, а false в true. Метод _flip лампы уже делает это.
Чтобы показывать то одно, то другое в зависимости от значения bool, используй условный оператор ? :. Он читается как вопрос: включено? Тогда это, иначе то.
Text(_isOn ? 'On' : 'Off')
Icon(Icons.star, color: _isOn ? Colors.red : Colors.black)Перед ? указывается значение true или false. После него — значение для true, затем : и значение для false. Его можно использовать везде, где требуется значение: для текста, цвета или размера.
Задание
ЛегкоКнопка Switch переключает _isOn, но лампа всегда выглядит выключенной. Используй ? :, чтобы, когда _isOn имеет значение true, текст был The light is on, а цвет лампочки — Colors.amber; в противном случае текст должен быть The light is off, а цвет лампочки — Colors.grey.
Попробуйте сами
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _isOn = false;
void _flip() {
setState(() {
_isOn = !_isOn;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Lamp')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.lightbulb, size: 96, color: Colors.grey),
const Text('The light is off'),
const SizedBox(height: 16),
ElevatedButton(onPressed: _flip, child: const Text('Switch')),
],
),
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Добавляем интерактивность
1Кнопки
Ваша первая кнопкаВывод в консольТекстовые и контурные кнопкиКнопки с иконкамиПлавающая кнопка действия7Переключатели и ползунки
Включаем и выключаем переключателемОтмечаем флажокВыбираем значение ползунком5Условия
bool и оператор ? :Условия с if и elseAnd, Or и Not в DartПоказать и скрыть виджетСделать кнопку неактивнойПотренируйтесь самостоятельно: Онлайн-компилятор Flutter