Flutter Checkbox CheckboxListTile

Flutter 系列文章 总体目录

Checkbox本身不包含任何状态,改变状态需要通过改变value的值改变。

属性说明
valuetrue:选中状态。false:不选中状态。null:只有在tristate=true时可设置此值
tristate设置true时,value才能为null,代表当前控件的第三种状态
onChanged变化时回调
activeColor选中状态时的颜色
materialTapTargetSize点击区域尺寸,padded:向四周扩展48px区域 shrinkWrap:控件区域

CheckboxListTile 是在Checkbox基础上添加ListTile,除了和Checkbox相同的属性外还有一些自己的属性:

属性说明
title、subtitle、secondary如图的位置在这里插入图片描述
selected为true时icon和text的颜色为activeColor
controlAffinityleading:secondary在开头位置,trailing:secondary在结尾位置,platform:根据平台确定

例子:

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class CheckboxDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CheckboxDemo();
}

class _CheckboxDemo extends State<CheckboxDemo> {
  bool _newValue = true;
  bool _newValue1;
  bool _newValue2 = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Checkbox(
          value: _newValue,
          activeColor: Colors.red,
          onChanged: (newValue) {
            setState(() {
              _newValue = newValue;
            });
          },
        ),
        Checkbox(
          value: _newValue1,
          onChanged: (newValue) {
            setState(() {
              _newValue1 = newValue;
            });
          },
          tristate: true,
          materialTapTargetSize: MaterialTapTargetSize.padded,
        ),
        CheckboxListTile(
          value: _newValue2,
          onChanged: (newValue) {
            setState(() {
              _newValue2 = newValue;
              timeDilation = 13;
            });
          },
          title: Text('title'),

        ),

        CheckboxListTile(
          activeColor: Colors.red,
          value: _newValue2,
          onChanged: (newValue) {
            setState(() {
              _newValue2 = newValue;
            });
          },
          title: Text('title'),
          subtitle: Text('subtitle'),
          isThreeLine: false,
          dense: true,
          secondary: Icon(Icons.hourglass_empty),
          selected: true,
          controlAffinity: ListTileControlAffinity.platform,
        ),
      ],
    );
  }
}

在这里插入图片描述

交流

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值