Checkbox

选择控件

class _MyHomePageState extends State<MyHomePage> {
  bool _isCheck = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: const Text('首页')),
      body: new Center(
          child: new Checkbox(
        //默认是否选中，tristate 为 false 的时候，value 不能为 null
        value: _isCheck,
        //不能为null，如果为 true，value 为 null 的时候显示禁用标识
        tristate: false,
        onChanged: (isCheck) => {
              this._isCheck = isCheck,
              setState(() {
                print("isChcek=====$_isCheck");
              })
            },
        //选中框的背景颜色
        activeColor: Colors.red,
        //选中勾的颜色
        checkColor: Colors.blue,
      )),
    );
  }
}

image.png

CheckboxListTile

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: const Text('首页')),
        body: ListView(
          children: <Widget>[
            CheckboxListTile(
                value:false,
                onChanged:(isCheck) => {
                  print("isCheck===$isCheck")
                },
                activeColor: Colors.red,
                title:Text('这是title'),
                subtitle:Text('这是描述'),
                //是否要撑满3行
                isThreeLine:false,
                //是否密集
                dense:false,
                secondary:CircleAvatar(child: Icon(Icons.android),),
                selected:true,
                //选择控件放的位置
                controlAffinity:ListTileControlAffinity.platform,
            ),
          ],
        ));
  }
}
  

image.png

ChoiceChip

ChoiceChip 控件也可以做选择操作

new Container(
          alignment: Alignment.center,
         
          child: ChoiceChip(
            //对应的图标
            avatar: CircleAvatar(child: Icon(Icons.android)),
            //对应的标签名称
            label: Text('label'),
            //对应的标签样式
            labelStyle: TextStyle(
              fontSize: 22,
            ),
            //图标和标签间距
            labelPadding: EdgeInsets.all(10),
            //是否选中监听事件
            onSelected: (isSelect) => {print("isSelect====$isSelect")},
            //按下阴影的宽度
            pressElevation: 0.5,
            //是否选中
            selected: true,
            //选中的背景颜色
            selectedColor: Colors.green,
            //禁用的背景颜色
            disabledColor: Colors.red,
            tooltip: 'tooltip',
            //背景框的形状
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
            ),
            //图标或者文字超出ChoiceChip 范围的部分剪切方式，默认不剪切 Clip.none
            clipBehavior: Clip.none,
            //未选中的背景颜色
            backgroundColor: Colors.grey,
            //内容距离边框的间距
            padding: EdgeInsets.all(10.0),
            materialTapTargetSize: MaterialTapTargetSize.padded,
            //阴影宽度
            elevation: 5.0,
            //阴影颜色
            shadowColor: Colors.yellow,
            //选中阴影颜色
            selectedShadowColor: Colors.blue,
            //图标的边框
            avatarBorder: const CircleBorder(),
          ),
        )