Flutter ToggleButton类-Flutter 1.9.1 [英] Flutter ToggleButton Class - Flutter 1.9.1

问题描述

我目前正在学习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，$ b选择的$ b颜色：Colors.white，
 borderRadius：BorderRadius.circular（0），
子级：[
填充（
填充：const EdgeInsets.all（8.0），
子级：Text（
'Open 24 Hours'，
样式：TextStyle（fontSize：16），
），
），
 Padding（
填充：const EdgeInsets.all（8.0），
子元素：Text（
'Custom Hours'，
样式：TextStyle（fontSize：16），
），
），
]，
 onPressed ：（整数索引）{ 
 setState（（）{
 for（int buttonIndex = 0; 
 buttonIndex< isSelected2.length; 
 buttonIndex ++）{
 if（buttonIndex == index）{
 isSelected2 [buttonIndex] = true; 
} else {
 isSelected2 [buttonIndex] = false; 
} 
} 
}）； 
}，
 isSelected：isSelected2，
），`
  

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

例如

  if（buttonIndex == index [0] ）{
 //在这里编码} 
其他{
 //在这里编码} 
  

我要去哪里了？

谢谢！

解决方案

 导入'package：flutter / material.dart'; 
 
类SamplePage扩展了StatefulWidget {
 @override 
 _SamplePageState createState（）=> _SamplePageState（）; 
} 
 
类_SamplePageState扩展了State< SamplePage> {
 List< bool> isSelected; 
 
 @override 
 void initState（）{
 isSelected = [true，false]; 
 super.initState（）; 
} 
 
 @override 
小部件构建（BuildContext上下文）{
 return Scaffold（
 appBar：AppBar（
 title：Text（' ToggleButtons'），
），
正文：Center（
子级：Column（
 mainAxisAlignment：MainAxisAlignment.spaceEvenly，
子级：< Widget> [
 ToggleButtons（
 borderColor：Colors.black，
 fillColor：Colors.grey，
 borderWidth：2，
 selectedBorderColor：Colors.black，
 selectedColor：Colors.white ，
 borderRadius：BorderRadius.circular（0），
子项：< Widget> [
填充（
填充：const EdgeInsets.all（8.0），
子项：文字（
'Open 24 Hours'，
样式：TextStyle（fontSize：16），
 ），
），
填充（
填充：const EdgeInsets.all（8.0），
子级：文本（
'Custom Hours'，
 style ：TextStyle（fontSize：16），
），
），
]，
 onPressed：（int index）{
 setState（（）{
为（int i = 0;我< isSelected.length; i ++）{
 isSelected [i] = i == index 
} 
}）； 
}，
 isSelected：isSelected，
），
]，
），
），
）; 
} 
} 
  

I am currently learning Flutter and making good progress so please bear with me if this is a noob question.

Flutter recently updated to 1.9.1 and with that came the new widget ToggleButton Class;

It was just what I was after so I have implemented the widget in my code as follow

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,
              ),`

What I am trying to do is display a widget when a button is selected.

I have tried numerous ways with the if, and, else statements and so far I cant figure it out.

for example

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

Where am I going wrong?

Thank you!

解决方案

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

这篇关于Flutter ToggleButton类-Flutter 1.9.1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！