【Flutter】单选框&复选框（四）

简介

Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox，它们都是继承自StatelessWidget，所以它们本身不会保存当前选择状态，所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时，它们会触发onChanged回调，我们可以在此回调中处理选中状态改变逻辑。

运行效果

这两个widgets比较简单，故写在一起，效果与打印如下：

运行效果.gif

children: <Widget>[
            Switch(
// 滑动开关时光圈颜色
                activeColor: Colors.red,

// 开关开和关的轨道背景色
                activeTrackColor: Colors.orange,
                inactiveTrackColor: Colors.green,
// 开关头背景色，若同时有图片，则图片优先
                inactiveThumbColor: Colors.yellow,
// 开关头上的开或者关的图片
                activeThumbImage: AssetImage('images/1.png'),
                inactiveThumbImage: AssetImage('images/2.png'),

                //设置为MaterialTapTargetSize.shrinkWrap时，clip距顶部距离为0；
                // 设置为MaterialTapTargetSize.padded时距顶部有一个距离
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                value: _switchSelected,
                onChanged: (value) {
                  _handleSwitch(value);
                }),
            Checkbox(
                // 属性tristate，表示是否为三态，其默认值为false
                // 这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false ；
                // 如果其值为true时，value的值会增加一个状态null。
                tristate: true,
                activeColor: Colors.red,
                value: _checkBoxSelected,
                onChanged: (value) {
                  _handleCheckBox(value);
                })
          ]

点击方法回调

_handleCheckBox(value) {
    setState(() {
      print(value);
      _checkBoxSelected = value;
    });
  }

Checkbox 注意点

checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false ；如果其值为true时，value的值会增加一个状态null，上述动图的打印结果就是验证。