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

Разработка программного обеспечения Buy Now Pay Later Программирование и разработка

Кнопка-переключатель позволяет пользователю изменять настройку между двумя состояниями. Вы можете добавить базовую кнопку-переключатель в свой макет с помощью объекта 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

Dart
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,
              ),
            )
          ],
        )
      ),
    );
  }
}

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

Читайте также:  Что такое Extern в C?

This Is A Simple Text,Press Buttons

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 при выборе.
  • Вторая строка берет текст, где стиль принимается переменными, которые переключаются при переключении кнопки (пример жирного шрифта на обычный номинал..).
Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector