Image Description

单选开关Switch 和 复选框Checkbox

Material 组件库提供了单选开关 Switch和复选框 Checkbox,它们继承自 StatefulWidget。

本身不保存当前的选择状态,状态由父组件管理。当被点击时,回调 onChange被触发,我们在回调中处理状态改变的逻辑。

代码示例

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  
  _SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  //维护单选开关状态
  bool _switchSelected=true;
  //维护复选框状态
  bool _checkboxSelected=true;
  
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
          //当前状态
          value: _switchSelected,
          onChanged:(value){
            //重新构建页面  
            setState(() {
              _switchSelected=value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          //选中时的颜色
          activeColor: Colors.red, 
          onChanged:(value){
            setState(() {
              _checkboxSelected=value;
            });
          } ,
        )
      ],
    );
  }
}