Flutter之ElevatedButton详解

简介: Flutter之ElevatedButton详解

简介

ElevatedButton 是 Flutter 中一个常用的按钮组件,是一个功能齐全的 Material Design 按钮组件,可以用于创建漂亮的UI和良好的用户体验,它具有以下主要特性:


样式:默认情况下,ElevatedButton有一定的边框阴影和填充颜色,给人一种抬起的3D效果。它的样式可以通过style和color属性来自定义。

点击效果:ElevatedButton默认有点击效果,通过highlightColor和splashColor可以自定义点击效果的颜色。

禁用状态:可以通过enabled属性设置ElevatedButton的禁用状态,禁用状态下按钮会变灰并失去点击效果。

标签和图标:ElevatedButton可以设置文字标签通过child属性,也可以包含图标通过icon属性。

大小:可以通过minimumSize和padding属性设置ElevatedButton的大小。

其他属性:ElevatedButton还有其他属性如shape、elevation、highlightElevation等来设置按钮外观。

一个简单的ElevatedButton示例:

ElevatedButton(
  onPressed: () {
    print('Pressed');
  },
  child: Text('Click me'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, 
    onPrimary: Colors.white,
    shadowColor: Colors.blueAccent,
    elevation: 10,
  ),
)

这个按钮有蓝色填充色和白色文字,设置了10像素高度的阴影,并且在点击时打印“Pressed”


主要属性说明:

1.onPressed:按钮点击回调函数,必须设置。

2.child:按钮显示的子组件,通常是Text组件。

3.style:按钮的样式,可以设置颜色、阴影、形状等。例如:

dart

style: ElevatedButton.styleFrom(

primary: Colors.blue,

onPrimary: Colors.white,

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),

)

4.color:按钮的背景颜色,如果同时设置了style,以style为准。

5.disabledColor:禁用状态下的背景颜色。

6。elevation:阴影高度,默认为2,可以设置为0以去除阴影效果。

7.highlightElevation:点击状态下的阴影高度,默认加深了4像素。

8.disabledElevation:禁用状态下的阴影高度,默认为0。

9.shape:按钮的形式,可以是圆形、方形或带圆角的长方形,默认是直角。

10.padding:按钮内边距,可以控制按钮的大小。

11。icon:按钮前面显示的图标,child为文字时与文字相邻显示。

12.label:按钮的文字,过时属性,现在使用child代替。

13.splashColor:点击时的水波纹颜色。

14.highlightColor:按钮点击时的高亮颜色。

15.onHighlightChanged:高亮状态改变时的回调函数。

16.enabled:是否启用按钮,默认为true,false时按钮会被禁用。



相关文章
Flutter 组件(二)文本 与 输入框组件
Flutter 组件(二)文本 与 输入框组件
751 0
|
JSON Dart 测试技术
Flutter中高级JSON处理:使用json_serializable进行深入定制
Flutter中高级JSON处理:使用json_serializable进行深入定制
2025 3
|
12月前
|
API 容器
Flutter UI组件库(JUI)
Flutter UI组件库(JUI)
1866 17
|
Dart IDE 开发工具
Flutter Version Manager (FVM): Flutter的版本管理终极指南
Flutter Version Manager (FVM): Flutter的版本管理终极指南
4885 1
flutter中使用图标(含自制图标库方案)
flutter中使用图标(含自制图标库方案)
3246 0
|
存储 缓存 JavaScript
Flutter笔记:关于WebView插件的用法(上)
Flutter笔记:关于WebView插件的用法(上)
3725 5
|
开发框架 前端开发 UED
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多
【4月更文挑战第30天】在Flutter移动应用开发中,下拉刷新和上拉加载更多能提升用户体验和用户参与度。通过`RefreshIndicator`组件和`ScrollController`实现下拉刷新与上拉加载。`RefreshIndicator`包裹可滚动Widget,`ScrollController`监听滚动事件以判断是否到达底部。性能优化包括避免重复加载、使用防抖技术和异步加载数据。参考Flutter官方文档和相关教程可进一步学习。
745 0
【Flutter前端技术开发专栏】Flutter中的下拉刷新与上拉加载更多
|
人机交互
Flutter笔记 - ListTile组件及其应用
Flutter笔记 - ListTile组件及其应用
699 0
|
机器学习/深度学习 Java Android开发
记录一个Flutter运行的异常FAILURE: Build failed with an exception. What went wrong: A problem occurred config
记录一个Flutter运行的异常FAILURE: Build failed with an exception. What went wrong: A problem occurred config
560 0
|
编解码 缓存 调度
Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理
Flutter笔记:Flutter的应用生命周期状态(lifecycleState)管理
633 0