第三百八十八回

文章目录

  • 概念介绍
  • 使用方法
  • 示例代码

我们在上一章回中介绍了DateRangePickerDialog Widget相关的内容,本章回中将介绍Radio Widget.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

概念介绍

我们在这里说的Radio Widget是指单选按钮,没有选中时是圆形边框,边框和内容都是白色,选中时边框变成蓝色,中间用蓝色填充。当然了这个蓝色是默认的颜色,
可以通过主题颜色或者控制中的颜色属性进行修改。Flutter把单选按钮封装成了独立的组件,使用Radio类来表示该组件,本章回中将详细介绍它的使用的方法。

使用方法

和其它Widget一样,Radio组件也提供了相关的属性来操作自己,下面是一些常用的属性,掌握这些属性的用法后就可以熟练地使用Radio组件了:

  • value属性:表示按钮被选中时的值;
  • groupValue属性:表示按钮所有组的值;
  • onChanged属性:它是方法类型,按钮被按下时回调此方法;
  • activeColor属性:表示按钮被选中时的颜色,如果不修改默认为蓝色;
    上面的这几个属性中只有最后一个是可选属性,其它的属性都是必选属性。前两个属性看着容易理解,不过使用时容易犯错。当这两个属性的值相等时才能表示按钮被选中,
    否则按钮处于未选中状态。这两个属性的类型是泛型,因此它们的使用范围中比较广,给属性赋值时可以使用int等数字类型,也可以使用string类型,甚至时对象类型。
    常用的做法是在onChanged方法中修改groupValue属性的值让它和value值保持相等,进而达到选中单选按钮的目的。下面是示例代码:

示例代码

