ОТКРОЙ ФЛАТТЕР - НЕДЕЛЯ №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, ссылки за предыдущие недели можно найти ниже:

Увидимся на следующей неделе. Не прерывай серию!