第一百七十二回 SegmentedButton组件

文章目录

  • 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,一个可以进行单选操作,另外一个可以进行多选操作,下面是示例程序的运行效果图,请大家参考。

在这里插入图片描述

效果图中按钮上面的文字就是label属性的值,未选择的按钮图标是icon属性的值,按钮被选择后会改变颜色,可以通过style属性控制,同时按钮的图标显示一个对号,该对号覆盖了按钮原料的图标。

4. 内容总结

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

  • SegmentedButton表示一组按钮,可以单选或者多选组内的按钮;
  • SegmentedButton组件需要和ButtonSegment组件一起配合使用;
  • SegmentedButton组件的selected属性是集合类型,使用时需要注意;
  • SegmentedButton组件实现了单选和多选按钮的功能,可以看作是这两种按钮的综合体;

看官们,与"SegmentedButton组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【C++】类和对象(4)--析构函数

一 概念 通过前面构造函数的学习&#xff0c;我们知道一个对象是怎么来的&#xff0c;那一个对象又是怎么没呢的&#xff1f; 析构函数&#xff1a;与构造函数功能相反&#xff0c;析构函数不是完成对对象本身的销毁&#xff0c;局部对象销毁工作是由编译器完成的。而对象在销…

数据库操作入门:PyMongo 和 MongoDB 的基本用法

MongoDB MongoDB是一种流行的NoSQL数据库&#xff0c;它将数据存储在类似JSON的文档中&#xff0c;使数据库非常灵活和可扩展 PyMongo Python需要一个MongoDB驱动程序来访问MongoDB数据库。在本教程中&#xff0c;我们将使用MongoDB驱动程序 “PyMongo”。建议使用PIP来安装…

清理mac苹果电脑磁盘软件有哪些免费实用的?

苹果电脑是一款非常流行的操作系统设备&#xff0c;其稳定性和性能一直备受用户的喜爱。然而&#xff0c;随着时间的推移&#xff0c;我们使用电脑的过程中可能会发现磁盘上存储的数据越来越多&#xff0c;这不仅占用了宝贵的硬盘空间&#xff0c;还可能导致电脑运行变慢。因此…

GreenCloud VPS 重装系统后无法 SSH 的解决方法

发布于 2023-07-17 在 https://chenhaotian.top/vps/greencloud-ssh-fix/ 解决方法 发工单让客服解决即可。 操作过程 Tu Pham Operator 客服 Hello, We have fixed your problem, please try again! Thanks! Tu Pham, Senior Technician - GreenCloudVPS 17th July 2023…

Java Stream 的使用

Java Stream 的使用 开始中间操作forEach 遍历map 映射flatMap 平铺filter 过滤limit 限制sorted 排序distinct 去重 结束操作collect 收集toList、toSet 和 toMapCollectors.groupingByCollectors.collectingAndThen metch 匹配find 查询findFirst 与 findAny 的使用Optional …

Ubuntu 和 Windows 文件互传

FTP 服务 FTP 采用 Internet 标准文件传输协议 FTP 的用户界面&#xff0c; 向用户提供了一组用来管理计算机之间文件传输的应用程序。在开发的过程中会频繁的在 Windows 和 Ubuntu 下进行文件传输&#xff0c;比如在 Windwos 下进行代码编写&#xff0c;然后将编写好的代码拿到…

计算机操作系统—经典同步问题

经典同步问题 1.生产者与消费者问题 1.1.问题概述 在现实生活中&#xff0c;当我们缺少某些生活用品时&#xff0c;就会到超市去购买。当你到超市时&#xff0c;你的身份就是消费者&#xff0c;那么这些商品又是哪里来的呢&#xff0c;自然是供应商&#xff0c;那么它们就是生…

Java 入门基础题

目录 1.输出一个整数的每一位 2.判定素数 3.求最大值方法的重载 4.输出闰年 5.打印 X 图形 6.数字9 出现的次数 7.计算分数的值 8. 模拟登陆 9.使用函数求最大值 10.斐波那契数列 星光不负赶路人&#xff0c;加油铁子们&#xff01;&#xff01;&#xff01; 1…

【开源】基于Vue.js的快递管理系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 数据中心模块2.2 快递类型模块2.3 快递区域模块2.4 快递货架模块2.5 快递档案模块 三、界面展示3.1 登录注册3.2 快递类型3.3 快递区域3.4 快递货架3.5 快递档案3.6 系统基础模块 四、免责说明 一、摘要 1.1 项目介绍 …

