按钮

  1. 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。
  2. 有一个 onPressed 属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// "漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大
RaisedButton(
child: Text("normal"),
onPressed: () {}, // 按钮点击回调@required(回调为空时按钮禁用)
textColor: Colors.blue, // 按钮点击回调
disabledTextColor: Colors.grey, // 按钮禁用时的文字颜色
color: Colors.red, // 按钮背景颜色
highlightColor: Colors.yellow, // 按钮按下时的背景颜色
splashColor: Colors.green, // 点击时,水波动画中水波的颜色
colorBrightness: Brightness.dark, // 按钮主题,默认是浅色主题
padding: EdgeInsets.all(3.0), //按钮的填充
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
), //外形
elevation: 6.0, // 正常状态下的阴影
highlightElevation: 20.0, // 按下时的阴影
disabledElevation: 0.0, // 禁用时的阴影
),
// 扁平按钮,默认背景透明并不带阴影。按下后,会有背景色
FlatButton(
child: Text("normal"),
onPressed: () {},
),
// 默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)
OutlineButton(
child: Text("normal"),
onPressed: () {},
),
// 一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
),
// 带图标的按钮RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮
RaisedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: () {},
),
OutlineButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: () {},
),
FlatButton.icon(
icon: Icon(Icons.info),
label: Text("详情"),
onPressed: () {},
),