Flutter 从零开始 006 单选开关和复选框

在平时的项目编写工作中，我们用到单选开关和复选框的次数还是比较多的，我们今天简单的介绍一下单选开关和复选框的原理，后期我们再详细的介绍一下单选开关和复选框的自定义和封装使用。

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

class _MyHomePageState extends State<MyHomePage> {
  bool _swithSelected = true; // 单选开关的状态，我们默认选中
  bool _checkBoxSelected = true; //  复选框的状态，我们默认选中

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Switch(
              value: _swithSelected, // 当前状态
              onChanged: (value) {
                //状态监听， 重新构建状态
                setState(() {
                  _swithSelected = value;
                });
              },
            ),
            Checkbox(
              value: _checkBoxSelected,
              activeColor: Colors.blue,      //选中时的颜色
              onChanged: (value) {
                setState(() {
                  _checkBoxSelected = value!;
                });
              },
            ),
          ],
        ));
  }
}

运行效果如下图

下一节我们将解 输入框及表单