微信交流群

老孟公众号

# ToggleButtons

ToggleButtons组件将多个组件组合在一起,并让用户从中选择,ToggleButtons基础用法如下:

List<bool> _selecteds = [false, false, true];
ToggleButtons(
      isSelected: _selecteds,
      children: <Widget>[
        Icon(Icons.local_cafe),
        Icon(Icons.fastfood),
        Icon(Icons.cake),
      ],
      onPressed: (index) {
        setState(() {
          _selecteds[index] = !_selecteds[index];
        });
      },
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14

isSelected 属性是bool类型集合,数量和children的数量一致,onPressed是点击回调,这时就有了不错了切换按钮行,效果如下:

我们还可以自定义外观,比如设置按钮的颜色:

ToggleButtons(
      color: Colors.green,
      selectedColor: Colors.orange,
  		fillColor: Colors.red,
      ...
)
1
2
3
4
5
6

效果如下:

fillColor是选中按钮的背景颜色。

如果不需要边框,可以将renderBorder设置为false:

ToggleButtons(
	renderBorder: false,
)
1
2
3

效果如下:

当然我们也可以设置边框的圆角半径、宽度、颜色等:

ToggleButtons(
      borderRadius: BorderRadius.circular(30),
      borderColor: Colors.orange,
      borderWidth: 3,
      selectedBorderColor: Colors.deepOrange,
1
2
3
4
5
6

效果如下:

甚至可以设置点击水波纹颜色(splashColor)和按下时的高亮颜色(highlightColor):

ToggleButtons(
      splashColor: Colors.purple,
      highlightColor: Colors.yellow,
      )
1
2
3
4

效果如下:

如果按钮处于禁用状态,可以设置禁用状态下按钮及边框的颜色:

ToggleButtons(
      onPressed: null,
      disabledColor: Colors.grey[300],
      disabledBorderColor: Colors.blueGrey,
      )
1
2
3
4
5

效果如下:

如果开发的是web程序,我们可以设置鼠标悬停颜色:

ToggleButtons(
      hoverColor: Colors.cyan,
      )
1
2
3