flutter控制元件練習demo地址：github
button種類
所謂的 button 就是都有 onPressed 屬性， 可以點選響應事件的 ， 有點選的效果 ， 如果 onPressed 設定為 null 的話，button 都是 disable 的，同時 button 有 disable 的樣式 ， 按下時 有高亮顯示
- MaterialButton 有主題的button，官網不推薦使用此控制元件，推薦使用它的子類，下面的就是他們的子類，預設大小是 88 * 36 的大小
- RaisedButton 有陰影，圓角的button
- FlatButton 沒有陰影 沒有圓角 沒有邊框 ，背景透明
- OutlineButton 沒有陰影 ， 有圓角邊框的
- IconButton 只有一個Icon的button
- BackButton 一個 Icon 是 返回鍵頭的IconButton，點選會呼叫 Navigator.maybePop 返回上一個路由 ， 預設長按提示是 back ，且不可去掉
- CloseButton 一個 Icon 是 x（關閉）的IconButton，點選會呼叫 Navigator.maybePop 返回上一個路由 ，預設長按提示是 back ，且不可去掉
- RawMaterialButton 不適用當前Theme或者ButtonTheme的控制元件 ， 如果自定義，官方推薦使用這個
- PopupMenuButton 選單，相當於 android 中的 PopupMenu 和 ios 中的 UIMenuController
- DropdownButton 下拉選單， 相當於 android 中的 Spinner
一。 MaterialButton
預設的是一個最小寬度為88，高度為36,有圓角，有陰影，點選的時候高亮，有 onpress 屬性的一個控制元件。可以響應使用者點選事件。但是：官方不推薦使用這個，推薦使用它的子類 RaisedButton、FlatButton 和 OutlineButton，如果自定義 button 推薦使用 RawMaterialButton
1.1 屬性
- onPressed: 按下之後鬆開的回撥，也就是所謂的點選事件。其實是當使用者手抬起來時的動作
- onHighlightChanged: onPressed!=null 的時候可以看出 相當於使用者按下時（高亮） 或者 鬆開時（不高亮）的監聽。
- textColor: 裡面文字的顏色
- disabledTextColor: 當狀態為 disable的時候 文字的顏色，onpress=null 為disable
注意點 在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ） - color: // 當是 enable （onpress != null） 背景色
- disabledColor: //onpress = null 的時候的顏色（不知道為什麼測試不管用）
注意點 在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ） - highlightColor: 當使用者 按下高亮時 的顏色
- elevation: Z軸陰影 預設是2 ，當 enable 的時候的陰影
- highlightElevation: 高亮時的陰影 預設是 8 button 被按下的時候
- disabledElevation: 當 disabled （onpress = null） 的陰影 預設是0 ，測試的時候 陰影還是 為0.0,也就是說不管用
注意點 在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ） - minWidth: 最小的寬度 預設是 88 。 在 ButtonTheme 規定的
- height: 高度， 預設是 36 也是在 ButtonTheme 規定的
- child: 包括的子控制元件
- shape 邊框樣式
注意點 在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Button"),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// onPressed不能設定null 相當於使用者按下時（高亮） 或者 鬆開時（不高亮）的監聽。 也就是 MaterialButton 樣式改變時
// onHighlightChanged: (boo) {
// Fluttertoast.showToast(
// msg: "onHighlightChanged改變了", textColor: Colors.white);
// },
child: Text("MaterialButton"),
// 按下之後鬆開的回撥，也就是所謂的點選事件。其實是當使用者手抬起來時的動作
onPressed: () {
Fluttertoast.showToast(
msg: "點選MaterialButton", textColor: Colors.white);
},
// onPressed: null,
// 裡面文字的顏色
// textColor: Colors.red,
// 當狀態為 disable的時候 文字的顏色，onpress=null 為disable
// 在這裡we；
//在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledTextColor: Colors.black,
// 設定邊框樣式 , 在MaterialButton這裡沒用 在它子類裡面有用
// shape: Border.all(
// width: 10,
// color:Color(0xFFFF0000),
// style: BorderStyle.solid,
// ),
// 當是 enable （onpress != null） 背景 ，有陰影，有圓角
//在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
shape: Border.all(color: Color(0xFFFF0000),style: BorderStyle.solid,width: 2),
color: Colors.grey,
// onpress = null 的時候的顏色（不知道為什麼不管用）
// 我測試的結果是 當onPress = null 的時候 ，還是 上面 color 屬性的顏色， 只不過是沒有陰影，沒有圓角而已
// 在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledColor: Colors.amberAccent,
// 當使用者 按下高亮時 的顏色
// highlightColor: Colors.red,
// splashColor: Colors.deepPurple,
// colorBrightness: Brightness.light,
// 高度， 陰影 預設是2
elevation: 2,
// 高亮時的陰影 預設是 8 button 被按下的時候
// highlightElevation: 14,
// 當 disabled （onpress = null） 的陰影 預設是0
// 測試的時候 陰影還是 為0.0
//在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledElevation: 20,
// padding: EdgeInsets.all(20),
// 最小的寬度 預設是 88 。 在 ButtonTheme 規定的
// minWidth: 187,
// 高度， 預設是 36 也是在 ButtonTheme 規定的
// height: 1,
)
],
),
),
);
}
}
複製程式碼1.2 RaisedButton
RaisedButton： 屬性基本上和上面的父類一樣，The [elevation], [highlightElevation], [disabledElevation], 和 [clipBehavior] 必須非空.
1.2.1 構造方法
- RaisedButton()
- RaisedButton.icon(onPressed,icon,label)// 其實主要是為了讓使用者弄成左邊一個icon 右面一個文字 當然了 這兩個都是 Wight，所以都可以
1.2.2 屬性
在上面我們們知道 disabledTextColor、disabledColor、disabledElevation 和 shape 在這裡設定才有效。現在主要講一下 shape （邊框）
1.3 FlatButton
FlatButton： 扁平按鈕，一般沒有陰影，沒有邊框，且大部分用在 toolbar，dialogs ， 或者 其他內容中 注意點: 一定要設定onPress屬性，否則他就是不可點選的
1.3.1 構造方法
- FlatButton()
- FlatButton.icon(onPressed,icon,label)// 其實主要是為了讓使用者弄成左邊一個icon 右面一個文字 當然了 這兩個都是 Wight，所以都可以
1.4 OutlineButton
OutlineButton： 預設有細灰色圓角邊框，無陰影，且背景透明，當按下的時候，有預設highlightElevation 和 highColor 。
1.3.1 構造方法
- OutlineButton()
- OutlineButton.icon(onPressed,icon,label)// 其實主要是為了讓使用者弄成左邊一個icon 右面一個文字 當然了 這兩個都是 Wight，所以都可以
1.3.2 獨有的屬性
- highlightedBorderColor // 按鈕高亮時的邊框顏色
- disabledBorderColor: // 按鈕不可點選時的邊框顏色
二。 IconButton
一般用在AppBar.actions 中，當然其他地方也可以使用， [icon] 屬性必須指定，一般都 Icon 或者 ImageIcon 。 響應點選的時候，是一個大圓
2.1 屬性
- iconSize = 24.0icon的大小
- padding = const EdgeInsets.all(8.0) 圍繞在 icon 周圍的 padding ， 周圍的padding也可以響應點選事件，手勢事件
- alignment = Alignment.centericon 在 IconButton 中的位置
- icon必須的引數 一般是 Icon 或者是 ImageIcono
- coloricon的顏色 。 注意 不是背景色， 就是icon的顏色
- highlightColor 高亮時的背景顏色
- splashColor按下瞬間的顏色 加入從手指按下之後 先是 splashColor然後再是 highlightColor
- disabledColor 當disable的時候 icon 顏色
- onPressed 點選事件
- tooltip 長按的提示
三 PopupMenuButton
PopupMenuButton 相當於 android 中的 PopupMenu 和 ios 中的 UIMenuController ,
3.1 屬性
- itemBuilder 每個條目
- initialValue // 初始的value ， 就是開啟的時候， 在這個value 裡面會有不同的樣式，讓你知道當前值
- onSelected選擇時的回撥
- onCanceled點選返回鍵，或者是點選外部， popupmenu關閉時的回撥
- tooltip 預設有長按tip 是
- elevation = 8.0 彈出來的時候的陰影高度
- padding = const EdgeInsets.all(8.0)
- child icon 和 child 不能同時設定， 否則報錯
- icon icon 和 child 不能同時設定， 否則報錯
- offset = Offset.zero 根據當前控制元件，向右向下平移。預設是跟當前控制元件的左上角對齊
3.2 注意點
icon 和 child 不能同時設定， 否則報錯，如果都沒有設定，flutter會根據不同的平臺 給一個icon ，android 中是三個點，child 不要設定有（onpress屬性）點選事件的 控制元件,比如 FlatButton 等等，因為影響 PopupMenuButton的點選事件
三 整體demo圖片
四 整體程式碼
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Button"),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// onPressed不能設定null 相當於使用者按下時（高亮） 或者 鬆開時（不高亮）的監聽。 也就是 MaterialButton 樣式改變時
// onHighlightChanged: (boo) {
// Fluttertoast.showToast(
// msg: "onHighlightChanged改變了", textColor: Colors.white);
// },
child: Text("MaterialButton"),
// 按下之後鬆開的回撥，也就是所謂的點選事件。其實是當使用者手抬起來時的動作
onPressed: () {
Fluttertoast.showToast(
msg: "點選MaterialButton", textColor: Colors.white);
},
// onPressed: null,
// 裡面文字的顏色
// textColor: Colors.red,
// 當狀態為 disable的時候 文字的顏色，onpress=null 為disable
// 在這裡we；
//在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledTextColor: Colors.black,
// 設定邊框樣式 , 在MaterialButton這裡沒用 在它子類裡面有用
// shape: Border.all(
// width: 10,
// color:Color(0xFFFF0000),
// style: BorderStyle.solid,
// ),
// 當是 enable （onpress != null） 背景 ，有陰影，有圓角
//在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
shape: Border.all(
color: Color(0xFFFF0000), style: BorderStyle.solid, width: 2),
color: Colors.grey,
// onpress = null 的時候的顏色（不知道為什麼不管用）
// 我測試的結果是 當onPress = null 的時候 ，還是 上面 color 屬性的顏色， 只不過是沒有陰影，沒有圓角而已
// 在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledColor: Colors.amberAccent,
// 當使用者 按下高亮時 的顏色
// highlightColor: Colors.red,
// splashColor: Colors.deepPurple,
// colorBrightness: Brightness.light,
// 高度， 陰影 預設是2
elevation: 2,
// 高亮時的陰影 預設是 8 button 被按下的時候
// highlightElevation: 14,
// 當 disabled （onpress = null） 的陰影 預設是0
// 測試的時候 陰影還是 為0.0
//在這裡無效 在它子類有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledElevation: 20,
// padding: EdgeInsets.all(20),
// 最小的寬度 預設是 88 。 在 ButtonTheme 規定的
// minWidth: 187,
// 高度， 預設是 36 也是在 ButtonTheme 規定的
// height: 1,
)
],
),
),
);
}
}
class RaiseButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Button"),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
child: Text("MaterialButton"),
// 按下之後鬆開的回撥，也就是所謂的點選事件。其實是當使用者手抬起來時的動作
onPressed: () {
Fluttertoast.showToast(
msg: "點選MaterialButton", textColor: Colors.white);
},
// shape: Border.all(
// // 設定邊框樣式
// width: 10,
// color:Color(0xFFFF0000),
// style: BorderStyle.solid,
// ),
shape: Border.all(
color: Color(0xFFFF0000),
style: BorderStyle.solid,
width: 10),
color: Colors.grey,
elevation: 2,
),
RaisedButton(
disabledColor: Colors.blue,
onPressed: () {
Fluttertoast.showToast(
msg: "點選RaisedButton", textColor: Colors.white);
},
child: Text("RaisedButton 方式1"),
),
Row(
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: Border.all(
color: Colors.red, width: 2, style: BorderStyle.solid),
),
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red,
width: 2,
style: BorderStyle.solid),
borderRadius: BorderRadius.all(Radius.circular(5))),
),
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: StadiumBorder(
side: BorderSide(
color: Colors.red, width: 2, style: BorderStyle.solid),
),
),
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
style: BorderStyle.solid,
width: 2))),
],
),
RaisedButton.icon(
onPressed: () {
Fluttertoast.showToast(
msg: "點選RaisedButton", textColor: Colors.white);
},
icon: Icon(Icons.add),
label: Text("RaisedButton.icon的方式"),
// 一個矩形邊框
// shape: Border.all(
// width: 2,
// color: Colors.red,
// style: BorderStyle.solid,
// ),
// 可以設定四個角的弧度的邊框
// shape: RoundedRectangleBorder(
// side: BorderSide(
// width: 2,
// color: Colors.red,
// style: BorderStyle.solid,
// ),
// borderRadius: BorderRadius.all(Radius.circular(5)),
// ),
// 只有下面一個邊框
// shape: UnderlineInputBorder( borderSide:BorderSide(color: Colors.red, style: BorderStyle.solid, width: 2)),
// 圓形邊框（這裡會裁剪他）
// shape: CircleBorder(side: BorderSide(color: Colors.red, style: BorderStyle.solid, width: 2))
// 把高或者寬弄成半圓
// shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))),
// 剪下四個角
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
side: BorderSide(
color: Colors.red,
style: BorderStyle.solid,
width: 2))),
FlatButton(
child: Text("flatbutton"),
color: Colors.blue,
onPressed: () {}),
OutlineButton(
disabledBorderColor: Colors.grey,
highlightedBorderColor: Colors.red,
child: Text("outlinebuton"),
onPressed: () {},
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconButton(
// 必須的引數 一般是 Icon 或者是 ImageIcono
// icon: Icon(Icons.add),
icon: Icon(Icons.add),
// 點選事件
onPressed: () {},
// 按鈕不可點選時的顏色
disabledColor: Colors.red,
//icon 的大小
iconSize: 40,
// 圍繞在 icon 周圍的 padding ， 周圍的padding也可以響應點選事件，手勢事件
padding: EdgeInsets.all(0),
// icon 在 IconButton 中的位置
alignment: Alignment.center,
// icon 的顏色 如果裡面是 Text ，text的顏色不會改變 注意 不是背景色， 就是icon的顏色
color: Colors.red,
// 高亮時的背景顏色
highlightColor: Colors.blue,
// 按下瞬間的顏色 加入從手指按下之後 先是 splashColor然後再是 highlightColor
splashColor: Colors.black,
// 預設沒有長按提示
tooltip: "長按的提示"),
// 就是一個iconbutton 設定了一返回箭頭的icon
BackButton(),
// 就是一個iconbutton 設定了一 x 關閉的icon
CloseButton(),
],
),
PopupMenuButton(
// 初始的value ， 就是開啟的時候， 在這個value 裡面會有不同的樣式，讓你知道當前值
// initialValue: "item1",
// 點選返回鍵，或者是點選外部， popupmenu關閉時的回撥
onCanceled: () {
Fluttertoast.showToast(msg: "取消選擇了", textColor: Colors.white);
},
// 選擇時的回撥
onSelected: (String value) {
Fluttertoast.showToast(
msg: "選擇的值是：$value", textColor: Colors.white);
},
// 如果 icon 和 child 屬性都沒有設定值，flutter會根據不同的平臺 給一個icon ，android 中是三個點
// icon 和 child 不能同時設定， 否則報錯
icon: Icon(Icons.menu),
// child: Text("開啟"), 不要設定有點選事件的 控制元件,比如 FlatButton 等等，因為影響 PopupMenuButton的點選事件
// 當前 控制元件 向左 向下平移
offset: Offset(-20, 50.0),
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
PopupMenuItem(
value: "item1",
child: Row(children: <Widget>[
Icon(Icons.delete),
Text("刪除")
])),
PopupMenuItem(
value: "item2",
child: Row(
children: <Widget>[Icon(Icons.add), Text("加好友")]),
//是否可以選擇
enabled: true,
),
]),
],
),
),
);
}
}
複製程式碼