【Flutter】【widget】Checkbox 和 CheckboxListTile 复选框快速学习一下

---

前言

---

一、Checkbox ，CheckboxListTile 是什么？

Checkbox 复选框，
CheckboxListTile ：添加了checkbox 的ListTile widget

二、使用步骤

1.Checkbox

代码如下（示例）：

  Checkbox(
        activeColor: Colors.amberAccent, //选中的颜色
        fillColor: MaterialStateProperty.all(Colors.pink), //边框的颜色
        checkColor: Colors.green, //打钩的颜色
        focusColor: Colors.indigo,
        hoverColor: Colors.blue, //鼠标在上面，整个波纹显示的颜色
        value: checkS1,
        onChanged: (bool? value1) {
          checkS1 = value1!;
          setState(() {});
        }),
1
2
3
4
5
6
7
8
9
10
11

2.CheckboxListTile

通过Container 给 CheckboxListTile 加一个圆角的，看上去比较好看，
点击整个title 都可以触发onChanged
代码如下（示例）：

Container(
     //给CheckboxListTile加个圆角比较好看
     decoration: const BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(15)),
         color: Colors.redAccent),
     child: CheckboxListTile(
         // shape: const RoundedRectangleBorder(
         //     borderRadius: BorderRadius.all(
         //         Radius.circular(15))), //整个CheckboxListTile的相撞
         title: const Text('标识内容'),
         subtitle: const Text('详细的内容'),
         secondary: const Icon(Icons.near_me),
         checkboxShape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(
                 Radius.circular(15))), //CheckBox的形状也可以设置
         value: checkS1,
         onChanged: (bool? value1) {
           //点击整个title 都可以触发该方法
           checkS1 = value1!;
           setState(() {});
         }),
   )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.三态

checkbox 其实是有三种状态的，一直是选中，未选中，还有一种是null，相当于未操作的提示。
tristate: true,之后才会实现，这样onchanged的value 就可能是null的情况：就会出现如下图的样式

  bool? checkS1 = false;


 Container(
     //给CheckboxListTile加个圆角比较好看
     decoration: const BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(15)),
         color: Colors.redAccent),
     child: CheckboxListTile(
         // shape: const RoundedRectangleBorder(
         //     borderRadius: BorderRadius.all(
         //         Radius.circular(15))), //整个CheckboxListTile的相撞
         title: const Text('标识内容'),
         subtitle: const Text('详细的内容'),
         secondary: const Icon(Icons.near_me),
         checkboxShape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(
                 Radius.circular(15))), //CheckBox的形状也可以设置
         value: checkS1,
         tristate: true,
         onChanged: (bool? value1) {
           //点击整个title 都可以触发该方法
           checkS1 = value1;
           setState(() {});
         }),
   )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

---

总结

欢迎关注，留言，咨询，交流！