Флаттер — кнопки переключения

Кнопка-переключатель позволяет пользователю изменять настройку между двумя состояниями. Вы можете добавить базовую кнопку-переключатель в свой макет с помощью объекта ToggleButton. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Синтаксис

Список Bool, который нужно знать, который выбран:

3 представляют количество элементов, для 3 элементов установлено значение «Не выбрано» (ложь).

Dart

List<bool>_selections = List.generate(3, () =>false);

Виджет

Dart

ToggleButtons(

 

children: <Widget>[

 

    Icon(Icons.format_bold), Icon(Icons.format_italic), Icon(Icons.format_underline),

        isSelected:_selections, on Pressed:(int index){

            setState(() {

                        _selections[index]=!_selections[index];

                if(index==0 && _selections[index]){

                    // Do something

                } else if(index==0 && !_selections[index]){ 

                      // Do something

            }

            // You Can Compare Other Indexs Too

    });

},

 

color:Colors.teal, fillColor:Colors.deep Purple,

   

)

Code Example

import 'package:flutter/material.dart';

 

void main() => runApp(ToggleButtonRun());

 

class ToggleButtonRun extends StatefulWidget {

  @override

  _ToggleButtonRunState createState() => _ToggleButtonRunState();

}

 

class _ToggleButtonRunState extends State<ToggleButtonRun> {

 

  List<bool> _selections = List.generate(3, (_)=>false );

 

  var TxtBold   = FontWeight.normal;

  var TxtItalic = FontStyle.normal;

  var TxtUnder  = TextDecoration.none;

 

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      title: 'Toggle Buttons',

      home: Scaffold(

        appBar:AppBar(

          title:Text("Toggle Buttons"),

        ),

        body: Column(

          crossAxisAlignment:CrossAxisAlignment.start,

          children: <Widget>[

            ToggleButtons(

              children: <Widget>[

                Icon(Icons.format_bold),

                Icon(Icons.format_italic),

                Icon(Icons.format_underlined),

              ],

              isSelected:_selections,

              onPressed:(int index){

                setState(() {

                  _selections[index]=!_selections[index];

 

                  if(index==0 && _selections[index]){

                    TxtBold=FontWeight.bold;

                  }

                  else if(index==0 && !_selections[index]){

                    TxtBold=FontWeight.normal;

                  }

 

                  if(index==1 && _selections[index]){

                    TxtItalic=FontStyle.italic;

                  }

                  else if(index==1 && !_selections[index]){

                    TxtItalic=FontStyle.normal;

                  }

 

                  if(index==2 && _selections[index]){

                    TxtUnder=TextDecoration.underline;

                  }

                  else if(index==2 && !_selections[index]){

                    TxtUnder=TextDecoration.none;

                  }

 

                });

              },

              color:Colors.teal,

              fillColor:Colors.deepPurple,

            ),

            Text(

              "This Is A Simple Text,Press Buttons Up And See What Gonna Happen",

              style:TextStyle(

                fontWeight:TxtBold,

                fontStyle:TxtItalic,

                decoration:TxtUnder,

              ),

            )

          ],

        )

      ),

    );

  }

}

Выходной интерфейс:

Code Explanation

• main— основной метод, вызываемый после загрузки программы.
• После загрузки программы runAppзапустится и вызовет класс, который мы создали (ToggleButtonRun), для запуска.
• Этот класс представляет собой виджет с отслеживанием состояния, поскольку пользователь включает и отключает кнопку и эффект, применяемый к тексту.
• Создание класса состояния ToggleButtonRunState, который расширяет свое основное состояние из класса
• Создание выбора переменных списка Взятие 3 логических переменных, установленных в False (полужирный > false, курсив-> false, подчеркивание > false).
• Создание переменнойTxtBold, используемой для установки текста между полужирным, если кнопка переключена, и обычным, если нет.
• Создание переменнойTxtItalic, используемой для установки текста между курсивом, если кнопка переключена, и обычным, если нет.
• Создание переменнойTxtUnder, используемой для установки подчеркнутого текста, если кнопка переключена, и нет, если нет.
• Поскольку Flutter основан на виджете, необходимо создать виджет.
• Создание MatrialApp,которое позволяет нам установить название приложения, используя эшафот в качестве дома.
• Scaffoldпозволяет нам установить AppBar и тело страницы.
• Как AppBarэто простое название.
• Как тело, он принимает макет столбца (элементы представлены каждый в режиме онлайн).
• Первая строка Возьмем ToggleButtons, которые принимают элементы в качестве дочерних элементов (иконки), isSelected Возьмите список созданных логических значений, которые инициализируют все кнопки значением False (не выбрано). При каждом нажатии мы переключаем его с False на True Set By (Inverse) и проверяя индекс и Если выбрано, то установка эффекта, если не удаление эффекта, в обычный режим.
• color Установить цвет значка ToggleButton при выборе, fillColorУстановить BackgroundColor кнопки Toggle при выборе.
• Вторая строка берет текст, где стиль принимается переменными, которые переключаются при переключении кнопки (пример жирного шрифта на обычный номинал..).