文章已同步至【个人博客】，欢迎访问【我的主页】😃
文章地址：blog.fanjunyang.zone/archives/fl…

单选框(Switch)

因为按钮都是有状态的，所以在创建模板的时候，一定要创建有状态的模板（使用快捷键stf创建），复选按钮也一样

但是这些按钮本身不会保存当前选择状态，因此它们的选中状态都是由父组件来管理的。
但是当你点击的时候会触发他们的onChange函数，我们可以在此函数中处理代码逻辑。

源码示例

构造函数如下：

const Switch({
	Key key,
	@required this.value,
	@required this.onChanged,
	this.activeColor,
	this.activeTrackColor,
	this.inactiveThumbColor,
	this.inactiveTrackColor,
	this.activeThumbImage,
	this.inactiveThumbImage,
	this.materialTapTargetSize,
	this.dragStartBehavior = DragStartBehavior.start,
})

其中value和onChange是必选属性

属性解释

value

即按钮当前的状态是选中还是不选中，值为true或者false

onChanged

当按钮改变状态时，代码的执行逻辑

activeColor、 activeTrackColor

这两个属性都是在按钮选中状态下显示按钮的颜色

activeColor显示的是按钮的颜色
activeTrackColor显示的是按钮里面的颜色

代码示例：

class _CategoryPageState extends State<CategoryPage> {
  bool _switchSelected = true; //维护单选开关状态
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Switch(
            value: _switchSelected, //当前状态，必填
            onChanged: (value) {  //必填，改变状态后执行的代码逻辑
              //重新构建页面
              setState(() {
                _switchSelected = value;
              });
            },
            activeColor:Colors.red, //选中后按钮的颜色，默认是蓝色
            activeTrackColor:Colors.yellow, //选中后按钮里面的颜色
          ),
        ],
      ),
    );
  }
}

运行效果：

inactiveThumbColor、inactiveTrackColor

表示按钮未选中状态下按钮的颜色

代码示例：

class _CategoryPageState extends State<CategoryPage> {
  bool _switchSelected = true; //维护单选开关状态
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Switch(
            value: _switchSelected, //当前状态，必填
            onChanged: (value) {  //必填
              //重新构建页面
              setState(() {
                _switchSelected = value;
              });
            },
            activeColor:Colors.red, //选中后按钮的颜色，默认是蓝色
            activeTrackColor:Colors.yellow, //选中后按钮里面的颜色
            inactiveThumbColor:Colors.pink, //未选中按钮的颜色
            inactiveTrackColor:Colors.green,  ////未选中按钮里面的颜色
          ),
        ],
      ),
    );
  }
}

运行效果：

activeThumbImage、inactiveThumbImage

当该开关打开或者关闭时在该开关的大拇指上使用的图像。
如果这个开关是用switch创建的，则忽略它。

一般不使用，不做过多介绍

materialTapTargetSize

配置点击目标的最小大小,参数有padded、shrinkWrap和value

代码示例：

class _CategoryPageState extends State<CategoryPage> {
  bool _switchSelected = true; //维护单选开关状态
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Switch(
            value: _switchSelected, //当前状态，必填
            onChanged: (value) {  //必填
              //重新构建页面
              setState(() {
                _switchSelected = value;
              });
            },
            activeColor:Colors.red, //选中后按钮的颜色，默认是蓝色
            activeTrackColor:Colors.yellow, //选中后按钮里面的颜色
            inactiveThumbColor:Colors.pink, //未选中按钮的颜色
            inactiveTrackColor:Colors.green,  ////未选中按钮里面的颜色
            materialTapTargetSize:MaterialTapTargetSize.shrinkWrap, //配置点击目标的最小大小,参数有padded和shrinkWrap
            // activeThumbImage 当该开关打开时在该开关的大拇指上使用的图像。如果这个开关是用[switch .adaptive]创建的，则忽略它。
          ),
        ],
      ),
    );
  }
}

运行效果：

复选框(Checkbox)

和单选框一样，也需要创建有状态的模板（用stf快捷键创建）

源码示例

构造函数如下：

const Checkbox({
	Key key,
	@required this.value,
	this.tristate = false,
	@required this.onChanged,
	this.activeColor,
	this.checkColor,
	this.materialTapTargetSize,
})

和单选框一样value和onChange都是必选的属性

属性解释

有些属性和单选框一样，所以就不赘述了，给个例子：

class _CategoryPageState extends State<CategoryPage> {
  bool _checkboxSelected = true; //维护复选框状态
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Checkbox(
            value: _checkboxSelected,
            activeColor: Colors.red, //选中时的颜色
            checkColor:Colors.green,  //选中时里面对号的颜色
            onChanged: (value) {
              setState(() {
                _checkboxSelected = value;
              });
            },
          )
        ],
      ),
    );
  }
}

运行效果：

tristate

这个属性表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false 。如果tristate值为true时，value的值会增加一个状态null。

总述：
通过Switch和Checkbox可以看到，虽然它们本身是与状态（是否选中）关联的，但它们却不是自己来维护状态，而是需要父组件来管理状态。可以在父组件中定义方法，来处理选中与未选中执行的代码逻辑

---

G_G