flutter组件 Checkbox,CheckboxListTile,Radio,RadioListTile

1.Checkbox

const Checkbox({
    Key key,

    @required this.value, //是否选中此复选框

    this.tristate = false, //默认false，如果为true，复选框的值可以为true、false或null。

    @required this.onChanged, //监听 当复选框的值应该更改时调用

    this.activeColor, //选中此复选框时要使用的颜色

    this.checkColor, //选中此复选框时用于复选图标的颜色

    this.materialTapTargetSize, //为目标与布局大小，默认有 padded 和 shrinkWrap 两种状态；小菜理解 padded 为谷歌设计建议尺寸 48px * 48px，shrinkWrap 为目标尺寸缩小到谷歌设计提供的最小值，但在实际效果中差别不大

  })

import 'package:flutter/material.dart';

class MyCheck extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyCheck();
  }
}

class _MyCheck extends State<MyCheck> {
  bool _check = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("checkbox"),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text("复选框："),
              Checkbox(
                value: _check,
                activeColor: Colors.red,
                checkColor: Colors.white,
                tristate:true,  //三种状态，会有横线
                materialTapTargetSize:MaterialTapTargetSize.padded,
                onChanged: (val) {
                  print(val);
                  setState(() {
                    _check = val;
                  });
                },
              ),
               Checkbox(
                value: true,
                activeColor: Colors.red,
                checkColor: Colors.white,
                onChanged: (val) {},
              ),
            ],
          ),
          
        ],
      ),
    );
  }
}

  

2. CheckboxListTile

const CheckboxListTile({
    Key key,

    @required this.value, //是否选中此复选框

    @required this.onChanged, //监听 当复选框的值应该更改时调用

    this.activeColor, //选中此复选框时要使用的颜色

    this.title, //列表主标题

    this.subtitle, //列表副标题

    this.isThreeLine = false, //三行展示，显示为顶层

    this.dense, //使文本更小，并将所有内容打包在一起

    this.secondary, //显示在复选框前面的小部件

    this.selected = false, //选中后文字高亮，默认false

    this.controlAffinity = ListTileControlAffinity.platform,
     //leading：secondary在右侧；trailing：secondary在左侧；platform：根据平台确定

})

 CheckboxListTile(
      value: true,
      activeColor: Colors.greenAccent,
      title: Text("姓名"),
      subtitle: Text("小名小名名"),
      // isThreeLine:true,  //三行展示，显示为顶层
      secondary: Image.asset("images/test.jpg"),
      onChanged: (val)=>{},
      // selected: false, //选中后文字高亮，默认false
      // dense: true, //使文本更小，并将所有内容打包在一起
      controlAffinity: ListTileControlAffinity.trailing
      //leading：secondary在右侧；trailing：secondary在左侧；platform：根据平台确定（默认）
)

非三行显示，trailing：secondary在左侧：

三行显示：

leading：secondary在右侧：

3.Radio

const Radio({

    Key key,

    @required this.value,

    @required this.groupValue, //起控制是否为选中状态，当groupValue = value时代表选中状态

    @required this.onChanged, //变化时回调

    this.activeColor, //激活状态下颜色

    this.materialTapTargetSize,  //同上

}) 

 

import 'package:flutter/material.dart';

class MyCheck extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyCheck();
  }
}

class _MyCheck extends State<MyCheck> {

  String _radioVal = "数学";

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("checkbox"),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Radio(
                activeColor: Colors.red,
                value: "语文",
                groupValue: _radioVal,
                onChanged: (val) {
                  setState(() {
                    _radioVal = val;
                  });
                },
              ),
              Radio(
                activeColor: Colors.red,
                value: "数学",
                groupValue: _radioVal,
                onChanged: (val) {
                  setState(() {
                    _radioVal = val;
                  });
                },
              ),
              Radio(
                activeColor: Colors.red,
                value: "英语",
                groupValue: _radioVal,
                onChanged: (val) {
                  setState(() {
                    _radioVal = val;
                  });
                },
              )
            ],
          )
        ],
      ),
    );
  }
}

                  

4.RadioListTile

//属性和CheckboxListTile一样，就不多做阐述了

const RadioListTile({
    Key key,
    @required this.value, //当前的值
    @required this.groupValue, //组的值
    @required this.onChanged,
    this.activeColor,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.secondary,
    this.selected = false,
    this.controlAffinity = ListTileControlAffinity.platform,
}) 

 

RadioListTile(
   value: "语文",
   groupValue: "语文",
   activeColor: Colors.greenAccent,
   title: Text("姓名"),
   subtitle: Text("小名小名名"),
   // isThreeLine:true,  //三行展示，显示为顶层
   secondary: Image.asset("images/test.jpg"),
   onChanged: (val) => {},
   // selected: false, //选中后文字高亮，默认false
   // dense: true, //使文本更小，并将所有内容打包在一起
   controlAffinity: ListTileControlAffinity.leading
   //leading：secondary在右侧；trailing：secondary在左侧；platform：根据平台确定
),