基础组件:按钮

news/2024/9/18 9:03:52/文章来源:https://www.cnblogs.com/linuxAndMcu/p/18375845

Material 组件库中提供了多种按钮组件如ElevatedButtonTextButtonOutlinedButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面统一介绍这些属性。另外,所有 Material 库中的按钮都有如下相同点:

  • 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波扩散的动画)。
  • 有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

一、ElevatedButton

ElevatedButton 即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大,如下图所示:

Flutter_btn_A.png


使用ElevatedButton非常简单,如:

ElevatedButton(child: Text("normal"),onPressed: () {},
);

二、TextButton

TextButton即文本按钮,默认背景透明并不带阴影。按下后,会有背景色,如下图所示:

Flutter_btn_B.png


使用 TextButton 也很简单,代码如下:

TextButton(child: Text("normal"),onPressed: () {},
)

三、OutlinedButton

OutlinedButton默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱),如下图所示:

Flutter_btn_C.png


使用OutlinedButton也很简单,代码如下:

OutlinedButton(child: Text("normal"),onPressed: () {},
)

四、IconButton

IconButton是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景,如图3-9所示:

Flutter_btn_D.png


代码如下:

IconButton(icon: Icon(Icons.thumb_up),onPressed: () {},
)

五、带图标的按钮

ElevatedButtonTextButtonOutlinedButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮,如下图所示:

Flutter_btn_E.png


代码如下:

ElevatedButton.icon(icon: Icon(Icons.send),label: Text("发送"),onPressed: _onPressed,
),
OutlinedButton.icon(icon: Icon(Icons.add),label: Text("添加"),onPressed: _onPressed,
),
TextButton.icon(icon: Icon(Icons.info),label: Text("详情"),onPressed: _onPressed,
),

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

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

相关文章

线性dp:最长公共子串

最长公共子串本文讲解的题与leetcode718.最长重复子数组,题意一模一样,阅读完本文以后可以去挑战这题。力扣链接 题目叙述: 给定两个字符串,输出其最长公共子串的长度。 输入 ABACCB AACCAB输出 3解释 最长公共子串是ACC,其长度为3。 与最长公共子序列的区别公共子串:字符…

【matplotlib教程】数据可视化

@TOC显示中文和负号matplotlib默认使用英文字库,汉字会乱码,要指定中文字库matplotlib.rcParams[font.family]=simHei #黑体 matplotlib.pyplot.rcParams[axes.unicode_minus] = False # 显示负号1.各种绘图函数 1.1 matplotlib.pyplot.plot def plot(*args, scalex=True, s…

Charles 抓包工具安装下载

下载 下载地址:https://www.charlesproxy.com/latest-release/download.do 激活 激活地址:https://www.zzzmode.com/mytools/charles/ 激活 help-》Register Charles 作者:陈彦斌 出处:https://www.cnblogs.com/chenyanbin/关注: 点我哟(^U^)ノ~YO

api调用工具推荐__hoppscotch(postwomen)

下载地址https://hoppscotch.com/downloadhoppscotch是一款开源api调用工具,该api调用工具之前叫postwomen,大概率是为了蹭postman热度,后来确实在开发者群体中被广泛使用,已经不再需要这种热度了,因此改名hoppscotch 官方给出改名的理由如下Similarity in name with &quo…

C#/.NET这些实用的编程技巧你都会了吗?

DotNet Exercises介绍 DotNetGuide专栏C#/.NET/.NET Core编程常用语法、算法、技巧、中间件、类库、工作业务实操练习集,配套详细的文章教程讲解,助你快速掌握C#/.NET/.NET Core中各种编程常用语法、算法、技巧、中间件、类库、工作业务实操等等。GitHub源码地址:https://gi…

【日记】卸载了黑神话(402 字)

正文黑神话卸载了。电脑太卡了。等换电脑之后再玩吧。不过什么时候换我就不知道了,说实话,我觉得很有可能要把这台电脑用报废之后才会换了,保守估计得有个一年。那时候我还想不想打开这游戏都两说。而且听说剧情不太好,起码目前为止,孙悟空不再是那个正义、嫉恶如仇、惩恶…

PLT绘图

1、绘制不同颜色的点(二维) import matplotlib.pyplot as pltif __name__ == __main__:# 准备数据x = [1, 2, 3, 4, 5] # X轴上的点y = [1, 4, 9, 16, 25] # Y轴上的点,这里以x的平方为例colors = [red, green, blue, yellow, purple] # 点的颜色列表# 绘制点for i in ra…

Clion配置-运行多个单独cpp代码的main函数

修改CMakeLists.txt文件为 project(Your Project Name)set(CMAKE_CXX_STANDARD 11)# 遍历项目二级目录下所有的 .cpp 文件 file (GLOB files */*.cpp) foreach (file ${files})string(REGEX REPLACE ".+/(.+)/(.+)\\..*" "\\1-\\2" exe ${file})add_execut…

CSSpart-2(继续part-1)

CSS2基础 基础 简介 【全称】Cascading Style Sheets,又名层叠样式表层叠:一层一层涂上去 表:列表 样式:如文字大小,颜色,元素宽高等。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。语言类型 标记语言,为HTML结构美化样式,实现语义与效果的分…

Spherical Voxelization

介绍了球面体素化的过程,包括重要的类和方法,如ConvertToSphericalVoxel和spherical_voxel_optimized,详细解释了参数及其作用。球面体素化通过将点云转换为球面坐标系,利用自适应采样权重来平衡不同纬度区域的点密度,从而有效捕捉几何特征。文中还提到C++绑定的sv.comput…

如何在Windows下使用make编译Makefile

最近有小伙伴咨询我去编译运行一个程序。我一开始以为是CMakeLists,结果发现是makefile。什么是Makefile ‌Makefile是一种用于自动化构建和管理程序的工具‌,它定义了项目中文件的依赖关系和构建步骤,帮助程序员自动化编译、链接和打包程序,从而提高软件开发效率。 Makefi…