docker入门,这一篇就够了。

Docker入门&#xff0c;这一篇就够了。 Docker容器虚拟化平台。 前言 接触docker很长时间了&#xff0c;但是工作中也没有用到&#xff0c;所以总是学了忘&#xff0c;忘了学。不过这次&#xff0c;我打算跟大家分享一下我的学习历程&#xff0c;也算是我的独特的复习笔记&…

Easymesh前言介绍

1.什么是Easymesh 什么是Easymesh&#xff0c;这里需要介绍到有3个点&#xff0c;分别是WFA、MAP和Easymesh认证。 WFA是Wi-Fi 联盟&#xff0c;Wi-Fi 联盟是专门针对 Wi-Fi 主题的标准创建机构&#xff0c;并且制定新标准&#xff0c;在 Wi-Fi 基础上提供可用功能&#xff0c…

Windows conan环境搭建

Windows conan环境搭建 1 安装conan1.1 安装依赖软件1.1.1 python安装1.1.2 git bash安装1.1.3 安装Visual Studio Community 20191.1.3.1 选择安装的组件1.1.3.2 选择要支持的工具以及对应的SDK 1.1.4 vscode安装 1.3 验证conan功能1.4 查看conancenter是否包含poco包1.5 查看…

Linux shell编程学习笔记25:tty

1 tty的由来 在 1830 年代和 1840 年代&#xff0c;开发了称为电传打字机&#xff08;teletypewriters&#xff09;的机器&#xff0c;这些机器可以将发件人在键盘上输入的消息“沿着线路”发送在接收端并打印在纸上。 电传打字机的名称由teletypewriters&#xff0c; 缩短为…

程序员月入过万的秘密,赶快收藏史上最靠谱接单攻略!!!

近几年经济十分不景气&#xff0c;无论是哪一行总是面临着生活的不容易。不少人都选择多干几份工作来养家糊口&#xff0c;保证家人的生活。那么咱们程序员该如何是好呢&#xff1f;相信不少人已经有了答案&#xff0c;那就是网上接单&#xff01;那么本期就让小编带你一起来看…

论文阅读:Robust High-Resolution Video Matting with Temporal Guidance

发表时间&#xff1a;2021年8月25日 项目地址&#xff1a;https://peterl1n.github.io/RobustVideoMatting/ 论文地址&#xff1a;https://arxiv.org/pdf/2108.11515.pdf 我们介绍了一种鲁棒的&#xff0c;实时的&#xff0c;高分辨率的人体视频匹配方法&#xff0c;以实现了新…

No205.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

【C++】类与对象 I

类与对象 I &#xff1a; 前言&#xff1a;&#xff08;C&#xff09;面向过程 和&#xff08;C&#xff09;面向对象 初步认识前言&#xff1a;类的引入一、类的介绍二、类的定义&#xff08;一&#xff09;class 语法&#xff08;二&#xff09;类的两种定义方式&#xff1a;…

【Qt之QWizard】使用1

QWizard使用 描述方法枚举&#xff1a;enum QWizard::WizardButton枚举&#xff1a;enum QWizard::WizardOption枚举&#xff1a;enum QWizard::WizardStyle枚举&#xff1a;enum QWizard::WizardPixmap常用成员方法槽函数信号 示例设置标题添加page页设置按钮文本设置自定义按…

IntelliJ IDEA cmd和idea Terminal查看java版本不一致

参考&#xff1a;IntelliJ IDEA cmd和idea Terminal查看java版本不一致的解决方案 1、idea清缓存重启 没用 2、删除缓存文件 没试 3、修改环境变量的顺序 没试 4、重启电脑 麻烦&#xff0c;没试 5、项目配置jdk7 没试 按照这个url配置了一个遍 https://blog.csdn…

【电路笔记】-诺顿定理(Norton‘s Theorem)

诺顿定理&#xff08;Norton’s Theorem&#xff09; 文章目录 诺顿定理&#xff08;Nortons Theorem&#xff09;1、概述与定义2、诺顿模型确定3、一些线性电路的诺顿模型3.1 单电压源3.2 单电流源3.3 多电流/电压源 5、总结 本文是我们上一篇有关戴维南定理的文章的延续。 在…