flutter--复选框CheckBox、CheckboxListTile

CheckBox继承自StatelessWidget，是个无状态组件，本身不会保存状态，所以需要一个有状态的父组件用来保存这个状态。

一、CheckBox

先看constructor

CheckBox({
  Key key,
  @required bool value,                  //复选框的值
  bool tristate: false,                     //为true时复选框会多一个值为null的状态，复选框内显示为横线
  @required ValueChanged<bool> onChanged,    //点击复选框的回调
  Color activeColor,                      //选中时复选框的颜色
  Color checkColor,                      //选中时对号的颜色
  MaterialTapTargetSize materialTapTargetSize    //有效点击区域的大小
})

看demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: CheckboxDemo()
      )
    );
  }
}

class CheckboxDemo extends StatefulWidget {
  @override
  _CheckboxDemoState createState() => new _CheckboxDemoState();
}

class _CheckboxDemoState extends State<CheckboxDemo> {
  bool _checkboxSelected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Checkbox(
        value: _checkboxSelected,
        activeColor: Colors.red,
        checkColor: Colors.yellow,
        tristate: true,
        onChanged:(value){
          print(value);
          setState(() {
            _checkboxSelected=value;
          });
        } ,
      )
    );
  }
}

屏幕正中间一个小方块，就是Checkbox。
这个比较简单，Color已经很熟练了，基本上大部分可视组件都有，一个value还有个onChanged回调。

tristate之前没见过，值为false的时候，复选框有两种状态，对应两个值true和false；值为true的时候有三种状态，对应三个值true、null、false。

这里用了有状态组件StatefulWidget作为父组件，又在父组件里创建了state，状态有子组件管理，在onChanged事件里setState改变状态，这里和react很像。

上边已经用了value、onChanged接下来看一下Switch的其他属性。
一个复选框就这么写完了，但是不能就放一个框啊，要有文字，没有文字谁知道这个框选中是要干啥，有可能还需要个图标，后边学了布局用flex很容易可以实现。
有人说我不想每次都重复写这么个布局，虽然不多但是每次都一样写着烦，flutter在这里体现出了人性化，提供了一个可以带文字和图标的复选框组件CheckboxListTile。

二、CheckboxListTile

先来看一下constructor

const CheckboxListTitle({
  Key key,
  @required bool value,
  @required ValueChanged<bool> onChanged,
  Color activeColor,
  Widget title,                    //复选框的主标题
  Widget subtitle,                  //复选框的副标题
  bool isThreeLine: false,          //文字是否为三行
  bool dense,                        //是否为垂直密集列表的一部分
  Widget secondary,                //图标
  bool selected: false,              //文字和图标颜色是否为选中的颜色(activeColor)
  ListTileControlAffinity controlAffinity: ListTileControlAffinity.platform    //文字、图标、复选框的排列顺序
});

看一下demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: CheckboxDemo()
      )
    );
  }
}

class CheckboxDemo extends StatefulWidget {
  @override
  _CheckboxDemoState createState() => new _CheckboxDemoState();
}

class _CheckboxDemoState extends State<CheckboxDemo> {
  bool _checkboxSelected = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CheckboxListTile(
        value: _checkboxSelected,
        title: Text('this is title'),
        subtitle: Text('this is subtitle'),
        activeColor: Colors.red,
        dense: true,
        selected: true,
        isThreeLine: false,
        secondary: Icon(Icons.book),
        controlAffinity: ListTileControlAffinity.leading,
        onChanged:(value){
          print(value);
          setState(() {
            _checkboxSelected=value;
          });
        } ,
      )
    );
  }
}

重复的就不说了。

title & subtitle

这两个放一起，都是复选框的文字描述，一主一次。

dense

如果为true，表示这个复选框是一个列表的一部分，会缩小字体。
为false时则是默认大小

isThreeLine

是否为三行，这是个坑。
首先要搭配subtitle使用，没有subtitle的话报错。
然后就是这个坑了，不是文字以三行显示，而是告诉程序，我现在的文字(title)是不是有三行。。。
title只有一行
isThreeLine为false

isThreeLine为true

可以看到为false的时候，文字会垂直局中，为true的时候，文字偏上，这是因为告诉程序这段文字有三行，会把三行文字整体垂直居中显示，这就造成了上边的情况。
title为三行
isThreeLine为false

isThreeLine为true

可以看到显示上并没有什么区别，这是因为设置为true的时候，告诉了程序这是三行文字，会居中显示，为false的时候实际上是把整个CheckboxListTile的区域撑满，居中不居中并没有什么区别。

title为两行和一行的情况显示是相同的，最多就是三行，超过三行的文字不会显示，会被剪切。
实际上isThreeLine是设置title和subtitle同时存在时文字在垂直方向的显示方式。

secondary

图标，可以不设置。

controlAffinity

复选框、文字、图标的排列顺序，有三个值。
leading：复选框在前，文字在中间图标在最后。
trailing：复选框在后，文字在中间图标在前。
platform：这个是根据不同平台的默认情况自己调整。

CheckBox和CheckboxListTile相对其他组件来说简单一点，但是这里涉及到了StatefulWidget，在之前的笔记里没出现过，需要仔细想一下。