Flutter基础组件<单选框和复选框>

Flutter入门笔记系列文章部分内容来源于《Flutter 实战》，如有侵权请联系删除！

Material 组件库中提供了Material风格的单选开关Switch和复选框Checkbox，虽然它们都是继承自StatefulWidget，但它们本身不会保存当前选中状态，选中状态都是由父组件来管理的。当Switch或Checkbox被点击时，会触发它们的onChanged回调，我们可以在此回调中处理选中状态改变逻辑。

首先看一个简单的例子：

bool checkboxState = false; //CheckBox状态
bool switchState = false; //Switch状态
……
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  textDirection: TextDirection.ltr,
  children: [
    Checkbox(
        value: checkboxState,
        activeColor: Colors.blue,
        onChanged: (value) {
          setState(() {
            checkboxState = value;
          });
        }),
    Text(checkboxState ? "选中" : "未选中"),
  ],
),
Switch(
    value: switchState,
    activeColor: Colors.green,
    onChanged: (value) {
      setState(() {
        switchState = value;
      });
    })

运行效果：

CheckBox关 Switch开

CheckBox开 Switch关

Switch和Checkbox初始状态都为未选中状态，当用户点击时，会将状态置反，然后回调用setState()通知Flutter framework重新构建UI。

属性介绍

下面以Switch控件为例：

const Switch({
  Key key,
  @required this.value,    //true：开， false：关
  @required this.onChanged,   //状态变化时的回调方法
  this.activeColor,   //打开状态下颜色
  this.activeTrackColor,   //打开状态下track颜色
  this.inactiveThumbColor,   //关闭状态thumb颜色
  this.inactiveTrackColor,   //关闭状态track颜色
  this.activeThumbImage,   //打开状态下thumb图片
  this.inactiveThumbImage,   //关闭状态下thumb图片
  this.materialTapTargetSize,   //点击区域
}) 

注：track表示的是开关划过的路径，thumb表示的是小圆圈。

简单测试一下这些属性的作用：

Switch(
    value: switchState,
    activeColor: Colors.green,
    inactiveThumbColor: Colors.blue,
    activeTrackColor: Colors.red,
    inactiveTrackColor: Colors.grey,
    onChanged: (value) {
      setState(() {
        switchState = value;
      });
    })

运行效果

Switch关闭

Switch打开

Switch(
    value: switchState,
    inactiveThumbImage: NetworkImage("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2559565322,2534358279&fm=15&gp=0.jpg"),
    activeThumbImage: AssetImage("images/star_icon.png"),
    onChanged: (value) {
      setState(() {
        switchState = value;
      });
    })

运行效果

Switch关闭

Switch打开

Switch和Checkbox属性比较简单，读者可以查看API文档，它们都有一个activeColor属性，用于设置激活态的颜色。至于大小，到目前为止，Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false 。如果tristate值为true时，value的值会增加一个状态null，读者可以自行了解。

通过Switch和Checkbox我们可以看到，虽然它们本身是与状态（是否选中）关联的，但它们却不是自己来维护状态，而是需要父组件来管理状态，然后当用户点击时，再通过事件通知给父组件，这样是合理的，因为Switch和Checkbox是否选中本就和用户数据关联，而这些用户数据也不可能是它们的私有状态。我们在自定义组件时也应该思考一下哪种状态的管理方式最为合理。