摘要：控件練習(xí)地址一。勾選框勾選框，繼承于所以本身他是沒(méi)有狀態(tài)的，一般都是在父控件中加入有狀態(tài)的控件來(lái)給他設(shè)置。

flutter控件練習(xí)demo地址：github

一。CheckBox(勾選框)

CheckBox 勾選框，繼承于 StatefulWidget, 所以本身他是沒(méi)有狀態(tài)的 Widget ，一般都是在 父 控件中加入有狀態(tài)的控件來(lái)給他設(shè)置。

1.1 屬性

tristate： 默認(rèn)這個(gè)是false，此時(shí) value 必定不能是null， 可以設(shè)置 為 true，此時(shí) value 可以是任意值

value： 這個(gè)值不能是null(除非上面 tristate 是true) ， 用來(lái)設(shè)置 此 checkbox 是否選中

onChanged： 是否選中發(fā)生變化時(shí)的回調(diào)， 回調(diào)的 bool 值 就是是否選中 ，true 就是選中

activeColor： 勾選后 勾選框填充的顏色 默認(rèn)是 ThemeData.toggleableActiveColor

checkColor： 對(duì)勾的顏色 默認(rèn)的是白色

materialTapTargetSize：

二。CheckboxListTile(有標(biāo)題的Checkbox)

2.1 屬性

value： // 必須要的屬性，是否選定

onChanged： 是否選中發(fā)生變化時(shí)的回調(diào)， 回調(diào)的 bool 值 就是是否選中 , true 是 選中

activeColor： 選中時(shí) checkbox 的填充的顏色

title： 標(biāo)題， 具有代表性的就是 Text

subtitle： 副標(biāo)題（在 title 下面）， 具有代表性的就是 Text

isThreeLine = false：// 是否是三行文本

true ： 副標(biāo)題 不能為 null

false：如果沒(méi)有副標(biāo)題 ，就只有一行， 如果有副標(biāo)題 ，就只有兩行

dense： 是否密集垂直

secondary： 左邊的一個(gè)控件

selected = false： text 和 icon 的 color 是否 是 activeColor 的顏色

controlAffinity = ListTileControlAffinity.platform：

ListTileControlAffinity.platform 根據(jù)不同的平臺(tái)，來(lái)顯示 對(duì)話(huà)框 的位置

ListTileControlAffinity.trailing：勾選在右，title 在中，secondary 在左

ListTileControlAffinity.leading ：勾選在左，title 在中，secondary 在右

三 實(shí)例截圖

四 代碼

import "package:flutter/material.dart";
import "package:fluttertoast/fluttertoast.dart";

class CheckBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox"),
        centerTitle: true,
      ),
      body: _Stateful(),
    );
  }
}

class _Stateful extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return _CheckBoxState();
  }
}

class _CheckBoxState extends State {
  bool _isCheck;
  bool _isMale;
  bool _isFemale;
  bool _checkboxListChecked;
  bool _checkboxList2Checked;

  @override
  void initState() {
    super.initState();
    _isCheck = false;
    _isMale = true;
    _isFemale = false;
    _checkboxListChecked = false;
    _checkboxList2Checked = false;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          height: 20,
        ),
        Text("一：Checkbox",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
        Checkbox(
//          tristate: true,
          // 這個(gè)值不能是null(除非上面 tristate 是true) ， 用來(lái)設(shè)置 此 checkbox 是否選中
          value: _isCheck,
          // 勾選后  勾選框填充的顏色 默認(rèn)是 ThemeData.toggleableActiveColor
          activeColor: Colors.red,
          // 對(duì)勾的顏色  默認(rèn)的是白色
          checkColor: Colors.blue,
          // 是否選中發(fā)生變化時(shí)的回調(diào)， 回調(diào)的 bool 值 就是是否選中
          // true 就是選中
          onChanged: (isCheck) {
            if (isCheck) {
              Fluttertoast.showToast(msg: "改變了：$isCheck");
            }
            _isCheck = isCheck;
            //改變_CheckBoxState
            setState(() {});
          },
        ),
        Text("用checkbox實(shí)現(xiàn)單選，其實(shí)就是改值",
            style: TextStyle(fontWeight: FontWeight.bold)),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              children: [
                Text("男"),
                Checkbox(
                  value: _isMale,
                  onChanged: (isMan) {
                    setState(() {
                      if (isMan) {
                        _isMale = true;
                        _isFemale = false;
                      }
                    });
                  },
                )
              ],
            ),
            SizedBox(
              width: 20,
            ),
            Row(
              children: [
                Text("女"),
                Checkbox(
                  value: _isFemale,
                  onChanged: (isFemale) {
                    setState(() {
                      if (isFemale) {
                        _isFemale = true;
                        _isMale = false;
                      }
                    });
                  },
                )
              ],
            )
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Text("二：CheckboxListTile",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
        SizedBox(
            width: 250,
            child: Column(
              children: [
                CheckboxListTile(
                  // 必須要的屬性
                  value: _checkboxListChecked,
                  //是否選中發(fā)生變化時(shí)的回調(diào)， 回調(diào)的 bool 值 就是是否選中 , true 是 選中
                  onChanged: (isCheck) {
                    Fluttertoast.showToast(msg: "選的$isCheck");
                    setState(() {
                      _checkboxListChecked = isCheck;
                    });
                  },
                  // 選中時(shí) checkbox 的填充的顏色 ，
                  //      selected 如果是 true ：
                  //                如果 不設(shè)置 title 和 subtitle 中 text 的 color 的話(huà)， text的顏色 跟隨 activeColor
                  activeColor: Colors.red,
                  // 標(biāo)題， 具有代表性的就是 Text ，
                  //        selected 如果是 true ：
                  //         如果 不設(shè)置 text 的 color 的話(huà)， text的顏色 跟隨 activeColor
                  title: Text(
                    "標(biāo)題",
                    style: TextStyle(color: Colors.blueAccent),
                  ),
                  // 副標(biāo)題（在 title 下面）， 具有代表性的就是 Text ， 如果 不設(shè)置 text 的 color 的話(huà)， text的顏色 跟隨 activeColor
                  subtitle: Text("副標(biāo)題"),
                  // 是否是三行文本
                  //        如果是 true ： 副標(biāo)題 不能為 null
                  //        如果是 false：
                  //                      如果沒(méi)有副標(biāo)題 ，就只有一行， 如果有副標(biāo)題 ，就只有兩行
                  isThreeLine: true,
                  // 是否密集垂直
                  dense: false,
                  // 左邊的一個(gè)控件
                  secondary: Text("secondary"),
                  // text 和 icon 的 color 是否 是 activeColor 的顏色
                  selected: false,
                  controlAffinity: ListTileControlAffinity.trailing,
                ),
                CheckboxListTile(
                  onChanged: (isCheck) {
                    setState(() {
                      _checkboxList2Checked = isCheck;
                    });
                  },
                  selected: false,
                  value: _checkboxList2Checked,
                  title: Text("標(biāo)題2"),
                  controlAffinity: ListTileControlAffinity.leading,
                )
              ],
            )),
      ],
    );
  }
}