Radio _radio(index) {_checkState = index;return Radio(//这两个值相等时才会显示选中状态,这里用的是int类型value: _checkState,groupValue: _groupValue,onChanged: (v) {//v的值就是indexprint("value $v");setState(() {if (_checkState == _groupValue) {_groupValue = v + 1;} else {_groupValue = v;}},);},);
}

上面的代码只是核心代码,完整的代码可以查看Github中ex024文件中的内容。为了方便使用,我们把Radio组件封装到方法中,然后把该方法赋值给column组件的
children属性,多放几个这样的方法就形成了一个包含多个单选按钮的组,我们称其为单选按钮组,这也是常用的做法,同一组内的单选按钮是互斥的,也就是说一组
单选按钮中只能有一个按钮被选中。编译并且运行上面的程序,会看到一组的单选按钮,可以点击其中的任何一个按钮,被点击的按钮处于选中状态,没有被点击的按钮
处理未选中状态。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。
看官们,关于Radio Widget的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/728074.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue+SpringBoot打造超市账单管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统设计3.1 总体设计3.2 前端设计3.3 后端设计在这里插入图片描述 四、系统展示五、核心代码5.1 查询供应商5.2 查询商品5.3 新增超市账单5.4 编辑超市账单5.5 查询超市账单 六、免责说明 一、摘要 1.1 项目介绍 基于…

王道机试C++第 3 章 排序与查找:排序问题 Day28(含二分查找)

查找 查找是另一类必须掌握的基础算法,它不仅会在机试中直接考查,而且是其他某些算法的基础。之所以将查找和排序放在一起讲,是因为二者有较强的联系。排序的重要意义之一便是帮助人们更加方便地进行查找。如果不对数据进行排序,…

【uni-app小程序开发】实现一个背景色渐变的滑动条slider

最近做的一个用uni-app+vue2开发的微信小程序项目中要实现一个滑动进度控制条,如下图所示: 1. 滑动条需要渐变背景色 2. 滑块的背景色需要与当前位置滑动条的背景色一致(动态改变) 碰到这样的需求,我当然先是看看官方提供的slider组件和uView里的u-slider组件能不能满足…

Javaweb之Web后端开发总结的详细解析

4. Web后端开发总结 到此基于SpringBoot进行web后端开发的相关知识我们已经学习完毕了。下面我们一起针对这段web课程做一个总结。 我们来回顾一下关于web后端开发,我们都学习了哪些内容,以及每一块知识,具体是属于哪个框架的。 web后端开…

nyist_acm 个人积分赛1(部分题解会补充)

Mirrored String II 看到题解说是马拉车算法,我赛时并没想到(好吧其实我是比赛完才知道有马拉车这个算法) 因为字符串的长度只有1000,直接暴力跑其实就可以了,但是要注意的是;回文串有俩种形式&#xff0c…

1. Gin框架入门

文章目录 一、Gin框架介绍二、RESTful API三、Gin渲染1. HTML渲染2. 自定义模板函数3. 静态文件处理4. 使用模板继承5. 补充文件路径处理6. JSON渲染7. XML渲染8. YMAL渲染9. protobuf渲染 四、Gin获取各种方式传递过来的参数1、获取querystring参数2、获取form参数3、获取path…

Vue3实现页面跳转功能

目标: 首页: 点击About后: 第一步:安装 Vue Router和创建你先 npm install vue-router4第二步:在router.js中设置路由 import { createRouter, createWebHistory } from vue-router; import Home from ./views/Home…

如何写一份简单的产品说明书,教程奉上

如果你是一位新晋产品经理,或者正在研发新产品,并且心中惴惴不安因为未知的产品说明书制作环节,那么今天你就来对地方了。本篇文章将教你如何创建一份简单明了的产品说明书。让我们开始吧! 首先,明确产品说明书的目标。…

达梦数据库基础操作(二):表空间操作

达梦数据库基础操作(二):表空间操作 1. 表空间操作 1.1 达梦表空间介绍 表空间的概念: 每个DM 数据库都是由一个或者多个表空间组成,表空间是一个逻辑的存储容器,它位于逻辑结构的顶层,用于存储数据库中的所有数据&am…

【CSP试题回顾】201503-3-节日

CSP-201503-3-节日 关键点:格式化输出 在C中,格式化输出通常利用iostream库中的功能,特别是iomanip头文件提供的一系列操作符。这些操作符用于控制输出格式,如宽度、填充、对齐方式等。在你提供的代码中,用于格式化输…

基于Springboot+Layui餐厅点餐系统

一、项目背景 在互联网经济飞速发展的时代,网络化企业管理也在其带领下快速兴起,开发一款自主点餐系统会受到众多商家的青睐。现如今市场上的人力资源价格是非常高昂的,一款自主点餐系统可以减少餐厅的人力开销,将服务员从繁忙的…

RESTful接口规范参考

介绍 REST(Representational State Transfe),一种架构设计风格,而不是强制标准,主要用于客户端与服务端接口规范;在现代的软件开发中,RESTful API已经成为应用程序之间通信的重要桥梁&#xff…

电磁兼容EMC:单、双面板的均匀传输线

目录 1 传输线 2 均匀传输线 3 特征阻抗 4 应用案例 为何要讲单、双面板的均匀传输线?因为均匀传输线能保证信号质量,减少EMC问题,而单双面板没有完整的地和电源平面,很难实现均匀传输线的布线,所以更需要知道如何在…

08 |「Fragment 」

前言 实践是最好的学习方式,技术也如此。 文章目录 前言一、简介1、是什么2、为什么要有 Fragment3. Fragment 详细解释 二、Fragment 与 Activity 的直观理解三、Fragment 的创建1、Fragment 的创建方式2、Fragment 的增删替查1) 替换(常见&…

01背包问题 刷题笔记

思路 dp 用f[i][j]来表示当体积为j时 考虑前i件物品可以获得的 最大值 记住f[i][j]本身是个价“价值” 考虑两种状态 是否将第i件物品放入背包里面 将背包的体积从小到大递增来进行考虑 首先 考虑条件 如果当前增加的体积放不下下一件物品 则该体积 可以获得的最大值可以直接…

关于汽车E\E架构演进的思考(2)

目录 1.概述 2. 整车通信的限制 3 如何保证融合ECU的功能安全和信息安全 4.小结 1.概述 上篇文章主要聊了当前电子电气架构以及未来电子电气架构的特点,简述了即将要面临的挑战,下面我们继续讲述挑战。 2. 整车通信的限制 下一代架构主要以以太网…

Centos9环境部署MySQL的PXC

前期理解 pxc就是将多个mysql数据库整合为一个集群,每台服务器上的mysql数据库会实时同步,而且节点与节点之间,他们相互的关系是对等的。PXC 最关注的是数据的一致性,对待事物的行为时,要么在所有节点上执行&#xff…

爬虫(四)

1.图片验证码 import requestsres requests.get(https://www.gushiwen.cn/RandCode.ashx)with open("code.png", "wb") as f:f.write(res.content)2.打码平台 网址:http://www.ttshitu.com/,找到开发文档点击Python,没有钱了要用我…

Leetcode148 排序链表

排序链表 题解1 线性表题解2 自顶向下归并排序题解3 自底向上归并排序 给你链表的头结点 head ,请将其按 升序 排列并返回排序后的链表 。 题解1 线性表 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* L…

React-Redux简单使用

1.配置环境 1.1开启项目 npx create-react-app react-redux-pro 1.2安装配套工具 说明:安装Redux Toolkit和react-redux。Redux Toolkit(RTK)~官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式;react-redux-用来…