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!;                });              },            ),          ],        ));  }}

运行效果如下图

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