第四百九十二回

文章目录

  • 1. 概念介绍
  • 2. 使用方法
    • 2.1 SegmentedButton
    • 2.2 ButtonSegment
  • 3. 代码与效果
    • 3.1 示例代码
    • 3.2 运行效果
  • 4. 内容总结

我们在上一章回中介绍了"SearchBar组件"相关的内容,本章回中将介绍SegmentedButton组件.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中介绍的SegmentedButton组件是一种分段式按钮,它把多个按钮连接成一组显示,组内再对不同的按钮进行分段显示。这种按钮类型我们以前介绍的单
选按钮和多选按钮,它会把多个按钮进行统一分组管理。SegmentedButton是Material3引入的新组件,我们将在本章回中详细介绍它的使用方法。

2. 使用方法

在Flutter中,SegmentedButton组件不能单独使用,它还需要配合ButtonSegment组件一起使用,类似NavigationBar和NavigationDestination配合使用
一样。接下来我们分别介绍这两种组件。

2.1 SegmentedButton

和其它组件一样,SegmentedButton组件提供了相关的属性来控制自己,下面是常用的属性:

  • segments属性:主要用来存放按钮,它可以存放多个按钮;
  • selected属性:主要用来控制哪一个按钮被选择,该属性的类型是集合类型;
  • onSelectionChanged属性:它是方法类型,选择任意一个按钮时回调该方法;
  • multiSelectionEnabled属性:用来控制是否可以同时选择多个按钮,默认值为false;
  • emptySelectionAllowed属性:用来控制是否可以不选择任意一个按钮;
  • style属性:用来修改按钮的形状和颜色,和其它按钮中的style属性用法相同;
  • selectedIcon属性:用来控制按钮被选择时的图标,默认图标是一个对号,它会覆盖按钮自身的图标;
    上面介绍的这些属性中,前两个属性是必选属性,其它属性都是可选属性。

2.2 ButtonSegment

和其它组件一样,ButtonSegment组件提供了相关的属性来控制自己,下面是常用的属性:

  • value属性:表示按钮的值,类似ID,用来区分不同的按钮;
  • icon属性:表示按钮的图标,当前按钮被选择时,它会被selectedIcon中的图标覆盖掉;
  • label属性:表示按钮上显示的文本,用来说明按钮的功能;
    上面介绍的这些属性中,第一个属性是必选属性,其它属性都是可选属性。当value属性的值与SegmentedButton中selected属性的值相等时,表示当前的按钮被选
    中了。该组件主要用来给SegmentedButton的segments属性赋值,稍后我们将通过示例代码来演示。

3. 代码与效果

3.1 示例代码

Set<int> selectedSet = {2};enum Numbers {one,two,three,four}
Set<Numbers> multiSelectedSet = {Numbers.two,Numbers.three};SegmentedButton(segments: const [ButtonSegment( label: Text("one"), icon: Icon(Icons.add), value: 1,),ButtonSegment( label: Text("tow"), icon: Icon(Icons.favorite), value: 2,),ButtonSegment( label: Text("three"), icon: Icon(Icons.do_not_disturb), value: 3,),],selected: selectedSet,onSelectionChanged: (Set<int>newSelection){debugPrint("changed $newSelection");setState(() {selectedSet = newSelection;});},
),SegmentedButton(segments: const [ButtonSegment( label: Text("one"), icon: Icon(Icons.add), value: Numbers.one,),ButtonSegment( label: Text("tow"), icon: Icon(Icons.favorite), value: Numbers.two,),ButtonSegment( label: Text("three"), icon: Icon(Icons.do_not_disturb), value: Numbers.three,),ButtonSegment( label: Text("three"), icon: Icon(Icons.do_not_disturb), value: Numbers.four,),],multiSelectionEnabled: true,selected: multiSelectedSet,///点击时切换按钮,如果是已经选择的就变成未选择onSelectionChanged: (Set<Numbers> newSelected) {debugPrint("changed $newSelected");setState(() {multiSelectedSet = newSelected;});},
)

上面的示例代码中演示了前面小节中介绍的各种属性,还有一些细节需要注意:代码中selected的类型和onSelectionChanged中参数的类型相同,都是Set<T>
型,这个T表示泛型,它需要和ButtonSegment中的value属性的类型相同。这样才能表示按钮被选择。代码中的T分别是int和枚举类型。

