1. 寫在前面
在上篇文章中介紹了Flutter中的BottomNavigationBar組件，今天繼續學習【Flutter】基礎組件中的Button組件。
- 【基礎語法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart的數據類型list&Map(數組和字典)
【Flutter】Dart的方法中的可選參數、方法作為參數傳遞
【Flutter】Dart的工廠構造方法&單例對象&初始化列表
【Flutter】Dart中的Mixins混入你知道是什么嗎？
- [基礎組件合集]
【Flutter】基礎組件【08】BottomNavigationBar
2. Button介紹
2. 1 常用的Button類型
Flutter 里有很多的 Button 組件很多，常見的按鈕組件有：
- RaisedButton ：凸起的按鈕（現在的新版本已經棄用了，改為
ElevatedButton） - FlatButton ：扁平化的按鈕（新版本已經棄用了，改為
TextButton） - OutlineButton：線框按鈕（改為
OutlinedButton） - IconButton ：圖標按鈕
- ButtonBar：按鈕組
- FloatingActionButton:浮動按鈕
2.2 Button常用屬性
按鈕組件有以下常用屬性：
- onPressed ：必填參數，按下按鈕時觸發的回調，接收一個方法，傳 null 表示按鈕禁用，會顯示禁用相關樣式
- child ：可以放入Widget
- textColor ：文本顏色
- color ：文本顏色
- disabledColor ：按鈕禁用時的顏色
- disabledTextColor ：按鈕禁用時的文本顏色
- splashColor ：點擊按鈕時水波紋的顏色
- highlightColor ：點擊（長按）按鈕后按鈕的顏色
- elevation ：陰影的范圍，值越大陰影范圍越大
- padding ：內邊距
- shape ：設置按鈕的形狀
2.3 代碼舉例
2.3.1 TextButton
- TextButton
TextButton顧名思義就是文字按鈕，一般使用在toolbars, in dialogs和其他內容內嵌在一起，文本按鈕沒有可見的邊框，因此必須依靠它們相對于其他內容的位置來獲取上下文。
Container(
color: Colors.orange,
child: TextButton(
onPressed: () {
print("TextButton");
},
child: Text('TextButton'),
)
)
- TextButton 和 FlatButton
2.3.2 ElevatedButton
使用凸起的按鈕為原本大部分為平面的布局添加維度，例如在長而繁忙的內容列表中，或在廣闊的空間中。避免在對話框或卡片等已經凸起的內容上使用凸起的按鈕。
ElevatedButton(
child: Text('ElevatedButton'),
onPressed: () {
print("ElevatedButton");
},
),
2.3.3 ButtonBar
ButtonBar，它里面可以放多個Button，ButtonBar可以給里面的button做統一樣式處理。
Container(
color: Colors.yellow,
width: 450,
child: ButtonBar(
buttonPadding: EdgeInsets.all(5),
buttonHeight: 30,
alignment: MainAxisAlignment.spaceBetween,
buttonTextTheme: ButtonTextTheme.primary,
layoutBehavior: ButtonBarLayoutBehavior.padded,
children: [
ElevatedButton(
child: Text('ElevatedButton'),
onPressed: () {
print("ElevatedButton");
},
),
RaisedButton(
child: Text('RaisedButton1'),
onPressed: () {
print("RaisedButton1");
},
),
RaisedButton(
child: Text('RaisedButton2'),
onPressed: () {
print("RaisedButton2");
},
),
],
),
)
2.3.4 OutlinedButton
一個 Material Design 的“Outlined Button”, 本質上是一個帶有輪廓邊框的 TextButton。
- OutlineButton和OutlinedButton代碼運行效果對比
2.3.5 FloatingActionButton
一個 material design的浮動按鈕。
浮動操作按鈕是一個圓形圖標按鈕，它懸停在內容上以提升應用程序中的主要操作。 浮動操作按鈕最常用于[Scaffold.floatingActionButton] 場景。
FloatingActionButton如果存在多個需要指定heroTag
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,//主軸
crossAxisAlignment: CrossAxisAlignment.center,//交叉軸
textBaseline: TextBaseline.alphabetic,//文本對齊
children: [
Center(
child: FloatingActionButton(
child: Text('111111Button333'),
onPressed: () {
print("FloatingActionButton");
}),
),
Center(
child: FloatingActionButton(
heroTag: '2',
child: Icon(Icons.access_alarm_rounded),
onPressed: () {
print("FloatingActionButton2");
}),
),
],
)
- FloatingActionButton代碼運行效果
2.3.6 IconButton
IconButton是 material design的圖標按鈕，IconButton是打印在 [Material] 小部件上的圖片，通過填充顏色來對觸摸做出反應。
IconButton通常用于 [AppBar.actions] 場景，但它們也可以用于許多其他地方。
- 代碼運行IconButton效果
2.3.7 圓角Button
這里用RaisedButton來舉例，其實這幾個Button都差不多，只是各自有一個獨特的初始化屬性而已，比如RaisedButton就是自帶圓角，有水波紋特效，帶陰影等屬性。
- 切圓角
除了圓角 button，我們還有使用圓角的需求，比如一個Container如何切成圓角的呢？這就可以借助decoration來實現了，代碼如下：
Center(
child: Container(
width: 100,
height: 70,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.orange
),
child: Text('我是文字',style: TextStyle(fontSize: 14),textAlign:TextAlign.center,),
),
)
-
效果如下：
代碼運行效果
3. 寫在后面
關注我，更多內容持續輸出
?? 喜歡就點個贊吧????
?? 覺得有收獲的，可以來一波 收藏+關注，以免你下次找不到我????
??歡迎大家留言交流，批評指正，
轉發請注明出處，謝謝支持！??
