By Ne0 — Dec 19, 2018

Flutter Checkbox CheckboxListTile

Checkbox本身不包含任何状态，改变状态需要通过改变value的值改变。

属性	说明
value	true：选中状态。false：不选中状态。null：只有在tristate=true时可设置此值
tristate	设置true时，value才能为null，代表当前控件的第三种状态
onChanged	变化时回调
activeColor	选中状态时的颜色
materialTapTargetSize	点击区域尺寸，padded：向四周扩展48px区域 shrinkWrap：控件区域

CheckboxListTile 是在Checkbox基础上添加ListTile，除了和Checkbox相同的属性外还有一些自己的属性：

属性	说明
title、subtitle、secondary	如图的位置
selected	为true时icon和text的颜色为activeColor
controlAffinity	leading：secondary在开头位置，trailing：secondary在结尾位置，platform：根据平台确定

例子：

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class CheckboxDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CheckboxDemo();
}

class _CheckboxDemo extends State<CheckboxDemo> {
  bool _newValue = true;
  bool _newValue1;
  bool _newValue2 = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Checkbox(
          value: _newValue,
          activeColor: Colors.red,
          onChanged: (newValue) {
            setState(() {
              _newValue = newValue;
            });
          },
        ),
        Checkbox(
          value: _newValue1,
          onChanged: (newValue) {
            setState(() {
              _newValue1 = newValue;
            });
          },
          tristate: true,
          materialTapTargetSize: MaterialTapTargetSize.padded,
        ),
        CheckboxListTile(
          value: _newValue2,
          onChanged: (newValue) {
            setState(() {
              _newValue2 = newValue;
              timeDilation = 13;
            });
          },
          title: Text('title'),

        ),

        CheckboxListTile(
          activeColor: Colors.red,
          value: _newValue2,
          onChanged: (newValue) {
            setState(() {
              _newValue2 = newValue;
            });
          },
          title: Text('title'),
          subtitle: Text('subtitle'),
          isThreeLine: false,
          dense: true,
          secondary: Icon(Icons.hourglass_empty),
          selected: true,
          controlAffinity: ListTileControlAffinity.platform,
        ),
      ],
    );
  }
}