按钮的使用大致相同,无非样式和各种交互的回调,这里以 TextButton 为例:
TextButton(
child: Text('TextButton'),
// onPressed 为点击回调,onLongPress 为长按回调
onPressed: () {},
onLongPress: (){},
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.cyan),
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 20)),
),
)
注意:字体颜色的设置不通过textStyle 设置,而是通过 foregroundColor
样式的构造函数如下:
const ButtonStyle({
this.textStyle, //字体
this.backgroundColor, //背景色
this.foregroundColor, //前景色
this.overlayColor, // 高亮色,按钮处于focused, hovered, or pressed时的颜色
this.shadowColor, // 阴影颜色
this.elevation, // 阴影值
this.padding, // 内距
this.minimumSize, //最小尺寸
this.side, //边框
this.shape, //形状
this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
this.visualDensity, // 按钮布局的紧凑程度
this.tapTargetSize, // 响应触摸的区域
this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如,在Android上,点击会产生咔哒声,启用反馈后,长按会产生短暂的振动。通常,组件默认值为true。
});
shape 属性可用的值举例:
- BeveledRectangleBorder 尖端斜角
- CircleBorder 圆形
- RoundedRectangleBorder 圆角
- StadiumBorder 半圆角(腰圆)
其他的按钮还有:
- RaisedButton(Material 风格凸起的按钮,1.22版本前,不建议使用,使用 ElevatedButton)
- FlatButton ( Material 风格扁平的按钮,1.22版本前,推荐使用 TextButton)
- OutlinedButton(带边框的按钮,1.22 前有 OutlineButton)
- IconButton(图标按钮)
- DropdownButton(Material Style 下拉菜单按钮)
- PopupMenuButton(菜单选择框按钮)
- FloatingActionButton(悬浮按钮)
1.22 以后出现的新按钮,可以作统一全局的样式管理:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
textButtonTheme: TextButtonThemeData(
style: ButtonStyle()
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle()
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: ButtonStyle()
)
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
)