Flutter笔记：Widgets Easier组件库（3）使用按钮组件

2024-05-02 12:04
文章标签 使用 组件 笔记 按钮 flutter widgets easier

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

Flutter笔记
Widgets Easier组件库（3）：使用按钮组件
- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSite：http://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138342814
HuaWei:https://bbs.huaweicloud.com/blogs/426715

组件库地址：

  • Pub.Dev：https://pub.dev/packages/widgets_easier
  • GitHub：https://github.com/jacklee1995/widgets_easier
  • 国内访问（更新延迟）：https://pub-web.flutter-io.cn/packages/widgets_easier

【介绍】：本文Flutter Widgets Easier组件库中按钮组件的基本用法。

flutter-ljc

上一节：《 Widgets Easier组件库（2）阴影盒子 》 | 下一节：《 Widgets Easier组件库（4）使用按钮组 》

注：文本中示例使用的 Gap 组件来源于第三方库gap，Gap(20)就相当于写成 SizedBox(width:20)或者SizedBox(height:20)等生成间隔。不喜欢这个组件的替换为SizedBox即可。

目 录

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. SemanticButton

SemanticButton 是一个高度可定制的按钮组件，支持多种视觉和交互效果。它允许开发者设置按钮的文本、图标、颜色、边框样式、阴影、以及交互时的视觉反馈。此外，按钮可以配置为带有前缀图标和后缀图标，增加按钮的表达力和功能性。

将SemanticButton 的语义枚举应用于按钮，可以获得色彩主题差异化的不同按钮。

例如：

