简介
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时按钮会被禁用。
