本章说一下 单选框(Switch)复选框(Checkbox)

单选框(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,
})
复制代码

其中valueonChange是必选属性

属性解释

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

配置点击目标的最小大小,参数有paddedshrinkWrapvalue

代码示例:

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,
})
复制代码

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

属性解释

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

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

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


G_G