Flutter 里有很多的 Button 組件很多，常見的按鈕組件有:RaisedButton、FlatButton、IconButton、OutlineButton、ButtonBar、FloatingActionButton
- RaisedButton :凸起的按鈕，其實(shí)就是 Material Design 風(fēng)格的
- Button FlatButton :扁平化的按鈕
- OutlineButton:線框按鈕
- IconButton :圖標(biāo)按鈕
- ButtonBar:按鈕組
- FloatingActionButton:浮動(dòng)按鈕
區(qū)別-->RaisedButton有elevation屬性，陰影的范圍
FlatButton就是個(gè)平的
OutlineButton 有線框，即使設(shè)置背景也不會(huì)使用
| 屬性 | 描述 |
|---|---|
| textColor | 文本顏色 |
| color | 按鈕的顏色 |
| disabledColor | 按鈕禁用時(shí)的顏色 |
| disabledTextColor | 按鈕禁用時(shí)的文本顏色 |
| splashColor | 點(diǎn)擊按鈕時(shí)水波紋的顏色 |
| highlightColor | 點(diǎn)擊(長(zhǎng)按)按鈕后按鈕的顏色 |
| elevation | 陰影的范圍，值越大陰影范圍越大 |
| padding | 內(nèi)邊距 |
| shape | 設(shè)置按鈕的形狀 |
image.png
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text("普通按鈕"),
),
SizedBox(
width: 10,
),
RaisedButton(
onPressed: () {},
child: Text("有顏色按鈕"),
color: Colors.blue,
textColor: Colors.white,
),
SizedBox(
width: 10,
),
RaisedButton(
onPressed: () {},
child: Text("有陰影按鈕"),
color: Colors.blue,
elevation: 30,
textColor: Colors.white,
)
],
),
SizedBox(
width: 10,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton.icon(
icon: Icon(Icons.tag_faces),
onPressed: null,
label: Text("onPressed =null"),
color: Colors.blue,
textColor: Colors.white,
),
SizedBox(
width: 10,
),
RaisedButton.icon(
icon: Icon(Icons.tag_faces),
onPressed: () {},
label: Text("onPressed !=null"),
color: Colors.blue,
textColor: Colors.white,
),
SizedBox(
width: 10,
),
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
height: 50,
child: RaisedButton(
onPressed: () {},
child: Text("有寬高按鈕"),
color: Colors.blue,
elevation: 30,
textColor: Colors.white,
),
)
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(20, 0, 10, 0),
child: RaisedButton(
onPressed: () {},
child: Text("自適應(yīng)按鈕"),
color: Colors.blue,
elevation: 30,
textColor: Colors.white,
),
))
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text("圓角按鈕"),
color: Colors.blue,
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
textColor: Colors.white,
),
SizedBox(
width: 10,
),
Container(
height: 80,
child: RaisedButton(
onPressed: () {},
child: Text("圓角按鈕"),
color: Colors.blue,
elevation: 10,
splashColor: Colors.grey,
shape: CircleBorder(
side: BorderSide(
color: Colors.white,
)),
textColor: Colors.white,
),
),
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.red,
child: Text("FlatButton")),
SizedBox(
width: 10,
),
OutlineButton(
onPressed: () {},
child: Text("OutlineButton"),
),
SizedBox(
width: 10,
),
OutlineButton(
onPressed: () {},
color: Colors.blue, // 沒有效果
textColor: Colors.red,
child: Text("OutlineButton"),
)
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
children: <Widget>[
FlatButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.red,
child: Text("登錄 按鈕組")),
FlatButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.red,
child: Text("注冊(cè) 按鈕組"))
],
)
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MyButton(
text: "自定義按鈕",
pressed: () {},
)
],
)
],
);
//自定義按鈕
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton(
{this.text = "",
this.pressed = null,
this.width = 120.0,
this.height = 50.0});
@override
Widget build(BuildContext context) {
return Container(
width: this.width,
height: this.height,
child: RaisedButton(
onPressed: this.pressed,
child: Text(this.text),
),
);
}
}
FloatingActionButton
image.png
| 屬性 | 描述 |
|---|---|
| child | 子視圖，一般為 Icon，不推薦使用文字 |
| tooltip | FAB 被長(zhǎng)按時(shí)顯示，也是無(wú)障礙功能 |
| backgroundColor | 背景顏色 |
| elevation | 未點(diǎn)擊的時(shí)候的陰影 |
| hignlightElevation | 點(diǎn)擊時(shí)陰影值，默認(rèn) 12.0 |
| onPressed | 點(diǎn)擊事件回調(diào) |
| shape | 可以定義 FAB 的形狀等 |
| mini | 是否是 mini 類型默認(rèn) false |
//定位 fab的位置centerDocked 是依附在導(dǎo)航欄上
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//使用 Container包起來(lái)，就能控制按鈕的大小了
floatingActionButton: Container(
width: 70,
height: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(35), // 圓角為款寬高的一般就是圓
),
padding: EdgeInsets.all(8),
//因?yàn)楸尘笆前咨?的內(nèi)邊距看著就像8的邊框
margin: EdgeInsets.only(top: 4),
//因?yàn)樘可狭?，向下移?dòng)
child: FloatingActionButton(
elevation: 0,
onPressed: () {
setState(() {
this.currentIndex = 2; //點(diǎn)擊事件，來(lái)處理tab的切換
});
},
backgroundColor: this.currentIndex == 2 ? Colors.yellow : Colors.blue,
child: Icon(
Icons.add,
),
),
),
