首页 > 其他分享 >基础组件:单选开关和复选框

基础组件:单选开关和复选框

时间:2024-08-23 14:27:34浏览次数:9  
标签:状态 Checkbox value 复选框 Switch 单选 组件 选中

一、简介

Material 组件库中提供了 Material 风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。当SwitchCheckbox被点击时,会触发它们的onChanged回调,我们可以在此回调中处理选中状态改变逻辑。下面看一个简单的例子:

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  @override
  _SwitchAndCheckBoxTestRouteState createState() => _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
  bool _switchSelected=true; //维护单选开关状态
  bool _checkboxSelected=true;//维护复选框状态
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
          value: _switchSelected,//当前状态
          onChanged:(value){
            //重新构建页面  
            setState(() {
              _switchSelected=value;
            });
          },
        ),
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, //选中时的颜色
          onChanged:(value){
            setState(() {
              _checkboxSelected=value;
            });
          } ,
        )
      ],
    );
  }
}

上面代码中,由于需要维护SwitchCheckbox的选中状态,所以SwitchAndCheckBoxTestRoute继承自StatefulWidget 。在其build方法中分别构建了一个SwitchCheckbox,初始状态都为选中状态,当用户点击时,会将状态置反,然后回调用setState()通知 Flutter 框架重新构建UI,效果如图3-17所示:

Flutter_checkBox_A.png


二、属性及外观

SwitchCheckbox属性比较简单,读者可以查看API文档,它们都有一个activeColor属性,用于设置激活态的颜色。至于大小,到目前为止,Checkbox的大小是固定的,无法自定义,而Switch只能定义宽度,高度也是固定的。值得一提的是Checkbox有一个属性tristate ,表示是否为三态,其默认值为false ,这时 Checkbox 有两种状态即“选中”和“不选中”,对应的 value 值为truefalse ;如果tristate值为true时,value 的值会增加一个状态null,读者可以自行测试。

三、注意

通过SwitchCheckbox我们可以看到,虽然它们本身是与状态(是否选中)关联的,但它们却不是自己来维护状态,而是需要父组件来管理状态,然后当用户点击时,再通过事件通知给父组件,这样是合理的,因为SwitchCheckbox是否选中本就和用户数据关联,而这些用户数据也不可能是它们的私有状态。我们在自定义组件时也应该思考一下哪种状态的管理方式最为合理。


通过SwitchCheckbox我们可以看到,虽然它们本身是与状态(是否选中)关联的,但它们却不是自己来维护状态,而是需要父组件来管理状态,然后当用户点击时,再通过事件通知给父组件,这样是合理的,因为SwitchCheckbox是否选中本就和用户数据关联,而这些用户数据也不可能是它们的私有状态。我们在自定义组件时也应该思考一下哪种状态的管理方式最为合理。

标签:状态,Checkbox,value,复选框,Switch,单选,组件,选中
From: https://www.cnblogs.com/linuxAndMcu/p/18375918

相关文章

  • Flutter 自定义日期范围选择组件,使用更加灵活,满足UI设计需要
    一、实现的效果图二、虽然Flutter也为我们提供了日期范围选择组件showDateRangePicker,但是毕竟系统的UI不符合我们的设计风格,所以被迫只能自己实现一个了系统样式三、日历整体实现逻辑其实也很简单,如下:首先获取每个月份具体有多少天int_getMonthDays(DateTimetim......
  • K8S基本概念和组件
    特点便携性无论公有云、私有云、混合云还是多云架构都全面支持可扩展模块化、可插拔、可挂载、可组合,支持各种形式的扩展自修复自保持应用状态、自重启、自复制、自缩放,声明式语法组件etcd保存整个集群状态,充当数据库角色,只与APIServer通讯apiserve......
  • 基础组件:图片
    Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvider,如AssetImage是实现了从Asset中加载图片的I......
  • 基础组件:按钮
    Material组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlinedButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面......
  • 实战:软件架构系列之【早期微服务架构Spring Cloud Netflix中的5大组件示例】
    概叙科普文:万字细说微服务及其框架Netflix,SpringCloud,SpringCloudAlibaba梳理_微服务netflixalibaba-CSDN博客科普文:微服务之技术选型SpringCloudAlibaba_微服务架构图阿里巴巴-CSDN博客SpringCloudNetflix是SpringCloud生态系统中最早期的一个子项目,它为Spr......
  • 基础组件:文本及样式
    一、TextText用于显示简单样式文本,它包含一些控制文本显示样式的一些属性,一个简单的例子如下:Text("Helloworld",textAlign:TextAlign.left,);Text("Helloworld!I'mJack."*4,maxLines:1,overflow:TextOverflow.ellipsis,);Text("He......
  • 探索HarmonyOS中的列表组件及其自定义特性
    在现代移动应用中,List组件是数据列表的关键元素。HarmonyOS中的List组件不仅具备传统的列表功能,还提供了丰富的自定义选项,允许开发者根据需求灵活调整列表的行为和外观展示。本文将探讨HarmonyOS中列举组件的自定义特性,包括自定义项布局、动态加载数据、多列布局、拖拽排序......
  • Tree组件的快速定位更新节点的状态,以及修改节点的数据属性等操作
    当我们点击树节点的时候我们常常只能获得树的id,那么我么如何获快速定位到树节点的内容呢,除此之外,当树已经存在时,但是缺少我们想要的内容时,我们想在树节点上添加我们需要的额外的内容时该怎么办,那么就是用以下方法可以快速定位到我们需要的节点并可以快速添加内容/***@params*......
  • antd5版本修改Table组件滚动条样式
    因为项目需求,要将Table组件的样式修改为UI图所给的效果,但是怎么写都不生效最后发现在 .ant-table的样式中设了scrollbar-color,只要把这里的样式设为scrollbar-color:auto;然后再改.ant-table-body里面滚动条的样式,就可以了.ant-table-body{&::-w......
  • 为什么用Vite框架?来看它的核心组件案例详解
    Vite是一个前端构建工具,它以其快速的开发服务器和生产优化的打包器而闻名前端界,今天的内容,必须得唠唠Vite的关键能力,以下是Vite的核心组件分析,以及使用案例:原理分析:Vite利用了现代浏览器对ESModule语法的支持,在开发环境中不进行打包编译,而是通过启动本地devServer......