3.2 运行效果

上面的示例代码中演示了两个SegmentedButton,一个可以进行单选操作,另外一个可以进行多选操作,下面是示例程序的运行效果图,请大家参考。 020.png
效果图中按钮上面的文字就是label属性的值,未选择的按钮图标是icon属性的值,按钮被选择后会改变颜色,可以通过style属性控制,同时按钮的图标显示一个对号,
该对号覆盖了按钮原料的图标。

4. 内容总结

最后,我们对本章回的内容进行全面的总结:

  • SegmentedButton表示一组按钮,可以单选或者多选组内的按钮;
  • SegmentedButton组件需要和ButtonSegment组件一起配合使用;
  • SegmentedButton组件的selected属性是集合类型,使用时需要注意;
  • SegmentedButton组件实现了单选和多选按钮的功能,可以看作是这两种按钮的综合体;
    看官们,与"SegmentedButton组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

Qt扫盲-Qt D-Bus概述

Qt D-Bus概述 一、概述二、总线三、相关概念1. 消息2. 服务名称3. 对象的路径4. 接口5. 备忘单 四、调试五、使用Qt D-Bus 适配器1. 在 D-Bus 适配器中声明槽函数1. 异步槽2. 只输入槽3. 输入输出槽4. 自动回复5. 延迟回复 一、概述 D-Bus是一种进程间通信(IPC)和远程过程调用…

分布式与一致性协议之ZAB协议(四)

ZAB协议 ZooKeeper是如何选举领导者的。 首先我们来看看ZooKeeper是如何实现成员身份的&#xff1f; 在ZooKeeper中&#xff0c;成员状态是在QuorumPeer.java中实现的&#xff0c;为枚举型变量 public enum ServerState { LOOKING, FOLLOWING, LEADING, OBSERVING }其实&…

【JAVA入门】Day03 - 数组

【JAVA入门】Day03 - 数组 文章目录 【JAVA入门】Day03 - 数组一、数组的概念二、数组的定义2.1 数组的静态初始化2.2 数组的地址值2.3 数组元素的访问2.4 数组遍历2.5 数组的动态初始化2.6 数组的常见操作2.7 数组的内存分配2.7.1 Java内存分配2.7.2 数组的内存图 一、数组的概…

【数据结构】--- 深入剖析二叉树(中篇)--- 认识堆堆排序Topk

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 数据结构之旅 文章目录 &#x1f3e0; 初识堆 &#x1f4d2; 堆的概念 &#x1f4d2; 堆的性质 &#x1f3e0; 向上调整算法 && 向下调整算…

【云原生】Pod 的生命周期(一)

【云原生】Pod 的生命周期&#xff08;一&#xff09;【云原生】Pod 的生命周期&#xff08;二&#xff09; Pod 的生命周期&#xff08;一&#xff09; 1.Pod 生命期2.Pod 阶段3.容器状态3.1 Waiting &#xff08;等待&#xff09;3.2 Running&#xff08;运行中&#xff09;3…

《Python编程从入门到实践》day20

#尝试在python3.11文件夹和pycharm中site-packages文件夹中安装&#xff0c;最终在scripts文件夹中新建py文件成功导入pygame运行程序 #今日知识点学习 import sysimport pygameclass AlienInvasion:"""管理游戏资源和行为的类"""def __init__(…

memory consistency

memory consistency model 定义了对于programmer和implementor来说&#xff0c;访问shared memory system的行为&#xff1b; 对于programmer而言&#xff0c;他知道期望值是什么&#xff0c; 知道会返回什么样的数据&#xff1b;&#xff1b; 对于implementro而言&#xff0c;…

微信小程序原生代码实现小鱼早晚安打卡小程序

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 小鱼早晚安打卡小程序&#xff1a;开启健康生活&#xff0c;共享正能量 在这个快节奏的时代&#xff0c;我们常常被各种琐事和压力所困扰&#xff0c;以至于忽略了对健康生活方式的追求。然…

【探秘地球宝藏】矿产资源知多少?

