Flutter控件-- CheckBox 和 CheckboxListTile

flutter控件練習demo地址：github

一。CheckBox(勾選框)

CheckBox 勾選框，繼承於 StatefulWidget, 因此自己他是沒有狀態的 Widget ，通常都是在 父 控件中加入有狀態的控件來給他設置。

1.1 屬性

• tristate： 默認這個是false，此時 value 一定不能是null， 能夠設置 爲 true，此時 value 能夠是任意值
• value： 這個值不能是null(除非上面 tristate 是true) ， 用來設置 此 checkbox 是否選中
• onChanged： 是否選中發生變化時的回調， 回調的 bool 值 就是是否選中 ，true 就是選中
• activeColor： 勾選後 勾選框填充的顏色 默認是 ThemeData.toggleableActiveColor
• checkColor： 對勾的顏色 默認的是白色
• materialTapTargetSize：

二。CheckboxListTile(有標題的Checkbox)

2.1 屬性

• value： // 必需要的屬性，是否選定
• onChanged： 是否選中發生變化時的回調， 回調的 bool 值 就是是否選中 , true 是 選中
• activeColor： 選中時 checkbox 的填充的顏色
• title： 標題， 具備表明性的就是 Text
• subtitle： 副標題（在 title 下面）， 具備表明性的就是 Text
• isThreeLine = false：// 是不是三行文本
  • true ： 副標題 不能爲 null
  • false：若是沒有副標題 ，就只有一行， 若是有副標題 ，就只有兩行
• dense： 是否密集垂直
• secondary： 左邊的一個控件
• selected = false： text 和 icon 的 color 是否 是 activeColor 的顏色
• controlAffinity = ListTileControlAffinity.platform：
  • ListTileControlAffinity.platform 根據不一樣的平臺，來顯示 對話框 的位置
  • ListTileControlAffinity.trailing：勾選在右，title 在中，secondary 在左
  • ListTileControlAffinity.leading ：勾選在左，title 在中，secondary 在右

三 實例截圖

四 代碼

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<StatefulWidget> 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: <Widget>[
        SizedBox(
          height: 20,
        ),
        Text("一：Checkbox",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
        Checkbox(
//          tristate: true,
          // 這個值不能是null(除非上面 tristate 是true) ， 用來設置 此 checkbox 是否選中
          value: _isCheck,
          // 勾選後  勾選框填充的顏色 默認是 ThemeData.toggleableActiveColor
          activeColor: Colors.red,
          // 對勾的顏色  默認的是白色
          checkColor: Colors.blue,
          // 是否選中發生變化時的回調， 回調的 bool 值 就是是否選中
          // true 就是選中
          onChanged: (isCheck) {
            if (isCheck) {
              Fluttertoast.showToast(msg: "改變了：$isCheck");
            }
            _isCheck = isCheck;
            //改變_CheckBoxState
            setState(() {});
          },
        ),
        Text("用checkbox實現單選，其實就是改值",
            style: TextStyle(fontWeight: FontWeight.bold)),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Text("男"),
                Checkbox(
                  value: _isMale,
                  onChanged: (isMan) {
                    setState(() {
                      if (isMan) {
                        _isMale = true;
                        _isFemale = false;
                      }
                    });
                  },
                )
              ],
            ),
            SizedBox(
              width: 20,
            ),
            Row(
              children: <Widget>[
                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: <Widget>[
                CheckboxListTile(
                  // 必需要的屬性
                  value: _checkboxListChecked,
                  //是否選中發生變化時的回調， 回調的 bool 值 就是是否選中 , true 是 選中
                  onChanged: (isCheck) {
                    Fluttertoast.showToast(msg: "選的$isCheck");
                    setState(() {
                      _checkboxListChecked = isCheck;
                    });
                  },
                  // 選中時 checkbox 的填充的顏色 ，
                  //      selected 若是是 true ：
                  //                若是 不設置 title 和 subtitle 中 text 的 color 的話， text的顏色 跟隨 activeColor
                  activeColor: Colors.red,
                  // 標題， 具備表明性的就是 Text ，
                  //        selected 若是是 true ：
                  //         若是 不設置 text 的 color 的話， text的顏色 跟隨 activeColor
                  title: Text(
                    "標題",
                    style: TextStyle(color: Colors.blueAccent),
                  ),
                  // 副標題（在 title 下面）， 具備表明性的就是 Text ， 若是 不設置 text 的 color 的話， text的顏色 跟隨 activeColor
                  subtitle: Text("副標題"),
                  // 是不是三行文本
                  //        若是是 true ： 副標題 不能爲 null
                  //        若是是 false：
                  //                      若是沒有副標題 ，就只有一行， 若是有副標題 ，就只有兩行
                  isThreeLine: true,
                  // 是否密集垂直
                  dense: false,
                  // 左邊的一個控件
                  secondary: Text("secondary"),
                  // text 和 icon 的 color 是否 是 activeColor 的顏色
                  selected: false,
                  controlAffinity: ListTileControlAffinity.trailing,
                ),
                CheckboxListTile(
                  onChanged: (isCheck) {
                    setState(() {
                      _checkboxList2Checked = isCheck;
                    });
                  },
                  selected: false,
                  value: _checkboxList2Checked,
                  title: Text("標題2"),
                  controlAffinity: ListTileControlAffinity.leading,
                )
              ],
            )),
      ],
    );
  }
}

複製代碼