Flutter入门（29）：Flutter 组件之 CheckBox 详解

1. 基本介绍

CheckBox 是一个常见的复选框。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. CheckBox 属性介绍

CheckBox属性	介绍
value	@required 是否选中
tristate	三态复选框，默认 false，当设置为 true 时，设置 value = null，复选框中间会变成破折号(-)
onChanged	@required 点击事件
mouseCursor	鼠标光标
activeColor	选中时填充颜色
checkColor	选中时中间✔️颜色
focusColor	聚焦颜色
hoverColor	悬停颜色
materialTapTargetSize	内边距，默认最小点击区域为 48 * 48，MaterialTapTargetSize.shrinkWrap 为组件实际大小
visualDensity	布局紧凑设置
focusNode	焦点控制，Flutter 组件之 FocusNode 详解
autofocus	自动聚焦，默认为 false

4. CheckBox 详解

4.1 容器创建

import 'package:flutter/material.dart';

class FMCheckBoxVC extends StatefulWidget{
  @override
  FMCheckBoxState createState() => FMCheckBoxState();
}

class FMCheckBoxState extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("CheckBox"),),
      body: Center(
        child: _colorfulCheckBox(),
      ),
    );
  }

  bool checkboxSelected = true;

  Checkbox _colorfulCheckBox(){
    return Checkbox(
        value: checkboxSelected,
        onChanged: (value){
          checkboxSelected = !checkboxSelected;

          setState(() {

          });
        }
    );
  }
}

如图，一个简单可以点击的 CheckBox 就已经完成了。

CheckBox normal.gif

4.2 三态复选框

设置 tristate == true && value == null，这时 CheckBox 会变成一个破折号。

截屏2020-10-10 上午11.30.07.png

4.3 颜色设置

使用 activeColor 改变选中时填充颜色。
使用 checkColor 改变选中时中间✔️颜色。

CheckBox colors.gif

5. CheckBox 进阶

这里做一个例子，像菜单一样的多选功能。

• 根据需要，批量创建复选框及标题。
• 创建数据模型，保存每一个标题名称及状态。
• 保存当前选中状态，以及数据处理。

相信能看到这里的，对 flutter 也不在陌生了，这里我就简单点，直接上代码。

import 'package:flutter/material.dart';

class FMCheckBoxVC extends StatefulWidget{
  @override
  FMCheckBoxState createState() => FMCheckBoxState();
}

class FMCheckBoxState extends State {

  List  _datas = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    initData();
  }

  void initData(){
    _datas.add(FMCheckBoxModel(false, "游戏"));
    _datas.add(FMCheckBoxModel(false, "社交"));
    _datas.add(FMCheckBoxModel(false, "购物"));
    _datas.add(FMCheckBoxModel(false, "娱乐"));
    _datas.add(FMCheckBoxModel(false, "影视"));

    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox"),
      ),
      // body: Center(
      //   child: _colorfulCheckBox(),
      // ),
      body: ListView.builder(
        itemCount: _datas.length,
          itemBuilder: (context, index){
            FMCheckBoxModel model = _datas[index];
            return _buildRow(model);
          }
      ),
      bottomSheet: _bottomSheet(),
    );
  }

  BottomSheet _bottomSheet(){
    return BottomSheet(
      onClosing: (){},
      builder: (BuildContext context){
        return Container(
          height: 60,
          color: Colors.cyan,
          child: Text(_selectedBoxs()),
          alignment: Alignment.center,
        );
      },
    );
  }

  String _selectedBoxs(){
    String string = "";

    _datas.forEach((FMCheckBoxModel model) {
      if (model.selected) {
        string = string + "${model.text}  ";
      }
    });
    
    return string;
  }

  Row _buildRow(FMCheckBoxModel model){
    return Row(
      children: [
        _checkbox(model),
        Text("${model.text}")
      ],
    );
  }

  Checkbox _checkbox(FMCheckBoxModel model){
    return Checkbox(
        value: model.selected,
        onChanged: (value){
          model.selected = !model.selected;

          setState(() {

          });
        }
    );
  }

  bool checkboxSelected = true;

  Checkbox _colorfulCheckBox(){
    return Checkbox(
        value: checkboxSelected,
        tristate: true,
        activeColor: Colors.red,
        checkColor: Colors.black,
        hoverColor: Colors.pink,
        focusColor: Colors.yellow,
        // visualDensity: VisualDensity(horizontal: 3, vertical: -3),
        onChanged: (value){
          checkboxSelected = !checkboxSelected;

          setState(() {

          });
        }
    );
  }
}

class FMCheckBoxModel extends Object {

  bool selected;
  String text;

  FMCheckBoxModel(this.selected, this.text);
}

CheckBox more.gif

6. 技术小结

• CheckBox 在项目中应用其实较少，大致了解一下就可以，有实际需要的时候在细化一下。