当我们仰望高楼林立的城市&#xff0c;乘坐便捷的交通工具&#xff0c;享受各种现代生活的便利时&#xff0c;你是否曾想过这一切背后的支撑力量&#xff1f;答案就藏在我们脚下——矿产资源&#xff0c;这些大自然赋予的宝贵财富&#xff0c;正是现代社会发展的基石。今天&…

OpenHarmony 实战开发——ABI

OpenHarmony系统支持丰富的设备形态&#xff0c;支持多种架构指令集&#xff0c;支持多种操作系统内核&#xff1b;为了应用在各种OpenHarmony设备上的兼容性&#xff0c;本文定义了"OHOS" ABI&#xff08;Application Binary Interface&#xff09;的基础标准&#…

idea中取消自动导包顺序

1、取消自动导入 2、取消导包顺序设置

Python学习笔记------处理数据和生成折线图

给定数据&#xff1a; jsonp_1629344292311_69436({"status":0,"msg":"success","data":[{"name":"美国","trend":{"updateDate":["2.22","2.23","2.24",&qu…

奶爸预备 |《P.E.T.父母效能训练:让亲子沟通如此高效而简单:21世纪版》 / 托马斯·戈登——读书笔记

目录 引出致中国读者译序前言第1章 父母总是被指责&#xff0c;而非受训练第2章 父母是人&#xff0c;不是神第3章 如何听&#xff0c;孩子才会说&#xff1a;接纳性语言第4章 让积极倾听发挥作用第5章 如何倾听不会说话的婴幼儿第6章 如何听&#xff0c;孩子才肯听第8章 通过改…

保研面试408复习 3——操作系统

文章目录 1、操作系统一、进程有哪几种状态&#xff0c;状态之间的转换、二、调度策略a.处理机调度分为三级&#xff1a;b.调度算法 标记文字记忆&#xff0c;加粗文字注意&#xff0c;普通文字理解。 为什么越写越少&#xff1f; 问就是在打瓦。(bushi) 1、操作系统 一、进程…

设计模式Java实现-建造者模式

楔子 小七在2019年的时候&#xff0c;就想写一个关于设计模式的专栏&#xff0c;但是最终却半途而废了。粗略一想&#xff0c;如果做完一件事要100分钟&#xff0c;小七用3分钟热情做的事&#xff0c;最少也能完成10件事情了。所以这一次&#xff0c;一定要把他做完&#xff0…

Windows常用快捷键与CMD常用命令

1.win系列快捷键使用 WinD&#xff0c;快速进入桌面 WinE&#xff0c;打开我的电脑&#xff08;文件资源管理器&#xff09; WinI&#xff0c;打开设置界面 WinL&#xff0c;快速锁屏 WinM&#xff0c;最小化所有窗口 WinShiftM&#xff0c;还原最小化的窗口 WinV&#…

为什么下载卡在idealTree:NodeJS: sill idealTree buildDeps

可能使用的是npm config set registry https://registry.npm.taobao.org而这个镜像文件已经过期了 解决方法如下&#xff1a; 先使用 npm cache clean --force 清除缓存 再切换镜像源 再使用npm config get registry 进行查看是否换源成功 再使用 npm install -g vue/cli 就…

【算法】滑动窗口——长度最小的子数组

本篇文章是用一个实例来介绍常用算法之一“滑动窗口”的相关概念&#xff0c;有需要借鉴即可。 目录 1.题目2.暴力求解2.1暴力求解思路&#xff1a;2.2时间复杂度是多少&#xff1f; 3.暴力求解的优化3.1固定left的情况下&#xff0c;优化right的次数。3.2sum求值优化3.3不同组…

商城数据库88张表结构完整示意图81~88及总览图(十六)

八十一&#xff1a; 八十二&#xff1a; 八十三&#xff1a; 八十四&#xff1a; 八十五&#xff1a; 八十六&#xff1a; 八十七&#xff1a; 八十八&#xff1a; 总览图&#xff1a;

Redis开源社区持续壮大,华为云为Valkey项目注入新的活力

背景 今年3月21日&#xff0c;Redis Labs宣布从Redis 7.4版本开始&#xff0c;将原先比较宽松的BSD源码使用协议修改为RSAv2和SSPLv1协议&#xff0c;意味着 Redis在OSI&#xff08;开放源代码促进会&#xff09;定义下不再是严格的开源产品。Redis官方表示&#xff0c;开发者…