SemanticButton(text: 'primary',type: SemanticEnum.primary,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'secondary',type: SemanticEnum.secondary,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'info',type: SemanticEnum.info,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'success',type: SemanticEnum.success,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'warning',type: SemanticEnum.warning,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'danger',type: SemanticEnum.danger,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'fatal',type: SemanticEnum.fatal,onTap: () {},

在这里插入图片描述

3. 轮廓按钮

3.1 基本用法

SemanticButton默认为普通按钮（非轮廓按钮）。通过设置SemanticButton类的isOutlined属性参数值为true，则按钮将一轮廓形式显示，例如：

SemanticButton(text: 'primary',type: SemanticEnum.primary,isOutlined: true,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'secondary',type: SemanticEnum.secondary,isOutlined: true,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'info',type: SemanticEnum.info,isOutlined: true,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'success',type: SemanticEnum.success,isOutlined: true,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'warning',type: SemanticEnum.warning,isOutlined: true,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'danger',type: SemanticEnum.danger,isOutlined: true,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'fatal',type: SemanticEnum.fatal,isOutlined: true,onTap: () {},
),

在这里插入图片描述

3.2 轮廓类型

除了默认的实线轮廓外，还可以手动指定outlineStyle参数值设置伦托类型以及去轮廓。实线轮廓（OutlineStyle.solide）是默认的，因此这里不再重复给出例子。

3.2.1 Dotted轮廓

Dotted 轮廓由一系列间隔相等的点组成，这些点连接在一起形成物体的边缘。通过指定outlineStyle: OutlineStyle.dotted，可以设置Dotted轮廓。例如：

SemanticButton(text: 'primary',type: SemanticEnum.primary,isOutlined: true,outlineStyle: OutlineStyle.dotted,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'secondary',type: SemanticEnum.secondary,isOutlined: true,outlineStyle: OutlineStyle.dotted,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'info',type: SemanticEnum.info,isOutlined: true,outlineStyle: OutlineStyle.dotted,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'success',type: SemanticEnum.success,isOutlined: true,outlineStyle: OutlineStyle.dotted,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'warning',type: SemanticEnum.warning,isOutlined: true,outlineStyle: OutlineStyle.dotted,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'danger',type: SemanticEnum.danger,isOutlined: true,outlineStyle: OutlineStyle.dotted,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'fatal',type: SemanticEnum.fatal,isOutlined: true,outlineStyle: OutlineStyle.dotted,onTap: () {},
),

在这里插入图片描述

3.2.2 Dashed轮廓

Dashed 轮廓由一系列间隔的虚线组成，这些虚线连接在一起形成物体的边缘。通过指定outlineStyle: OutlineStyle.dashed，可以设置Dashed轮廓。例如：

SemanticButton(text: 'primary',type: SemanticEnum.primary,isOutlined: true,outlineStyle: OutlineStyle.dashed,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'secondary',type: SemanticEnum.secondary,isOutlined: true,outlineStyle: OutlineStyle.dashed,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'info',type: SemanticEnum.info,isOutlined: true,outlineStyle: OutlineStyle.dashed,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'success',type: SemanticEnum.success,isOutlined: true,outlineStyle: OutlineStyle.dashed,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'warning',type: SemanticEnum.warning,isOutlined: true,outlineStyle: OutlineStyle.dashed,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'danger',type: SemanticEnum.danger,isOutlined: true,outlineStyle: OutlineStyle.dashed,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'fatal',type: SemanticEnum.fatal,isOutlined: true,outlineStyle: OutlineStyle.dashed,onTap: () {},
),

在这里插入图片描述

3.2.3 禁用轮廓

通过指定outlineStyle: OutlineStyle.none，可以禁用轮廓。例如：

SemanticButton(text: 'primary',type: SemanticEnum.primary,isOutlined: true,outlineStyle: OutlineStyle.none,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'secondary',type: SemanticEnum.secondary,isOutlined: true,outlineStyle: OutlineStyle.none,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'info',type: SemanticEnum.info,isOutlined: true,outlineStyle: OutlineStyle.none,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'success',type: SemanticEnum.success,isOutlined: true,outlineStyle: OutlineStyle.none,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'warning',type: SemanticEnum.warning,isOutlined: true,outlineStyle: OutlineStyle.none,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'danger',type: SemanticEnum.danger,isOutlined: true,outlineStyle: OutlineStyle.none,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'fatal',type: SemanticEnum.fatal,isOutlined: true,outlineStyle: OutlineStyle.none,onTap: () {},
),

在这里插入图片描述

4. 回调函数与禁用状态

通过设置按钮ontap属性值可以指定一个函数作为按钮点击时间的回调函数。如果没有指定回调函数，或者指定onTap属性的值为null，则按钮状态成为禁用状态。例如：
在这里插入图片描述

对于桌面端或者Web平台，一个被禁用的按钮不仅无法被点击，而且在hover时，不会像正常按钮那样拥有海拔变化。图标上也从寿星图标转换为禁用图标。

5. 文本样式

通过设置fontSize属性，可以指定文本的大小。例如：

SemanticButton(text: 'fontSize: 22',fontSize: 22,onTap: () {},shrink: true,
),

在这里插入图片描述

通过fontWeight属性，可以指定字体粗细程度，例如：

SemanticButton(text: 'normal',fontWeight: FontWeight.normal,onTap: () {},
),
const Gap(10),
SemanticButton(text: 'default',onTap: () {},
),
const Gap(10),
SemanticButton(text: 'FontWeight.w900',onTap: () {},fontWeight: FontWeight.w900,
),

在这里插入图片描述

6. 圆角大小

6.1 通过radius参数指定圆角

SemanticButton的radius参数用于统一指定按钮的四个角的弧度数值。是一个double类型的参数。默认情况下，radius参数值为4。再某些场景中，依据你的需求，可以手动调整按钮的圆角大小。例如：

SemanticButton(text: 'radius: 20',shrink: true,type: SemanticEnum.info,isOutlined: true,onTap: () {},radius: 20,
),
const Gap(20),
SemanticButton(text: 'radius: 0',shrink: true,type: SemanticEnum.warning,isOutlined: true,onTap: () {},radius: 0,
),

在这里插入图片描述

6.2 使用borderRadius属性

SemanticButton 的 borderRadius更为灵活，也可以用它来指定圆形的边框半径。比如下面的例子展示了两个按钮，分别为他们指定左上角和右下角的圆角形状：

SemanticButton(text: 'topLeft: Radius.circular(20)',borderRadius:const BorderRadius.only(topLeft: Radius.circular(20)),type: SemanticEnum.info,isOutlined: true,onTap: () {},radius: 20,
),
const Gap(20),
SemanticButton(text: 'bottomRight: Radius.circular(20)',borderRadius:const BorderRadius.only(bottomRight: Radius.circular(20)),type: SemanticEnum.warning,isOutlined: true,onTap: () {},radius: 20,
),

在这里插入图片描述

7. 按钮尺寸

7.1 枚举尺寸

通过尺寸枚举，可以使用预设大小。例如：

SemanticButton(text: 'small',size: SizeEnum.small,type: SemanticEnum.info,onTap: () {},
),
const Gap(20),
SemanticButton(text: 'defaultSize',type: SemanticEnum.info,size: SizeEnum.defaultSize,onTap: () {},
),
const Gap(20),
SemanticButton(text: 'large',size: SizeEnum.large,type: SemanticEnum.info,onTap: () {},
),

7.2 数值尺寸

除了尺寸枚举，你还可以通过具体的数值来指定按钮的尺寸，一旦指定数值则枚举尺寸自动失效。一个通过数值指定尺寸的例子如：

SemanticButton(text: 'Size By Button Height: 60',type: SemanticEnum.info,height: 60,shrink: true,onTap: () {},
),

在这里插入图片描述

8. 收缩行为

在 SemanticButton 组件中，shrink 参数用于控制按钮的收缩行为。当 shrink 设置为 true 时，按钮会根据其内容自适应宽度，而不是占据所有可用空间。这在某些情况下很有用，例如当你想要将多个按钮并排放置，并且希望每个按钮的宽度与其内容相匹配时。下面通过例子具体看一下 shrink 参数的作用。

8.1 默认行为（shrink = false）

  1. 当 shrink 设置为 false（默认值）时，按钮将占据其父容器提供的所有可用宽度；
  2. 在这种情况下，按钮的宽度由其父容器的约束决定，而不是由按钮的内容决定；
  3. 按钮内容（文本和图标）将在按钮的可用空间内居中对齐。

假设下面这个按钮在一个Column中，这一行没有其它部件：

SemanticButton(text: 'shrink = false',type: SemanticEnum.primary,onTap: () {},
),

下一节的截图展示效果对比。

8.2 收缩行为（shrink = true）

  1. 当 shrink 设置为 true 时，按钮将根据其内容自适应宽度；
  2. 按钮的宽度将由其内容（文本和图标）的实际宽度决定，而不是占据所有可用空间；
  3. 这意味着按钮将收缩到恰好容纳其内容所需的宽度。

下面是一个shrink = true的例子，假设下面这个按钮在一个Column中，这一行没有其它部件：

SemanticButton(text: 'shrink = true',shrink: true,type: SemanticEnum.primary,onTap: () {},
),

两者的对比如下：

在这里插入图片描述

9. 按钮图标

9.1 前缀图标的使用

在 SemanticButton 中，可以通过 prefixIcon 属性添加一个前缀图标。这个图标显示在按钮文本的左侧，通常用于增强按钮的语义或者提供视觉提示。例如，一个电话图标可以用在“呼叫”按钮上，以直观地表明按钮的功能。

SemanticButton(text: "Call",onTap: () {},shrink: true,prefixIcon: Icon(Icons.phone),type: SemanticEnum.primary,
)

在这里插入图片描述

在上述代码中，Icon(Icons.phone) 作为 prefixIcon 被传递给 SemanticButton，使得用户可以直观地识别这是一个用于拨打电话的按钮。

9.2 后缀图标的使用

与前缀图标类似，SemanticButton 也支持后缀图标，通过 suffixIcon 属性设置。后缀图标显示在按钮文本的右侧，适用于指示按钮的次要操作或额外的功能，如展开箭头或信息图标。

SemanticButton(text: "Options",onTap: () {},shrink: true,suffixIcon: Icon(Icons.arrow_drop_down),type: SemanticEnum.primary,
)

在这个例子中，Icon(Icons.arrow_drop_down) 被设置为 suffixIcon，表明这个按钮可能会展开更多的选项或菜单。

在这里插入图片描述

不论前缀图标还是后缀图标，类型都是Widget?，这意味着你可以灵活使用组件作为图标。通过这种方式，SemanticButton 的 prefixIcon 和 suffixIcon 属性为Flutter开发者提供了一种灵活的方法来设计更具表达性和功能性的用户界面。

10. 自定义颜色

10.1 一般色彩

通过按钮的 color 参数可以自定义颜色。color参数具有更高的优先级。如果自定义颜色，则 type 参数带来的颜色效果将消失。下面的例子展示了如何实现 color参数。

SemanticButton(text: 'Colors.amber',shrink: true,color: Colors.amber,onTap: () {},
),
const Gap(40),
SemanticButton(text: 'Colors.amber',shrink: true,color: Colors.amber,isOutlined: true,onTap: () {},

在这里插入图片描述

可见我们仅仅需要指定一个颜色参数，而相关颜色参数是自动计算的，比如背景色、轮廓色等等，这使得我们用起来更加方便。

10.2 渐变色按钮

为了实现更加好看的外观，你还可以通过gradient参数指定按钮渐变色。例如，下面的例子展示了两个渐变色按钮：

SemanticButton(text: 'Gradient',shrink: true,borderRadius: const BorderRadius.only(topLeft: Radius.circular(20),bottomLeft: Radius.circular(20),),gradient: const LinearGradient(colors: [Colors.red,Colors.orange,],),onTap: () => print('Gradient1'),
),
const Gap(1),
SemanticButton(text: 'Gradient',shrink: true,borderRadius: const BorderRadius.only(topRight: Radius.circular(20),bottomRight: Radius.circular(20),),gradient: const LinearGradient(colors: [Colors.orange,Colors.red,],),onTap: () => print('Gradient2'),
),

在这里插入图片描述

这篇关于Flutter笔记：Widgets Easier组件库（3）使用按钮组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/954201。

相关文章

Java使用ANTLR4对Lua脚本语法校验详解

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR？第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm
阅读更多...
Java Optional的使用技巧与最佳实践

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
使用Java将DOCX文档解析为Markdown文档的代码实现

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown（MD）因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析
阅读更多...
Qt中QUndoView控件的具体使用

Qt中QUndoView控件的具体使用

《Qt中QUndoView控件的具体使用》QUndoView是Qt框架中用于可视化显示QUndoStack内容的控件,本文主要介绍了Qt中QUndoView控件的具体使用,具有一定的参考价值,感兴趣的... 目录引言一、QUndoView 的用途二、工作原理三、 如何与 QUnDOStack 配合使用四、自
阅读更多...
C++使用printf语句实现进制转换的示例代码

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符（formatspecifier）快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指
阅读更多...
使用Python构建一个Hexo博客发布工具

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加
阅读更多...
shell编程之函数与数组的使用详解

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》：本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Python虚拟环境终极(含PyCharm的使用教程)

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》：本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境？二、虚拟环境创建方式对比三、命令行创建虚拟环境（venv）3.1 基础命令3
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2