美文网首页Flutter教学
Flutter(19):Material组件之Checkbox/

Flutter(19):Material组件之Checkbox/

作者: starryxp | 来源:发表于2020-09-27 16:54 被阅读0次

    Flutter教学目录持续更新中

    Github源代码持续更新中

    1.Checkbox/CheckboxListTile介绍

    • Checkbox:复选框,允许用户从一组中选择多个选项。
    • CheckboxListTile:在Checkbox 的上层封装,它的外观是提供类似设置页的选择组件,可设置图标和文字。

    2.CheckBox属性

    • value:是否选中此复选框
    • tristate:false,默认false,如果为true,复选框的值可以为true、false或null。
    • onChanged:监听,当复选框的值应该更改时调用
    • mouseCursor:光标
    • activeColor:选中此复选框时要使用的颜色
    • checkColor:选中此复选框时用于复选图标的颜色
    • autofocus:false

    3.CheckboxListTile属性

    • value:是否选中此复选框
    • onChanged:监听,当复选框的值应该更改时调用
    • activeColor:选中此复选框时要使用的颜色
    • checkColor:选中此复选框时用于复选图标的颜色
    • title:主标题
    • subtitle:副标题
    • isThreeLine:false,
    • dense:是否是列表的一部分
    • secondary:显示在复选框前面的小部件
    • selected:false,选中后文字高亮,默认false
    • controlAffinity:ListTileControlAffinity.platform,控件相对于文本的位置
    • autofocus:alse,
    • contentPadding:内边距
    • tristate:false,默认false,如果为true,复选框的值可以为true、false或null。

    4.Checkbox

    这个比较简单,主要讲一下tristate这个属性,通常情况Checkbox只有两种状态,但是当tristate为true时支持设置value为null的第三种状态,会有一个特殊样式


    false.jpg true.jpg null.jpg
      bool _checkboxSelected = false;
      var _checkboxTextSelected = '已选中';
      var _checkboxTextNotSelected = '未选中';
    Row(
                  children: [
                    Checkbox(
                      value: _checkboxSelected,
                      onChanged: (isChecked) {
                        setState(() {
                          _checkboxSelected = isChecked;
                        });
                      },
                      tristate: false,
                      activeColor: Colors.blue,
                      checkColor: Colors.white,
                    ),
                    Text(_checkboxSelected
                        ? _checkboxTextSelected
                        : _checkboxTextNotSelected)
                  ],
                ),
    

    5.CheckboxListTile

    这个就是Checkbox扩展组件,支持设置标题,副标题,还是secondary组件,可以是其他widhet。selected这个属性呢可以支持内部文字,icon跟着activeColor联动变色


    1601177575916.jpg 1601177586772.jpg
    CheckboxListTile(
                  value: _checkboxSelected,
                  onChanged: (isChecked) {
                    setState(() {
                      _checkboxSelected = isChecked;
                    });
                  },
                  secondary: Icon(Icons.print),
                  title: Text('文件一'),
                  subtitle: Text('会议文件'),
                  contentPadding: EdgeInsets.all(10),
                  controlAffinity: ListTileControlAffinity.platform,
                  selected: _checkboxSelected,
                  dense: true,
                ),
    

    下一节:Material组件之Radio/RadioListTile

    Flutter(20):Material组件之Radio/RadioListTile

    Flutter教学目录持续更新中

    Github源代码持续更新中

    相关文章

      网友评论

        本文标题:Flutter(19):Material组件之Checkbox/

        本文链接:https://www.haomeiwen.com/subject/neikuktx.html