flutter 单选框和复选框(05)

Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox，它们都是继承自StatelessWidget，所以它们本身不会保存当前选择状态，所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时，它们会触发onChanged回调，我们可以在此回调中处理选中状态改变逻辑。我们看一个简单的示例：

class _home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _homeState();
  }
}
class _homeState extends State<_home> {
  bool _switchSelected=true; //维护单选开关状态
  bool _checkboxSelected=true;//维护复选框状态
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: Text("title"),
        centerTitle: true,
      ),
      body:new Column(
        children: <Widget>[
          Switch(//传入value和onChanged,传入value按钮初始化状态,onChanged状态改变回调
            value: _switchSelected,
            activeColor: Colors.red,
            onChanged: (value){
              setState(() {//setState动态更新
                _switchSelected=value;
              });
            },
          ),
          Checkbox(
            value: _checkboxSelected,
            activeColor: Colors.greenAccent,
            onChanged: (value){
              setState(() {
                _checkboxSelected=value;
              });
            },
          )
        ],
      )
    );
  }
}

Checkbox没有设置setState因此点击没有动态更新

上面代码中，由于要维护Switch和Checkbox状态，所以SwitchAndCheckBoxTestRoute继承自StatefulWidget 。在其build方法中分别构建了一个Switch和Checkbox，初始状态都为选中状态，当用户点击时，会将状态置反，然后回调用setState()通知framework重新构建UI。
它们都有一个activeColor属性，用于设置激活态的颜色。至于大小，到目前为止，Checkbox的大小是固定的，无法自定义，而Switch只能定义宽度，高度也是固定的。值得一提的是Checkbox有一个属性tristate ，表示是否为三态，其默认值为false ，这时Checkbox有两种状态即“选中”和“不选中”，对应的value值为true和false ；如果其值为true时，value的值会增加一个状态null，读者可以自行了解。

flutter 单选框和复选框(05)

推荐阅读更多精彩内容