一、基本介紹
Flutter 里有很多的 Button 組件很多，常見的按鈕組件有:
- RaisedButton ：凸起的按鈕，其實就是 Material Design 風格的 Button
- FlatButton ：扁平化的按鈕
- OutlineButton ：線框按鈕
- IconButton ：圖標按鈕
- ButtonBar ：按鈕組
- FloatingActionButton ：浮動按鈕
二、常用屬性
| 屬性名稱 | 值類型 | 屬性值 |
|---|---|---|
| onPressed | VoidCallback | 必填參數(shù)，按下按鈕時觸發(fā)的回調，接收一個 方法，傳 null 表示按鈕禁用，會顯示禁用相關 樣式 |
| child | Widget | 文本控件 |
| color | Color | 按鈕的顏色 |
| disabledColor | Color | 按鈕禁用時的顏色 |
| disabledTextColor | Color | 按鈕禁用時的文本顏色 |
| splashColor | Color | 點擊按鈕時水波紋的顏色 |
| highlightColor | Color | 點擊（長按）按鈕后按鈕的顏色 |
| elevation | double | 陰影的范圍，值越大陰影范圍越大 |
| padding | 內邊距 | |
| shape | 設置按鈕的形狀 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10) ) shape: CircleBorder( side: BorderSide( color: Colors.white ) ) |
三、示例實現(xiàn)
import 'package:flutter/material.dart';
class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("按鈕演示頁面")
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('普通按鈕'),
onPressed: () {
print('點擊了普通按鈕');
}
),
SizedBox(width: 20),
RaisedButton(
child: Text('有顏色的按鈕'),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
print('點擊了有顏色的按鈕');
}
),
SizedBox(width: 20),
RaisedButton(
child: Text('陰影按鈕'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onPressed: () {
print('點擊了陰影按鈕');
}
)
]
),
SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 60,
width: 200,
child: RaisedButton(
child: Text('有寬高的按鈕'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onPressed: () {
print('點擊了有寬高的按鈕');
}
)
)
]
),
SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(20),
child: RaisedButton(
child: Text('全屏按鈕'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onPressed: () {
print('點擊了全屏按鈕');
}
)
)
)
]
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(20),
child: RaisedButton(
child: Text('帶圓角的按鈕'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
onPressed: () {
print('點擊了帶圓角的按鈕');
}
)
)
)
]
)
]
)
)
);
}
}
三、FloatingActionButton 介紹
FloatingActionButton簡稱FAB ,可以實現(xiàn)浮動按鈕，也可以實現(xiàn)類似閑魚app的地步凸起導航
| 屬性名稱 | 屬性值 |
|---|---|
| child | 子視圖，一般為 Icon，不推薦使用文字 |
| tooltip | FAB 被長按時顯示，也是無障礙功能 |
backgroundColor |
背景顏色 |
| elevation | 未點擊的時候的陰影 |
hignlightElevation |
點擊時陰影值，默認 12.0 |
| onPressed | 點擊事件回調 |
| shape | 可以定義 FAB 的形狀等 |
| mini | 是否是 mini 類型默認 false |
四、實現(xiàn)閑魚 app 底部凸起按鈕
閑魚.png
return Scaffold(
appBar: AppBar(
title: Text("Flutter App")
),
floatingActionButton:Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.white
),
margin: EdgeInsets.only(top:10),
padding: EdgeInsets.all(8),
child: FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: this._currentIndex == 1? Colors.red : Colors.yellow,
onPressed: (){
// print('點擊 1'); setState(() {
this._currentIndex=1;
}
);
}
)
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked
)
