ОТКРОЙ ФЛАТТЕР - НЕДЕЛЯ №17
Создайте макет для экрана настроек во Flash во Flutter
Виджет SwitchListTile
Раздел настроек есть в каждом приложении, и, учитывая тот факт, что людям нравятся функции с одним щелчком, кнопки переключения всегда являются хорошим вариантом.
Обычно этот экран содержит список параметров настройки. Поскольку это список, и мы хотим представить его в виде кнопки-переключателя, виджет, который обеспечивает это за один раз, - это виджет SwitchListTile
.
SwitchListTile в двух словах
SwitchListTile
похож на другие виджеты плитки списка (CheckboxListTile
, RadioListTile
, потому что этот виджет - ListTile
с Switch
.
По сравнению с виджетом ListTile
у него есть два дополнительных обязательных свойства:
value
- логическое значение, отслеживающее состояние кнопки. Он сообщает нам, отмечен ли этот переключатель. Это свойство не должно быть пустым.onChanged
- этот метод вызывается, когда пользователь включает или выключает переключатель. В этом методе мы меняем состояние свойства, которое отслеживает состояние кнопки-переключателя (вкл / выкл = истина / ложь)
Если вы хотите добавить начальный значок, который будет указывать функцию этой кнопки рядом с заголовком, вы можете использовать свойство secondary
, которое получает тип виджета.
SwitchListTile в примере
SwitchListTile( title: Text('Airplane Mode'), secondary: Icon(Icons.airplanemode_active), onChanged: (value) { setState(() { _toggleAirplaneMode = value; }); }, value: _toggleAirplaneMode, )
Что круто в этом виджете, так это то, что нажатие в любом месте плитки переключает переключатель. Эта функция обеспечивает лучший пользовательский интерфейс.
По умолчанию переключатель отображается справа на языках с письмом слева направо, которые можно изменить с помощью controlAffinity
.
Если вы хотите добиться такого вида экрана в своем приложении, приведенный ниже код:
class _MyHomePageState extends State<MyHomePage> { bool _toggleAirplaneMode = false; bool _toggleBluetooth = false; bool _toggleWiFi = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( children: [ SwitchListTile( title: Text('Airplane Mode'), secondary: Icon(Icons.airplanemode_active), onChanged: (value) { setState(() { _toggleAirplaneMode = value; }); }, value: _toggleAirplaneMode, ), Divider( thickness: 1.2, ), SwitchListTile( title: Text('Wi-Fi'), secondary: Icon(Icons.wifi), onChanged: (value) { setState(() { _toggleWiFi = value; }); }, value: _toggleWiFi, ), Divider( thickness: 1.2, ), SwitchListTile( title: Text('Bluetooth'), secondary: Icon(Icons.bluetooth), onChanged: (value) { setState(() { _toggleBluetooth = value; }); }, value: _toggleBluetooth, ), ], )) // This trailing comma makes auto-formatting nicer for build methods. ); } }
Вывод
Если вы поклонник коротких интересных статей, охватывающих различные темы Flutter, и хотите выработать у меня привычку изучать Flutter со мной в течение следующих 12 недель, вы можете читать мои статьи каждый вторник.
Если у вас есть какие-либо вопросы или комментарии по поводу этой статьи, дайте мне знать в разделе комментариев.
Для тех, кто хочет окунуться в наше путешествие по Flutter, ссылки за предыдущие недели можно найти ниже:
- Неделя №13 - Жизненный цикл виджета с отслеживанием состояния
- Неделя №14 - Мои декабрьские рекомендации по пакетам Flutter
- Неделя №15 - Реактивное программирование во флаттере
- Неделя №16 - Асинхронный дротик: изоляторы и циклы событий
Увидимся на следующей неделе. Не прерывай серию!