复选框组件,常用于配置的切换,可指定颜色,接收状态变化回调,也可指定三态。

相关组件
CheckboxListTile

Checkbox基础用法

  1. <br />【value】 : 是否选中 【double】<br />【checkColor】: 选中时✔️gou颜色 【Color】<br />【activeColor】: 选中时框内颜色 【Color】<br />【onChanged】: 状态改变事件 【Function(bool)】,<br />![85.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445601030-4a4a7242-a554-417b-911c-b0a957b68160.gif#align=left&display=inline&height=79&margin=%5Bobject%20Object%5D&name=85.gif&originHeight=79&originWidth=404&size=42513&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class CustomCheckbox extends StatefulWidget {
  @override
  _CustomCheckboxState createState() => _CustomCheckboxState();
}

class _CustomCheckboxState extends State<CustomCheckbox> {
  bool _checked = false;
  final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: colors
          .map((e) =>
          Checkbox(
              value: _checked,
              checkColor: Colors.white,
              activeColor: e,
              onChanged: (v) =>
                  setState(() => _checked = v)))
          .toList(),
    );
  }
}

Checkbox的三态

   <br />【tristate】 : 是否是三态   【double】<br /> onChanged时,<br />![86.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589445635070-8001484d-8397-439b-b376-cd9ec17e419a.gif#align=left&display=inline&height=79&margin=%5Bobject%20Object%5D&name=86.gif&originHeight=79&originWidth=404&size=40082&status=done&style=none&width=404)
import 'package:flutter/material.dart';
class TristateCheckBok extends StatefulWidget {
  @override
  _TristateCheckBokState createState() => _TristateCheckBokState();
}

class _TristateCheckBokState extends State<TristateCheckBok> {
  bool _checked = false;
  final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: colors
          .map((e) =>
          Checkbox(
              value: _checked,
              tristate: true,
              checkColor: Colors.white,
              activeColor: e,
              onChanged: (v) {
                print(v);
                setState(() => _checked = v);
              }))
          .toList(),
    );
  }
}