【问题标题】:Flutter ToggleButton Class - Flutter 1.9.1Flutter ToggleButton 类 - Flutter 1.9.1
【发布时间】:2020-01-14 13:23:53
【问题描述】:

我目前正在学习 Flutter 并取得了不错的进步,所以如果这是一个菜鸟问题,请多多包涵。

Flutter 最近更新到 1.9.1,随之而来的是新的小部件 ToggleButton 类;

这正是我所追求的,所以我在我的代码中实现了这个小部件,如下所示

var isSelected1 = [false, true];
var isSelected2 = [false, true];

ToggleButtons(
                borderColor: Colors.black,
                fillColor: Colors.grey,
                borderWidth: 2,
                selectedBorderColor: Colors.black,
                selectedColor: Colors.white,
                borderRadius: BorderRadius.circular(0),
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Open 24 Hours',
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Custom Hours',
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ],
                onPressed: (int index) {
                  setState(() {
                    for (int buttonIndex = 0;
                        buttonIndex < isSelected2.length;
                        buttonIndex++) {
                      if (buttonIndex == index) {
                        isSelected2[buttonIndex] = true;
                      } else {
                        isSelected2[buttonIndex] = false;
                      }
                    }
                  });
                },
                isSelected: isSelected2,
              ),`

我要做的是在选择按钮时显示一个小部件。

我已经尝试了很多方法来处理 if、and、else 语句,但到目前为止我无法弄清楚。

例如

if (buttonIndex == index[0]) {
 // code here} 
else {
 //code here}

我哪里错了?

谢谢!

【问题讨论】:

    标签: flutter dart


    【解决方案1】:
        import 'package:flutter/material.dart';
    
        class SamplePage extends StatefulWidget {
        @override
        _SamplePageState createState() => _SamplePageState();
        }
    
        class _SamplePageState extends State<SamplePage> {
        List<bool> isSelected;
    
        @override
        void initState() {
            isSelected = [true, false];
            super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
            return Scaffold(
            appBar: AppBar(
                title: Text('ToggleButtons'),
            ),
            body: Center(
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                    ToggleButtons(
                    borderColor: Colors.black,
                    fillColor: Colors.grey,
                    borderWidth: 2,
                    selectedBorderColor: Colors.black,
                    selectedColor: Colors.white,
                    borderRadius: BorderRadius.circular(0),
                    children: <Widget>[
                        Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                            'Open 24 Hours',
                            style: TextStyle(fontSize: 16),
                        ),
                        ),
                        Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                            'Custom Hours',
                            style: TextStyle(fontSize: 16),
                        ),
                        ),
                    ],
                    onPressed: (int index) {
                        setState(() {
                        for (int i = 0; i < isSelected.length; i++) {
                            isSelected[i] = i == index
                        }
                        });
                    },
                    isSelected: isSelected,
                    ),
                ],
                ),
            ),
            );
        }
        }
    

    【讨论】:

    • 非常感谢!!绝对精彩的回应!
    • 谢谢,别忘了点赞并勾选正确答案。
    • 是的,这行得通。如果有 3 个切换框可供选择,我该怎么做?再次感谢您。
    • 再添加一个孩子并将该布尔值添加到数组 false 中。
    • omg, ` if (i == index) { isSelected[i] = true; } 否则 {isSelected[i] = false; }` 可以替换为isSelected[i] = i == index
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-22
    • 2020-12-19
    • 2020-01-16
    • 2020-01-01
    • 2021-03-13
    • 2019-03-23
    相关资源
    最近更新 更多