Flutter笔记:Widgets Easier组件库(4)使用按钮组

2024-05-01 20:44

本文主要是介绍Flutter笔记:Widgets Easier组件库(4)使用按钮组,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Flutter笔记
Widgets Easier组件库(4):使用按钮组

- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSitehttp://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138342846
HuaWei:https://bbs.huaweicloud.com/blogs/426721

组件库地址

  • Pub.Dev:https://pub.dev/packages/widgets_easier
  • GitHub:https://github.com/jacklee1995/widgets_easier

【介绍】:本文介绍Flutter Widgets Easier组件库中按钮组的使用方法。

flutter-ljc


上一节:《 Widgets Easier组件库(3)使用按钮 | 下一节:《 Widgets Easier组件库(5)使用加减器


1. 概述

1.1 关于Widgets Easier

本库是一个 Flutter 组件库,旨在提供用于Flutter开发的组件,使得开发者能够更简单地构建出更丰富地界面效果。项目地址为:

  • https://github.com/jacklee1995/widgets_easier

  • https://pub.dev/packages/widgets_easier

1.2 模块安装

在你的Flutter项目中,运行下面的命令:

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

2. 基本用法

Widgets Easier组件库中的按钮组是多个SemanticButton的集合,他们具有统一的语义,并且以紧密的方式进行排列。

2.1 在ButtonGroup中组合SemanticButton

ButtonGroup(buttons: [SemanticButton(text: 'Button 1', onTap: () => print('Button 1 pressed')),SemanticButton(text: 'Button 2', onTap: () => print('Button 2 pressed')),SemanticButton(text: 'Button 3', onTap: () => print('Button 3 pressed')),SemanticButton(text: 'Button 4', onTap: () => print('Button 4 pressed')),],type: SemanticEnum.primary,size: SizeEnum.defaultSize,
)

其中,ButtonGroup的每一个按钮的事件回调函数是在 SemanticButtononTap属性上直接指定的。与之类似的是单个按钮的文本,是通过每一个SemanticButtontext参数直接指定。

2.2 使用语义类型

类似于SemanticButton,你也可以为ButtonGroup指定不同的type属性获得具有不同含义颜色象征的按钮组。例如:

ButtonGroup(buttons: [SemanticButton(text: 'primary But1',onTap: () => print('primary But1 pressed')),SemanticButton(text: 'primary But2',onTap: () => print('primary But2 pressed')),],type: SemanticEnum.primary,
),
const Gap(20),
ButtonGroup(buttons: [SemanticButton(text: 'secondary But1',onTap: () => print('secondary But1 pressed')),SemanticButton(text: 'secondary But2',onTap: () => print('secondary But2 pressed')),],type: SemanticEnum.secondary,
),
const Gap(20),
ButtonGroup(buttons: [SemanticButton(text: 'info But1', onTap: () => print('info But1 pressed')),SemanticButton(text: 'info But2', onTap: () => print('info But2 pressed')),],type: SemanticEnum.info,
),
const Gap(20),
ButtonGroup(buttons: [SemanticButton(text: 'warning But1',onTap: () => print('warning But1 pressed')),SemanticButton(text: 'warning But2',onTap: () => print('warning But2 pressed')),],type: SemanticEnum.success,
),
const Gap(20),
ButtonGroup(buttons: [SemanticButton(text: 'warning But1',onTap: () => print('warning But1 pressed')),SemanticButton(text: 'warning But2',onTap: () => print('warning But2 pressed')),],type: SemanticEnum.warning,
),
const Gap(20),
ButtonGroup(buttons: [SemanticButton(text: 'danger But1', onTap: () => print('danger But1 pressed')),SemanticButton(text: 'danger But2', onTap: () => print('danger But2 pressed')),],type: SemanticEnum.danger,
),
const Gap(20),
ButtonGroup(buttons: [SemanticButton(text: 'fatal But1', onTap: () => print('fatal But1 pressed')),SemanticButton(text: 'fatal But2', onTap: () => print('fatal But2 pressed')),],type: SemanticEnum.fatal,
),

在这里插入图片描述

3. 按钮组圆角

通过为按钮组指定 radius 属性可以手动修改按钮组圆角。若不指定,默认圆角大小为4。一个手动指定按钮组圆角的示例如下:

ButtonGroup(radius: 20,buttons: [SemanticButton(text: 'Group But1', onTap: () {}),SemanticButton(text: 'Group But2', onTap: () => {}),SemanticButton(text: 'Group But3', onTap: () => {}),],
)

在这里插入图片描述

4. 按钮组尺寸

类似于SemanticButtonButtonGroup也可以使用枚举尺寸和数值尺寸两种方式来指定尺寸。

4.1 枚举尺寸

可以使用尺寸枚举值为按钮组指定尺寸。例如:

在这里插入图片描述

4.2 数值尺寸

数值尺寸是更加灵活的大小指定方式。一旦使用数值尺寸,则指定的枚举尺寸将自动失效。你可以通过height属性来指定数值尺寸,例如:

ButtonGroup(radius: 20,type: SemanticEnum.info,height: 60,buttons: [SemanticButton(text: 'But1', onTap: () {}),SemanticButton(text: 'But2', onTap: () => {}),SemanticButton(text: 'But3', onTap: () => {}),],
)

在这里插入图片描述

5. 使用前后缀图标

虽然ButtonGroup中可以有多个SemanticButton,但是在ButtonGroup上只能为第一个按钮添加前缀图标以及最后一个按钮添加后缀图标。这用起来十分简单,只需要为ButtonGroup指定prefixIcon参数或者suffixIcon参数。例如:

ButtonGroup(radius: 10,prefixIcon: const Icon(Icons.arrow_drop_down,color: Colors.white,),suffixIcon: const Icon(Icons.arrow_drop_down,color: Colors.white,),buttons: [SemanticButton(text: 'Button 1',onTap: () {},),SemanticButton(text: 'Button 2',onTap: () {},),SemanticButton(text: 'Button 4',onTap: () {},),],type: SemanticEnum.primary,size: SizeEnum.defaultSize,
)

在这里插入图片描述

6. 收缩行为

类似于SemanticButton,你可以为ButtonGroup指定收缩行为。这在类似于需要单个按钮组占满容器宽度的时候特别有用。例如,指定shrink参数值为false使按钮组占满整行:

ButtonGroup(shrink: false,radius: 10,prefixIcon: const Icon(Icons.arrow_drop_down,color: Colors.white,),suffixIcon: const Icon(Icons.arrow_drop_down,color: Colors.white,),buttons: [SemanticButton(text: 'Button 1',onTap: () {},),SemanticButton(text: 'Button 2',onTap: () {},),SemanticButton(text: 'Button 4',onTap: () {},),],type: SemanticEnum.primary,size: SizeEnum.defaultSize,
),

在这里插入图片描述

7. 有用的提示

按钮组ButtonGroup是由多个SemanticButton按照一定方式组织的整体。你可以为在ButtonGroup中的SemanticButton指定更多参数——语法这上没有错误。但是并不是每一个SemanticButton的参数在ButtonGroup中都会生效,因为在按钮组中需要按照自己的方式去进行管理。可以指定的主要是每一个按钮的文本、回调事件等,因为这些参数不属于整体,是单元特有的。

这篇关于Flutter笔记:Widgets Easier组件库(4)使用按钮组的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/952623

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定