目錄
一、Flutter 常用的 Button
- RaisedButton：凸起的按鈕，其實就是 Material Design 風格的 Button
- FlatButton：扁平化的按鈕
- OutlineButton：線框按鈕
- IconButton：圖標按鈕
- ButtonBar：按鈕組
- FloatingActionButton：浮動按鈕
- DropdownButton：下拉框按鈕
二、演示圖如下
三、代碼案例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Button'),),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[500],
child: Icon(Icons.add_comment),
tooltip:'測試',
onPressed: () {print('loating Action Button');},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: MyBody(),
),
);
}
}
class MyBody extends StatefulWidget {
@override
_MyBodyState createState() => _MyBodyState();
}
class _MyBodyState extends State<MyBody> {
var value;
int count = 0;
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
child: Column(
children: <Widget>[
Wrap(
spacing: 8,
runSpacing: 8,
children: <Widget>[
RaisedButton(
child: Text('普通按鈕'),
onHighlightChanged:(bool b) {
print(b);
},
onPressed: (){},
),
RaisedButton(
child: Text('帶顏色'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue[200],
),
RaisedButton(
child: Text('帶顏色帶陰影'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue[200],
elevation: 15,
),
Container(
width: 300,
height: 50,
child: RaisedButton(
child: Text('設置寬高'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue[500],
elevation: 15,
),
),
RaisedButton.icon(
icon: Icon(Icons.account_box),
label: Text('我前邊有圖標'),
onPressed: () {},
),
RaisedButton(
child: Text('圓角按鈕'),
onPressed: (){},
color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
),
Container(
width: 100,
height: 100,
child: RaisedButton(
child: Text('圓形按鈕'),
onPressed: (){},
color: Colors.red,
shape: CircleBorder(
// side: BorderSide(color: Colors.yellow[500])
)
),
),
RaisedButton(
child: Text('水波紋'),
onPressed: (){},
color: Colors.blue[200],
splashColor:Colors.yellow[100],
),
RaisedButton(
child: Text('長按變色'),
onPressed: (){},
color: Colors.blue[200],
highlightColor:Colors.red[500],
),
FlatButton(
child: Text('扁平按鈕'),
onPressed: (){},
color: Colors.blue[200],
),
OutlineButton(
child: Text('邊框按鈕'),
onPressed: (){},
textColor: Colors.red,
borderSide: BorderSide(color: Colors.red,),
),
IconButton(
icon: Icon(Icons.access_alarms),
onPressed: () {},
color: Colors.deepOrange,
splashColor:Colors.limeAccent,
highlightColor:Colors.blue[300],
tooltip:'幹啥',
),
DropdownButton(
hint:new Text('請選擇...'),
value: value,//下拉菜單選擇完之後顯示給用戶的值
iconSize: 50.0,//設置三角標icon的大小
items: <DropdownMenuItem>[
DropdownMenuItem(
value: '1',
child: Text('One'),
),
DropdownMenuItem(
value: '2',
child: Text('Two'),
),
DropdownMenuItem(
value: '3',
child: Text('Three'),
),
DropdownMenuItem(
value: '4',
child: Text('four'),
),
DropdownMenuItem(
value: '5',
child: Text('five'),
),
],
onChanged: (v) {
setState(() {
print(v);
value = v;
});
},
),
],
),
Container(
color: Colors.pink[100],
child: ButtonBar(
children: <Widget>[
RaisedButton(
child: Text('按鈕一'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue,
elevation: 15,
),
RaisedButton(
child: Text('按鈕二'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue,
elevation: 15,
),
],
),
),
Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
SizedBox(height: 30,),
Text("一個Button事件與回調，更改數值"),
SizedBox(height: 15,),
Text("$count",style: TextStyle(fontSize: 50,color: Colors.purple,fontWeight:FontWeight.w800)),
SizedBox(height: 20,),
RaisedButton(
child: Text('點我',style: TextStyle(fontSize: 18),),
onPressed: (){setState(() {
count += 1;
});},
textColor: Colors.white,
color: Colors.blue,
elevation: 15,
),
],
),
)
],
),
);
}
}四、參數詳解
| 屬性 | 說明 |
| onPressed | 點擊事件監聽，傳 null 表示按鈕禁用 |
| onHighlightChanged | 水波紋高亮變化回調,按下返回true,擡起返回false |
| textTheme | 定義按鈕主題 |
| textColor | 按鈕文字顏色 |
| disabledTextColor | 無效按鈕文字顏色 |
| color | 按鈕顏色 |
| disabledColor | 無效按鈕顏色 |
| focusColor | 獲取焦點 按鈕顏色 |
| hoverColor | 不知道啥玩應兒 |
| highlightColor | 長按 按鈕顏色 |
| splashColor | 點擊 水波紋 顏色 |
| colorBrightness | 官網：用於此按鈕的主題亮度。默認爲主題的亮度 |
| elevation | 陰影 |
| focusElevation | |
| hoverElevation | |
| highlightElevation | |
| disabledElevation | |
| padding | 內邊距 |
| shape | 設置形狀，如圓角，圓形等 |
| clipBehavior | 剪裁 Clip.antiAlias：剪輯具有抗鋸齒功能 Clip.antiAliasWithSaveLayer：在剪輯後立即剪輯具有抗鋸齒和saveLayer Clip.hardEdge：剪輯，但不應用抗鋸齒。 Clip.none：不剪輯。 |
| focusNode | 焦點 |
| materialTapTargetSize | |
| animationDuration | |
| child | |
| OutlineButton 特性 |
|
| borderSide |
線框 線顏色 ，如紅色：BorderSide(color: Colors.red,), |
| clipBehavior |
相框風格，如：Clip.antiAlias |
| RaisedButton.icon 特性 |
|
| icon |
圖標 |
| label |
通常是文字 |
| IconButton 特性 |
|
| icon |
圖標 |
| color |
圖標顏色 |
| tooltip |
長按文字提示 |
| DropdownButton 特性 DropdownButton |
|
| hint |
提示語 |
| value |
當前值 |
| iconSize |
下拉框圖片大小 |
| icon | 右邊圖標 默認爲下三角 |
| items |
下拉框數據集合 |
| onChanged |
監聽 |
| FloatingActionButton 特性 |
|
| child | 子元素，一般爲 Icon，不推薦使用文字 |
| tooltip | 長按文字提示 |
| backgroundColor | 背景顏色（默認使用主題顏色） |
| mini | 是否是 mini 類型默認 false |
| 設置位置，在外部使用（與FloatingActionButton同級）floatingActionButtonLocation。 FloatingActionButtonLocation.centerDocked： 底部劇中 與底部無間距 FloatingActionButtonLocation.centerFloat： 底部劇中 與底部有間距 FloatingActionButtonLocation.endDocked：右下角 與底部無間距 FloatingActionButtonLocation.endFloat：右下角 與底部有間距 FloatingActionButtonLocation.endTop：右上角 FloatingActionButtonLocation.startTop：左上角 |