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文章积累目录


早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页