前言

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

实例

// 单选框和复选框

import 'package:flutter/material.dart';

class SwitchCheckboxRoute extends StatefulWidget {
@override
_SwitchCheckboxRouteState createState() => _SwitchCheckboxRouteState();
} class _SwitchCheckboxRouteState extends State<SwitchCheckboxRoute> {
// 维护单选状态
bool _switchSelected = true;
// 维护复选状态
bool _checkboxSelected = true; @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('单选框 复选框'),
),
body: Container(
child: Column(
children: <Widget>[ // 单选框
Switch(
// 当前状态
value: _switchSelected,
onChanged: (value){
// 重新构建页面
setState(() {
_switchSelected = value;
});
},
), // 复选框
Checkbox(
value: _checkboxSelected,
onChanged: (value) {
setState(() {
_checkboxSelected = value;
});
},
),
],
),
),
);
} }

总结

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

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

Flutter 基础组件:单选框和复选框的更多相关文章

  1. CSS学习笔记三:自定义单选框,复选框,开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  2. 自动化测试-15.selenium单选框与复选框状态判断

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  3. 2.12 单选框和复选框(radiobox、checkbox)

    2.12 单选框和复选框(radiobox.checkbox) 本篇主要介绍单选框和复选框的操作一.认识单选框和复选框    1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是 ...

  4. Selenium2学习(十五)-- 单选框和复选框(radiobox、checkbox)

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  5. 微信小程序-修改单选框和复选框大小的方法

    方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...

  6. HTML--使用单选框、复选框,让用户选择

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看 ...

  7. Selenium3+python自动化 单选框和复选框

    一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了,可以先抽他了. 二.radio和 ...

  8. jQuery获取单选框(复选框)选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

  9. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

随机推荐

  1. Python3中zipfile模块文件名乱码问题

    inux下zip文件乱码已经是一个常见问题了,再加上python想不遇到乱码问题都难. 在zipfile.ZipFile中获得的filename有中日文则很大可能是乱码,这是因为 在zip标准中,对文 ...

  2. STL——容器(Map & multimap)的删除

    Map & multimap 的删除 map.clear();           //删除所有元素 map.erase(pos);      //删除pos迭代器所指的元素,返回下一个元素的 ...

  3. vue单页面应用刷新网页后vuex的state数据丢失的解决办法

    第一种方案 首先将数据保存在vuex的store中,同时将这些信息也保存在sessionStorage中.这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vue ...

  4. 初始Node

    node是什么? ​ 一句话: 服务器 什么是服务器: ​ 一句话: 客户端访问 并且能够响应 为什么: ​ 一句话: 执行效率高 #安装 #控制台 切换磁盘: e: 改变目录: cd 目录 cd.. ...

  5. 最新 obs-studio vs2019 开发环境搭建 代码编译

    距离上一篇文章很久了,重新开始记录 OBS 开发相关情况,第一步就是环境搭建,第二步是构建 OBS-Studio VS 2019 开发环境搭建 下载软件和资源 软件安装没有特别说明的,下载安装即可. ...

  6. LightningChart解决方案:XY和3D图表(Polymer Char GPC-IR&#174;-工程案例)

    LightningChart解决方案:XY和3D图表(Polymer Char GPC-IR-工程案例) 所在行业:石化公司成立时间:1992年LightningChart解决方案:XY和3D图表 P ...

  7. Centos7.3 离线环境下修改时间

    运行以下命令 1.tzselect --命令确定时区 2.timedatectl set-timezone Asia/Shanghai  --设置系统时区为上海 3.timedatectl set-n ...

  8. 3.自定义view-TextView变色

    1.效果 2.实现原理 自定义Textview,重写onDraw方法,将画布分成两部分,用不同颜色的画笔画 核心代码: @Override protected void onDraw(Canvas c ...

  9. java电脑环境变量配置

    ANT_HOME    D:\apache-ant-1.9.11CLASSPATH       %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib;%JAVA_HOME%\l ...

  10. 多维数组遍历.php

    $a=array('fruits'=>array('a'=>'orange','b'=>'grape','c'=>'apple'),     'numbers'=>arr ...