Flutter控件– CheckBox 和 CheckboxListTile

Flutter控件– CheckBox 和 CheckboxListTile一。CheckBox(勾选框) 二。CheckboxListTile(有标题的Checkbox)

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 在右

三 实例截图

Flutter控件-- CheckBox 和 CheckboxListTile

四 代码

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,
                )
              ],
            )),
      ],
    );
  }
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/37034.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注