在 Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。
一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。
MaterialButton 是一個 Materia 風格的按鈕。
new MaterialButton(
color: Colors.blue,
textColor: Colors.white,
child: new Text('點我'),
onPressed: () {
// ...
},
)
一般來說,如果需要點擊事件,就要嵌套一個 Button,因為 Container、Text 等組件都沒有點擊事件。
RaisedButton
RaisedButton 與 MaterialButton 類似。
new RaisedButton(
child: new Text('點我'),
onPressed: () {},
)
FlatButton
FlatButton 與 MaterialButton 類似,不同的是它是透明背景的。如果一個 Container 想要點擊事件時,可以使用 FlatButton 包裹,而不是 MaterialButton。因為 MaterialButton 默認帶背景,而 FlatButton 默認不帶背景。
new FlatButton(
child: new Text('點我'),
onPressed: () {},
)
IconButton
IconButton 顧名思義就是 Icon + Button 的復合體,當某個 Icon 需要點擊事件時,使用 IconButton 最好不過。
new IconButton(
icon: new Icon(Icons.volume_up),
tooltip: 'Increase volume by 10%',
onPressed: () {
// ...
},
)
其外,還有已經定義好的 Icon Button:CloseButton、BackButton。他們都有導航返回的能力。
FloatingActionButton
FloatingActionButton 是一個浮動在頁面右下角的浮動按鈕。
new Scaffold(
// ...
floatingActionButton: new FloatingActionButton(
onPressed: () {},
child: new Icon(Icons.add_a_photo),
elevation: 3.0,
highlightElevation: 2.0,
backgroundColor: Colors.red, // 紅色
),
)
在 Scaffold 里使用的時候,它是一個浮動狀態的按鈕,在其他地方使用,就不會浮動了。
ButtonBar
ButtonBar 是一個布局組件,可以讓 Button 排列在一行。
new ButtonBar(
children: <Widget>[
new CloseButton(),
new BackButton(),
],
)