第四百九十二回

文章目录

  • 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.hqwc.cn/news/671122.html

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

相关文章

零基础怎么学鸿蒙开发?

对于零基础的学习者来说&#xff0c;掌握鸿蒙开发不仅是迈向新技术的第一步&#xff0c;更是开拓职业道路的重要机遇。随着鸿蒙系统在各行各业的应用逐渐扩展&#xff0c;对于掌握这一项技术的开发人员需求也随之增长。下文将为大家提供针对零基础学习鸿蒙开发的逻辑&#xff0…

超分辨率重建——BSRN网络训练自己数据集并推理测试(详细图文教程)

目录 一、BSRN网络总结二、源码包准备三、环境准备3.1 报错KeyError: "No object named BSRN found in arch registry!"3.2 安装basicsr源码包3.3 参考环境 四、数据集准备五、训练5.1 配置文件参数修改5.2 启动训练5.2.1 命令方式训练5.2.2 配置Configuration方式训…

基于Springboot的校园志愿者管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的校园志愿者管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结…

【Kaggle】练习赛《洪水数据集的回归预测》(下)

前言 上篇《洪水数据集的回归预测》(上) 介绍了该数据集非常特殊之处&#xff0c;各特征都非常类似&#xff0c;没有特别之处&#xff0c;各特征之间的相关系数几乎为零。同时&#xff0c;各类模型不敏感&#xff0c;最理想的模型居然是线性回归&#xff0c;决定系数 R 2 R^2 …

Spring+SpringMVC+Jsp实现校园二手交易系统

前言介绍 在社会快速发展的影响下&#xff0c;使校园二手交易系统的管理和运营比过去十年更加理性化。依照这一现实为基础&#xff0c;设计一个快捷而又方便的网上校园二手交易系统是一项十分重要并且有价值的事情。对于传统的管理控制模型来说&#xff0c;网上校园二手交易系…

生产管理驾驶舱模板分享,制造业都来抄作业!

今天要讲的是一张从组织、生产车间、物料、仓库、时间等不同维度&#xff0c;展示产能、产量、投入成本、产能达成率等关键信息&#xff0c;让企业运营决策者全面了解生产产能情况、产量情况、投入成本情况、产能达成率情况的BI生产管理驾驶舱模板。这是奥威BI标准方案为设有生…

自编码器网络

1.自编码器网络 自动编码器是一种无监督的数据维度压缩和数据特征表达方法。 无监督 在海量数据的场景下&#xff0c;使用无监督的学习方法比有监督的学习方法更省力。 维度上的压缩 自编码网络可以根据输入的数据&#xff0c;对其进行表征学习。输入数据转换到隐藏层co…

GreptimeDB 助力国家电网数字换流站打造稳定高效的时序数据底座

电网体系作为现代社会运行的支柱之一&#xff0c;为各行各业、千家万户提供了电能的基本支持。从家庭到企业&#xff0c;医院到学校&#xff0c;交通到通讯&#xff0c;电力电网的应用贯穿始终。近年来&#xff0c;特高压换流站成为国家电网的重点建设工程&#xff0c;“十四五…

Maria DB 安装(含客户端),看这一篇就够了

文章目录 一 安装前准备1 版本与Win平台对应2 推荐安装 二 安装步骤1 安装主体程序2 添加系统路径Path 三 客户端 一 安装前准备 1 版本与Win平台对应 版本对应关系可参考&#xff1a; https://www.codebye.com/mariadb-deprecated-package-platforms.html。 2 推荐安装 经…

Stable Diffusion学习记录

文章目录 前言电脑配置推荐环境搭建下载地址安装步骤步骤一&#xff0c;打开下载的秋叶整合包&#xff0c;路径秋叶整合包/sd-wenui-aki步骤二&#xff0c;打开下载好的sd-webui-aki-v4.8.7解压包 Stable Diffusion软件配置&#xff0c;插件安装&#xff0c;模型下载Stable Dif…

LeetCode406:根据身高重建队列

题目描述 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &#xff0c;前面 正好 有 ki 个身高大于或等于 hi 的人。 请你重新构造并返回输入数…

【高校科研前沿】中国科学院地理资源所钟帅副研究员研究组博士生朱屹东为一作在Top期刊发文:从潜力到利用:探索西藏风能资源开发的技术路径优化布局

01 文章简介 论文名称&#xff1a;From potential to utilization: Exploring the optimal layout with the technical path of wind resource development in Tibet&#xff08;从潜力到利用:探索西藏风能资源开发的技术路径优化布局&#xff09; 文章发表期刊&#xff1a;《…