【Flutter】单选框&复选框(四)

2019-05-23  本文已影响0人  Colleny_Z

简介

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,上述动图的打印结果就是验证。

上一篇下一篇

猜你喜欢

热点阅读