flutter 开关Switch与复选框Checkbox

Flutter 移动跨平台开发技术分享

目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒

【x1】点击查看提示

【x2】各种系列的教程

【x3】Flutter文章积累目录


【Flutter组件精讲【79】复选框CheckBox 1】

1 Switch 与 Checkbox 的共有属性配置说明

   activeColor → Color - 激活时原点的颜色。
   activeThumbImage → ImageProvider - 原点还支持图片,激活时的效果。
   activeTrackColor → Color - 激活时横条的颜色。
   inactiveThumbColor → Color - 非激活时原点的颜色。
   inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
   inactiveTrackColor → Color - 非激活时横条的颜色。
   onChanged → ValueChanged - 改变时触发。
   value → bool - 切换按钮的值。

在接下来的文章篇幅中将定义两个变量来维护开关的状态以及复选框的状态,如下所示:

    bool _switchSelected = false; //维护单选开关状态
    bool _checkboxSelected = false; //维护复选框状态

2 开关 Switch

在这里插入图片描述

    Switch(
          //当前状态
          value: _switchSelected,
          // 激活时原点颜色
          activeColor: Colors.blue,
          inactiveTrackColor: Colors.blue.shade50,
          onChanged: (value) {
            //重新构建页面
            setState(() {
              _switchSelected = value;
            });
          },
        )


3 IOS 风格的 CupertinoSwitch

在这里插入图片描述

        CupertinoSwitch(
          value: _switchSelected,
          onChanged: (value) {},
        ),

4 SwitchListTile

SwitchListTile 是将 开关 Switch 、文本 Text 、还有图标水平线性排列的便捷组件

在这里插入图片描述

 new SwitchListTile(
   secondary: const Icon(Icons.shutter_speed),
   title: const Text('硬件加速'),
   value: _switchSelected,
   onChanged: (bool value) {
     setState(() {
       _switchSelected = !_switchSelected;
     });
   },
 ),


5 复选框 Checkbox

在这里插入图片描述

    Checkbox(
          value: _checkboxSelected,
          //选中时的颜色
          activeColor: Colors.red,
          onChanged: (value) {
            setState(() {
              _checkboxSelected = value;
            });
          },
        )

6 CheckboxListTile

在这里插入图片描述


      CheckboxListTile(
          secondary: const Icon(Icons.shutter_speed),
          title: const Text('硬件加速'),
          value: _checkboxSelected,
          onChanged: (bool value) {
            setState(() {
              _checkboxSelected = !_checkboxSelected;
            });
          },
        ),

目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒

【x1】点击查看提示

【x2】各种系列的教程

【x3】Flutter文章积累目录


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

早起的年轻人

创作源于分享

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值