- 文章信息 - Author: Jack Lee (jcLee95)
Visit me at: https://jclee95.blog.csdn.net
Email: 291148484@163.com.
Shenzhen Chine
Address of this article:https://blog.csdn.net/qq_28550263/article/details/131387856
【介紹】：本文介紹 Flutter 按鈕類組件。
1 凸起按鈕：RaisedButton組件
RaisedButton組件是Flutter中的一個(gè)基本按鈕組件，它具有凸起的立體效果。我們可以使用它來創(chuàng)建具有點(diǎn)擊事件的按鈕。
1.1 創(chuàng)建RaisedButton組件
要在Flutter中創(chuàng)建一個(gè)RaisedButton組件，我們可以使用RaisedButton構(gòu)造函數(shù)。例如：
RaisedButton(
onPressed: () {
// 點(diǎn)擊事件處理
},
child: Text('點(diǎn)擊我'),
)
1.2 設(shè)置RaisedButton樣式
我們可以使用color、textColor等屬性為RaisedButton組件設(shè)置樣式。以下是一個(gè)示例：
RaisedButton(
onPressed: () {
// 點(diǎn)擊事件處理
},
child: Text('點(diǎn)擊我'),
color: Colors.blue,
textColor: Colors.white,
)
1.3 設(shè)置RaisedButton形狀
我們可以使用shape屬性為RaisedButton組件設(shè)置形狀。為此，我們需要?jiǎng)?chuàng)建一個(gè)ShapeBorder對(duì)象并傳遞給shape屬性。以下是一個(gè)示例：
RaisedButton(
onPressed: () {
// 點(diǎn)擊事件處理
},
child: Text('點(diǎn)擊我'),
color: Colors.blue,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
)
1.4 設(shè)置RaisedButton點(diǎn)擊事件
我們可以使用onPressed屬性為RaisedButton組件設(shè)置點(diǎn)擊事件。以下是一個(gè)示例：
RaisedButton(
onPressed: () {
// 點(diǎn)擊事件處理
print('按鈕被點(diǎn)擊');
},
child: Text('點(diǎn)擊我'),
color: Colors.blue,
textColor: Colors.white,
)
1.5 禁用RaisedButton組件
要禁用RaisedButton組件，我們可以將onPressed屬性設(shè)置為null。禁用狀態(tài)下的按鈕不會(huì)響應(yīng)點(diǎn)擊事件。以下是一個(gè)示例：
RaisedButton(
onPressed: null,
child: Text('禁用按鈕'),
color: Colors.blue,
textColor: Colors.white,
)
1.6 小結(jié)
RaisedButton組件是Flutter中一個(gè)常用的按鈕組件，具有凸起的立體效果。我們可以通過設(shè)置不同的屬性，如樣式、形狀、點(diǎn)擊事件等，輕松地自定義按鈕的顯示方式和功能。在接下來的章節(jié)中，我們將學(xué)習(xí)其他基本組件，如FlatButton和IconButton組件。
1.7 已棄用：推薦使用 TextButton 替代。
根據(jù)文檔，F(xiàn)latButton、RaisedButton 和 OutlineButton 已經(jīng)分別被 TextButton、ElevatedButton 和 OutlinedButton 取代。ButtonTheme 也已經(jīng)被 TextButtonTheme、ElevatedButtonTheme 和 OutlinedButtonTheme 取代。請(qǐng)參考：https://docs.flutter.dev/release/breaking-changes/buttons
2 扁平按鈕：FlatButton組件
FlatButton是Flutter中的一個(gè)按鈕類組件，它是一個(gè)無立體感的按鈕，通常用于較為不突出的操作。在用戶與其交互時(shí)，F(xiàn)latButton會(huì)顯示一些視覺效果，如水波紋。接下來，我們將介紹FlatButton組件的基本使用方法和屬性。
2.1 創(chuàng)建FlatButton
要?jiǎng)?chuàng)建一個(gè)FlatButton，我們可以使用FlatButton構(gòu)造函數(shù)。以下是一個(gè)簡(jiǎn)單的示例：
FlatButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
},
child: Text('點(diǎn)擊我'),
)
2.2 常用屬性
FlatButton具有許多可定制的屬性，以下是一些常用的屬性：
-
onPressed: 這是一個(gè)回調(diào)函數(shù)，當(dāng)用戶點(diǎn)擊按鈕時(shí)會(huì)觸發(fā)此函數(shù)。如果此屬性為null，按鈕將被禁用。 -
child: 此屬性定義了按鈕內(nèi)部的內(nèi)容，通常是一個(gè)Text或Icon組件。 -
color: 設(shè)置按鈕的背景顏色。 -
disabledColor: 設(shè)置禁用狀態(tài)下按鈕的背景顏色。 -
highlightColor: 設(shè)置按鈕按下時(shí)的高亮顏色。 -
splashColor: 設(shè)置按鈕點(diǎn)擊時(shí)水波紋的顏色。 -
textColor: 設(shè)置按鈕內(nèi)文本的顏色。 -
padding: 設(shè)置按鈕內(nèi)的填充。
2.3 示例
下面是一個(gè)使用FlatButton的簡(jiǎn)單示例：
FlatButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('FlatButton被點(diǎn)擊了');
},
child: Text('點(diǎn)擊我'),
color: Colors.blue,
textColor: Colors.white,
padding: EdgeInsets.all(16.0),
)
在這個(gè)示例中，我們創(chuàng)建了一個(gè)帶有藍(lán)色背景和白色文本的FlatButton。當(dāng)用戶點(diǎn)擊按鈕時(shí)，控制臺(tái)將輸出“FlatButton被點(diǎn)擊了”。
2.4 已棄用：推薦使用 ElevatedButton 替代。
根據(jù)文檔，F(xiàn)latButton、RaisedButton 和 OutlineButton 已經(jīng)分別被 TextButton、ElevatedButton 和 OutlinedButton 取代。ButtonTheme 也已經(jīng)被 TextButtonTheme、ElevatedButtonTheme 和 OutlinedButtonTheme 取代。請(qǐng)參考：https://docs.flutter.dev/release/breaking-changes/buttons
3. 輪廓按鈕：OutlineButton組件
在本節(jié)中，我們將介紹Flutter中的OutlineButton組件，包括創(chuàng)建OutlineButton、設(shè)置OutlineButton樣式、設(shè)置OutlineButton形狀、設(shè)置OutlineButton點(diǎn)擊事件以及禁用OutlineButton組件等內(nèi)容。
3.1 創(chuàng)建OutlineButton組件
要?jiǎng)?chuàng)建一個(gè)OutlineButton，我們可以使用OutlineButton構(gòu)造函數(shù)。以下是一個(gè)簡(jiǎn)單的示例：
OutlineButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
},
child: Text('點(diǎn)擊我'),
)
3.2 設(shè)置OutlineButton樣式
OutlineButton具有許多可定制的屬性，以下是一些常用的屬性：
-
borderSide: 設(shè)置按鈕邊框的樣式。 -
highlightedBorderColor: 設(shè)置按鈕按下時(shí)邊框的顏色。 -
disabledBorderColor: 設(shè)置禁用狀態(tài)下按鈕邊框的顏色。 -
splashColor: 設(shè)置按鈕點(diǎn)擊時(shí)水波紋的顏色。 -
textColor: 設(shè)置按鈕內(nèi)文本的顏色。 -
padding: 設(shè)置按鈕內(nèi)的填充。
3.3 設(shè)置OutlineButton形狀
我們可以通過shape屬性設(shè)置OutlineButton的形狀。例如，我們可以設(shè)置按鈕的圓角程度：
OutlineButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
},
child: Text('點(diǎn)擊我'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
)
3.4 設(shè)置OutlineButton點(diǎn)擊事件
要設(shè)置OutlineButton的點(diǎn)擊事件，我們需要為onPressed屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
OutlineButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('OutlineButton被點(diǎn)擊了');
},
child: Text('點(diǎn)擊我'),
)
3.5 禁用OutlineButton組件
如果我們想要禁用OutlineButton組件，只需要將onPressed屬性設(shè)置為null即可。
OutlineButton(
onPressed: null,
child: Text('我是禁用的按鈕'),
)
3.6 小結(jié)
在本節(jié)中，我們介紹了OutlineButton組件的基本用法和一些常用屬性。通過使用OutlineButton，我們可以輕松地為Flutter應(yīng)用程序添加帶有邊框的按鈕。
3.7 已棄用：推薦使用 OutlinedButton 替代
根據(jù)文檔，F(xiàn)latButton、RaisedButton 和 OutlineButton 已經(jīng)分別被 TextButton、ElevatedButton 和 OutlinedButton 取代。ButtonTheme 也已經(jīng)被 TextButtonTheme、ElevatedButtonTheme 和 OutlinedButtonTheme 取代。請(qǐng)參考：https://docs.flutter.dev/release/breaking-changes/buttons
4. 圖標(biāo)按鈕：IconButton組件
官方文檔位置：https://api.flutter.dev/flutter/material/IconButton-class.html
在本節(jié)中，我們將介紹Flutter中的IconButton組件，包括創(chuàng)建IconButton、設(shè)置IconButton樣式、設(shè)置IconButton點(diǎn)擊事件以及禁用IconButton組件等內(nèi)容。
4.1 創(chuàng)建IconButton組件
要?jiǎng)?chuàng)建一個(gè)IconButton，我們可以使用IconButton構(gòu)造函數(shù)。
例如：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('IconButton Example')),
body: Center(
child: IconButton(
icon: Icon(Icons.favorite),
// 在這里處理按鈕點(diǎn)擊事件
onPressed: () {
print('IconButton pressed!');
},
color: Colors.red,
iconSize: 48,
tooltip: 'Add to favorites',
),
),
),
);
}
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè) IconButton 組件。
其中 icon 屬性設(shè)置為一個(gè)愛心圖標(biāo)，這里使用的圖標(biāo)是谷歌在Flutter內(nèi)置圖標(biāo)，Icon是圖標(biāo)類，可以參考博文《flutter中使用圖標(biāo)（含自制圖標(biāo)庫方案）》，地址為：https://jclee95.blog.csdn.net/article/details/123309530。
代碼中，我們?cè)O(shè)置了onPressed屬性，當(dāng)圖標(biāo)按鈕被點(diǎn)擊時(shí)，會(huì)在控制臺(tái)打印“IconButton pressed!”。圖標(biāo)的顏色為紅色，大小為48。通過tooltip屬性，我們?cè)O(shè)置了一個(gè)提示信息“Add to favorites”，當(dāng)用戶長(zhǎng)按圖標(biāo)時(shí)，會(huì)顯示這個(gè)提示信息。
點(diǎn)擊后可在控制臺(tái)看見：
4.2 設(shè)置IconButton樣式
IconButton具有許多可定制的屬性，以下是一些常用的屬性：
-
color: 設(shè)置圖標(biāo)的顏色。 -
highlightColor: 設(shè)置按鈕按下時(shí)的高亮顏色。 -
splashColor: 設(shè)置按鈕點(diǎn)擊時(shí)水波紋的顏色。 -
iconSize: 設(shè)置圖標(biāo)的大小。
4.3 設(shè)置IconButton點(diǎn)擊事件
要設(shè)置IconButton的點(diǎn)擊事件，我們需要為onPressed屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
IconButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('IconButton被點(diǎn)擊了');
},
icon: Icon(Icons.favorite),
)
4.4 禁用IconButton組件
如果我們想要禁用IconButton組件，只需要將onPressed屬性設(shè)置為null即可。
IconButton(
onPressed: null,
icon: Icon(Icons.favorite),
)
4.5 小結(jié)
在本節(jié)中，我們介紹了IconButton組件的基本用法和一些常用屬性。通過使用IconButton，我們可以輕松地為Flutter應(yīng)用程序添加圖標(biāo)按鈕。
5. 浮動(dòng)操作按鈕：FloatingActionButton組件
官方文檔位置：https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
在本節(jié)中，我們將介紹Flutter中的FloatingActionButton組件，包括創(chuàng)建FloatingActionButton、設(shè)置FloatingActionButton樣式、設(shè)置FloatingActionButton點(diǎn)擊事件以及禁用FloatingActionButton組件等內(nèi)容。
5.1 創(chuàng)建FloatingActionButton組件
要?jiǎng)?chuàng)建一個(gè)FloatingActionButton，我們可以使用FloatingActionButton構(gòu)造函數(shù)。
例如：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FloatingActionButton Example')),
body: Center(
child: Text('Floating Action Button Example'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print('FloatingActionButton pressed!');
},
child: Icon(Icons.add),
backgroundColor: Colors.blue,
tooltip: 'Add new item',
),
),
);
}
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè) FloatingActionButton 按鈕，并設(shè)置了其 onPressed 屬性，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)在控制臺(tái)打印“FloatingActionButton pressed!”。
按鈕的子組件為一個(gè)加號(hào)圖標(biāo)。按鈕的背景顏色為藍(lán)色。
通過 tooltip 屬性，我們?cè)O(shè)置了一個(gè)提示信息“Add new item”，當(dāng)用戶長(zhǎng)按按鈕時(shí)，會(huì)顯示這個(gè)提示信息。FloatingActionButton 被添加到了 Scaffold 的 floatingActionButton 屬性中，使其在屏幕右下角浮動(dòng)顯示。
5.2 設(shè)置FloatingActionButton樣式
FloatingActionButton具有許多可定制的屬性，以下是一些常用的樣式屬性：
-
backgroundColor: 設(shè)置按鈕的背景顏色。 -
foregroundColor: 設(shè)置按鈕內(nèi)圖標(biāo)的顏色。 -
splashColor: 設(shè)置按鈕點(diǎn)擊時(shí)水波紋的顏色。 -
elevation: 設(shè)置按鈕的陰影大小。 -
shape: 設(shè)置按鈕的形狀。
5.3 設(shè)置FloatingActionButton點(diǎn)擊事件
要設(shè)置FloatingActionButton的點(diǎn)擊事件，我們需要為onPressed屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
FloatingActionButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('FloatingActionButton被點(diǎn)擊了');
},
child: Icon(Icons.add),
)
5.4 禁用FloatingActionButton組件
如果我們想要禁用FloatingActionButton組件，只需要將onPressed屬性設(shè)置為null即可。
FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
)
5.5 小結(jié)
在本節(jié)中，我們介紹了FloatingActionButton組件的基本用法和一些常用屬性。通過使用FloatingActionButton，我們可以輕松地為Flutter應(yīng)用程序添加浮動(dòng)操作按鈕，通常用于執(zhí)行應(yīng)用程序中的主要操作。
6. 彈出菜單按鈕：PopupMenuButton組件
官方文檔位置：https://api.flutter.dev/flutter/material/PopupMenuButton-class.html
在本節(jié)中，我們將介紹Flutter中的PopupMenuButton組件，包括創(chuàng)建PopupMenuButton、設(shè)置PopupMenuButton樣式、設(shè)置PopupMenuButton點(diǎn)擊事件以及自定義PopupMenuButton菜單項(xiàng)等內(nèi)容。
6.1 創(chuàng)建PopupMenuButton組件
要?jiǎng)?chuàng)建一個(gè)PopupMenuButton，我們可以使用PopupMenuButton構(gòu)造函數(shù)。
例如：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('PopupMenuButton Example')),
body: Center(
child: PopupMenuButton<String>(
itemBuilder: (BuildContext context) {
return {'Option 1', 'Option 2', 'Option 3'}
.map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
onSelected: (String value) {
print('Selected: $value');
},
icon: Icon(Icons.more_vert),
tooltip: 'Show menu',
),
),
),
);
}
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè) PopupMenuButton組件。itemBuilder 屬性用于構(gòu)建彈出菜單的選項(xiàng)，我們?cè)谶@里創(chuàng)建了3個(gè)選項(xiàng)，分別為“Option 1”，“Option 2”和“Option 3”。由于設(shè)置了 onSelected 屬性，當(dāng)用戶選擇一個(gè)選項(xiàng)時(shí)，會(huì)在控制臺(tái)打印“Selected: ”和選項(xiàng)的值。設(shè)置了 icon 屬性為一個(gè)垂直三點(diǎn)圖標(biāo)。通過 tooltip 屬性，我們?cè)O(shè)置了一個(gè)提示信息“Show menu”，當(dāng)用戶長(zhǎng)按按鈕時(shí)，會(huì)顯示這個(gè)提示信息。如圖所示：
可以在控制臺(tái)上看到打印結(jié)果：
6.2 設(shè)置PopupMenuButton樣式
PopupMenuButton具有許多可定制的屬性，以下是一些常用的屬性：
-
icon: 設(shè)置按鈕的圖標(biāo)。 -
color: 設(shè)置按鈕的顏色。 -
shape: 設(shè)置按鈕的形狀。 -
elevation: 設(shè)置按鈕的陰影大小。
6.3 設(shè)置 PopupMenuButton 點(diǎn)擊事件
要設(shè)置PopupMenuButton的點(diǎn)擊事件，我們需要為onSelected屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊某個(gè)菜單項(xiàng)時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
value: 'item1',
child: Text('菜單項(xiàng)1'),
),
PopupMenuItem(
value: 'item2',
child: Text('菜單項(xiàng)2'),
),
];
},
onSelected: (value) {
// 在這里處理菜單項(xiàng)點(diǎn)擊事件
print('選中的菜單項(xiàng)：$value');
},
)
6.4 自定義PopupMenuButton菜單項(xiàng)
我們可以通過修改PopupMenuItem的屬性來自定義菜單項(xiàng)的樣式。以下是一些常用的屬性：
-
value: 設(shè)置菜單項(xiàng)的值，當(dāng)用戶點(diǎn)擊該菜單項(xiàng)時(shí)，這個(gè)值將被傳遞給onSelected回調(diào)函數(shù)。 -
height: 設(shè)置菜單項(xiàng)的高度。 -
enabled: 設(shè)置菜單項(xiàng)是否可點(diǎn)擊。 -
textStyle: 設(shè)置菜單項(xiàng)文本的樣式。
6.5 小結(jié)
在本節(jié)中，我們介紹了PopupMenuButton組件的基本用法和一些常用屬性。通過使用PopupMenuButton，我們可以輕松地為Flutter應(yīng)用程序添加彈出菜單按鈕，從而提供更豐富的操作選項(xiàng)。
7. iOS樣式按鈕：CupertinoButton組件
官方文檔位置：https://api.flutter.dev/flutter/cupertino/CupertinoButton-class.html
在本節(jié)中，我們將介紹Flutter中的CupertinoButton組件，包括創(chuàng)建CupertinoButton、設(shè)置CupertinoButton樣式、設(shè)置CupertinoButton點(diǎn)擊事件以及禁用CupertinoButton組件等內(nèi)容。CupertinoButton組件是為iOS設(shè)計(jì)的按鈕樣式，可以幫助我們輕松實(shí)現(xiàn)與iOS原生應(yīng)用類似的界面效果。
7.1 創(chuàng)建 CupertinoButton 組件
要?jiǎng)?chuàng)建一個(gè)CupertinoButton，我們可以使用CupertinoButton構(gòu)造函數(shù)。以下是一個(gè)簡(jiǎn)單的示例：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('CupertinoButton Example')),
body: Center(
child: CupertinoButton(
onPressed: () {
print('CupertinoButton pressed!');
},
color: Colors.blue,
padding:
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
borderRadius: BorderRadius.circular(8.0),
child: const Text('Press me'),
),
),
),
);
}
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè) CupertinoButton 組件。
通過設(shè)置 onPressed屬性，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)在控制臺(tái)打印“CupertinoButton pressed!”。按鈕的子組件為一個(gè)文本組件，顯示“Press me”。
按鈕的背景顏色為藍(lán)色。通過 padding 屬性，我們?cè)O(shè)置了按鈕的內(nèi)邊距為水平 16 像素，垂直 8 像素。設(shè)置了 borderRadius 屬性，使按鈕的圓角半徑為 8 像素。
我們點(diǎn)擊三次，可以在控制臺(tái)上看到：
7.2 設(shè)置CupertinoButton樣式
CupertinoButton具有許多可定制的屬性，以下是一些常用的屬性：
-
color: 設(shè)置按鈕的背景顏色。 -
disabledColor: 設(shè)置按鈕在禁用狀態(tài)下的顏色。 -
padding: 設(shè)置按鈕內(nèi)邊距。 -
borderRadius: 設(shè)置按鈕的圓角半徑。 -
minSize: 設(shè)置按鈕的最小尺寸。 -
pressedOpacity: 設(shè)置按鈕在按下狀態(tài)下的透明度。
7.3 設(shè)置CupertinoButton點(diǎn)擊事件
要設(shè)置CupertinoButton的點(diǎn)擊事件，我們需要為onPressed屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
CupertinoButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('CupertinoButton被點(diǎn)擊了');
},
child: Text('iOS樣式按鈕'),
)
7.4 禁用CupertinoButton組件
如果我們想要禁用CupertinoButton組件，只需要將onPressed屬性設(shè)置為null即可。
CupertinoButton(
onPressed: null,
child: Text('iOS樣式按鈕'),
)
7.5 小結(jié)
在本節(jié)中，我們介紹了CupertinoButton組件的基本用法和一些常用屬性。通過使用CupertinoButton，我們可以輕松地為Flutter應(yīng)用程序添加iOS風(fēng)格的按鈕，從而實(shí)現(xiàn)與iOS原生應(yīng)用類似的界面效果。
8. 文本按鈕：TextButton組件 （沒有輪廓或填充顏色的按鈕）
官方文檔位置：https://api.flutter.dev/flutter/material/TextButton-class.html
在本節(jié)中，我們將介紹Flutter中的TextButton組件，包括創(chuàng)建TextButton、設(shè)置TextButton樣式、設(shè)置TextButton點(diǎn)擊事件以及禁用TextButton組件等內(nèi)容。TextButton是一個(gè)簡(jiǎn)單的文本按鈕，沒有背景和邊框，通常用于輔助操作或次要操作。
8.1 創(chuàng)建TextButton組件
要?jiǎng)?chuàng)建一個(gè)TextButton，我們可以使用TextButton構(gòu)造函數(shù)。以下是一個(gè)簡(jiǎn)單的示例：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('TextButton Example')),
body: Center(
child: TextButton(
onPressed: () {
print('TextButton pressed!');
},
style: TextButton.styleFrom(
foregroundColor: Colors.blue,
padding:
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
),
child: const Text(
'Press me',
style: TextStyle(fontSize: 20),
),
),
),
),
);
}
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè)TextButton組件。
按鈕的子組件為一個(gè)文本組件，顯示“Press me”，字體大小為20像素。通過style屬性和TextButton.styleFrom方法，我們?cè)O(shè)置了按鈕的文本顏色為藍(lán)色，內(nèi)邊距為水平16像素，垂直8像素。
通過設(shè)置 onPressed 屬性，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)在控制臺(tái)打印“TextButton pressed!”：
（這里我點(diǎn)了兩次）
8.2 設(shè)置TextButton樣式
TextButton具有許多可定制的屬性，以下是一些常用的屬性：
-
style: 使用ButtonStyle設(shè)置按鈕的樣式，包括文本顏色、背景顏色、邊框等。 -
onSurface: 設(shè)置按鈕在禁用狀態(tài)下的文本顏色。
以下是一個(gè)設(shè)置TextButton樣式的示例：
TextButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
},
child: Text('TextButton'),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.red),
),
)
8.3 設(shè)置TextButton點(diǎn)擊事件
要設(shè)置TextButton的點(diǎn)擊事件，我們需要為onPressed屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
TextButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('TextButton被點(diǎn)擊了');
},
child: Text('TextButton'),
)
8.4 禁用TextButton組件
如果我們想要禁用TextButton組件，只需要將onPressed屬性設(shè)置為null即可。
TextButton(
onPressed: null,
child: Text('TextButton'),
)
8.5 小結(jié)
在本節(jié)中，我們介紹了TextButton組件的基本用法和一些常用屬性。通過使用TextButton，我們可以輕松地為Flutter應(yīng)用程序添加簡(jiǎn)潔的文本按鈕，實(shí)現(xiàn)清晰且易于理解的界面。
9. 提升按鈕：ElevatedButton組件
在本節(jié)中，我們將介紹Flutter中的ElevatedButton組件，包括創(chuàng)建ElevatedButton、設(shè)置ElevatedButton樣式、設(shè)置ElevatedButton點(diǎn)擊事件以及禁用ElevatedButton組件等內(nèi)容。ElevatedButton是一個(gè)Material Design風(fēng)格的按鈕，它具有浮動(dòng)效果并在按下時(shí)顯示陰影。
9.1 創(chuàng)建ElevatedButton組件
要?jiǎng)?chuàng)建一個(gè)ElevatedButton，我們可以使用ElevatedButton構(gòu)造函數(shù)。以下是一個(gè)簡(jiǎn)單的示例：
ElevatedButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
},
child: Text('ElevatedButton'),
)
9.2 設(shè)置ElevatedButton樣式
ElevatedButton具有許多可定制的屬性，以下是一些常用的屬性：
-
style: 使用ButtonStyle設(shè)置按鈕的樣式，包括背景顏色、邊框、陰影等。 -
onPrimary: 設(shè)置按鈕文本和圖標(biāo)的顏色。 -
elevation: 設(shè)置按鈕的陰影大小。
例如：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('ElevatedButton Example')),
body: Center(
child: ElevatedButton(
onPressed: () {
print('ElevatedButton pressed!');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
padding:
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
child: const Text(
'Press me',
style: TextStyle(fontSize: 20),
),
),
),
),
);
}
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè) ElevatedButton 組件。
按鈕的子組件為一個(gè)文本組件，顯示“Press me”，字體大小為20像素。通過 style 屬性和 ElevatedButton.styleFrom方法，我們?cè)O(shè)置了按鈕的背景顏色為藍(lán)色，內(nèi)邊距為水平 16 像素，垂直 8 像素。此外，我們還設(shè)置了按鈕的形狀為圓角矩形，圓角半徑為 8 像素。
通過設(shè)置 onPressed 屬性，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)在控制臺(tái)打印“ElevatedButton pressed!”。
（這里我點(diǎn)了3次）
9.3 設(shè)置ElevatedButton點(diǎn)擊事件
要設(shè)置ElevatedButton的點(diǎn)擊事件，我們需要為onPressed屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
ElevatedButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('ElevatedButton被點(diǎn)擊了');
},
child: Text('ElevatedButton'),
)
9.4 禁用ElevatedButton組件
如果我們想要禁用ElevatedButton組件，只需要將onPressed屬性設(shè)置為null即可。
ElevatedButton(
onPressed: null,
child: Text('ElevatedButton'),
)
9.5 小結(jié)
在本節(jié)中，我們介紹了ElevatedButton組件的基本用法和一些常用屬性。通過使用ElevatedButton，我們可以輕松地為Flutter應(yīng)用程序添加Material Design風(fēng)格的按鈕，實(shí)現(xiàn)美觀且具有良好交互效果的界面。
10. 輪廓按鈕：OutlinedButton組件
在本節(jié)中，我們將介紹Flutter中的OutlinedButton組件，包括創(chuàng)建OutlinedButton、設(shè)置OutlinedButton樣式、設(shè)置OutlinedButton點(diǎn)擊事件以及禁用OutlinedButton組件等內(nèi)容。OutlinedButton是一個(gè)帶有邊框的按鈕，沒有背景顏色，通常用于次要操作或與其他按鈕區(qū)分。
10.1 創(chuàng)建OutlinedButton組件
要?jiǎng)?chuàng)建一個(gè)OutlinedButton，我們可以使用OutlinedButton構(gòu)造函數(shù)。例如：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('OutlinedButton Example')),
body: Center(
child: OutlinedButton(
onPressed: () {
print('OutlinedButton pressed!');
},
style: OutlinedButton.styleFrom(
foregroundColor: Colors.blue,
side: const BorderSide(color: Colors.blue, width: 2),
padding:
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
child: const Text(
'Press me',
style: TextStyle(fontSize: 20),
),
),
),
),
);
}
}
在這個(gè)示例中，我們創(chuàng)建了一個(gè) OutlinedButton 組件。
按鈕的子組件為一個(gè)文本組件，顯示“Press me”，字體大小為20像素。
通過style屬性和 OutlinedButton.styleFrom方法，我們?cè)O(shè)置了按鈕的文本顏色為藍(lán)色，邊框顏色為藍(lán)色，邊框?qū)挾葹?2 像素，內(nèi)邊距為水平 16 像素，垂直 8 像素。此外，我們還設(shè)置了按鈕的形狀為圓角矩形，圓角半徑為 8 像素。
通過設(shè)置其 onPressed 屬性，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)在控制臺(tái)打印“OutlinedButton pressed!”：
（這里我點(diǎn)擊了2次）
10.2 設(shè)置OutlinedButton樣式
OutlinedButton具有許多可定制的屬性，以下是一些常用的屬性：
-
style: 使用ButtonStyle設(shè)置按鈕的樣式，包括文本顏色、邊框顏色、邊框?qū)挾鹊取?/li> -
onSurface: 設(shè)置按鈕在禁用狀態(tài)下的文本顏色。
以下是一個(gè)設(shè)置OutlinedButton樣式的示例：
OutlinedButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
},
child: Text('OutlinedButton'),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.red),
side: MaterialStateProperty.all(BorderSide(color: Colors.red, width: 2)),
),
)
10.3 設(shè)置OutlinedButton點(diǎn)擊事件
要設(shè)置OutlinedButton的點(diǎn)擊事件，我們需要為onPressed屬性提供一個(gè)回調(diào)函數(shù)。當(dāng)用戶點(diǎn)擊按鈕時(shí)，這個(gè)回調(diào)函數(shù)將被觸發(fā)。
OutlinedButton(
onPressed: () {
// 在這里處理按鈕點(diǎn)擊事件
print('OutlinedButton被點(diǎn)擊了');
},
child: Text('OutlinedButton'),
)
10.4 禁用OutlinedButton組件
如果我們想要禁用OutlinedButton組件，只需要將onPressed屬性設(shè)置為null即可。
OutlinedButton(
onPressed: null,
child: Text('OutlinedButton'),
)
10.5 小結(jié)
在本節(jié)中，我們介紹了OutlinedButton組件的基本用法和一些常用屬性。通過使用OutlinedButton，我們可以輕松地為Flutter應(yīng)用程序添加帶有邊框的按鈕，實(shí)現(xiàn)清晰且易于理解的界面。與其他類型的按鈕相比，輪廓按鈕更適合次要操作或與其他按鈕進(jìn)行區(qū)分。
11. 填充按鈕：FilledButton組件
Flutter 2.6 添加的組件。
在本章節(jié)中，我們將學(xué)習(xí)如何在Flutter中使用FilledButton組件。FilledButton是一種填充按鈕，可以用于各種場(chǎng)景，如提交表單、觸發(fā)事件等。我們將從創(chuàng)建FilledButton組件開始，然后設(shè)置組件樣式，并最后處理事件。
11.1 創(chuàng)建FilledButton組件
首先，我們需要?jiǎng)?chuàng)建一個(gè)FilledButton組件。在Flutter中，你可以使用FilledButton構(gòu)造函數(shù)來創(chuàng)建一個(gè)FilledButton組件。
以下是Flutter官方提供的一個(gè)例子：
import 'package:flutter/material.dart';
/// Flutter code sample for [FilledButton].
void main() {
runApp(const FilledButtonApp());
}
class FilledButtonApp extends StatelessWidget {
const FilledButtonApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
home: Scaffold(
appBar: AppBar(title: const Text('FilledButton Sample')),
body: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(children: <Widget>[
const SizedBox(height: 30),
const Text('Filled'),
const SizedBox(height: 15),
FilledButton(
onPressed: () {},
child: const Text('Enabled'),
),
const SizedBox(height: 30),
const FilledButton(
onPressed: null,
child: Text('Disabled'),
),
]),
const SizedBox(width: 30),
Column(children: <Widget>[
const SizedBox(height: 30),
const Text('Filled tonal'),
const SizedBox(height: 15),
FilledButton.tonal(
onPressed: () {},
child: const Text('Enabled'),
),
const SizedBox(height: 30),
const FilledButton.tonal(
onPressed: null,
child: Text('Disabled'),
),
])
],
),
),
),
);
}
}
11.2 設(shè)置組件樣式
接下來，我們將學(xué)習(xí)如何設(shè)置FilledButton組件的樣式。FilledButton組件提供了一些屬性，如style，可以用來定制組件的樣式。下面是一個(gè)設(shè)置FilledButton樣式的示例：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('FilledButton 樣式示例'),
),
body: Center(
child: FilledButton(
onPressed: () {
print('點(diǎn)擊了 FilledButton');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
textStyle: MaterialStateProperty.all<TextStyle>(
const TextStyle(fontSize: 20),
),
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
),
),
child: const Text('點(diǎn)擊我'),
),
),
),
);
}
}
在這個(gè)示例中，我們?cè)O(shè)置了FilledButton的背景顏色、前景顏色、文本樣式和內(nèi)邊距。
另一個(gè)樣式更加豐富的例子是：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('FilledButton Example')),
body: Center(
child: TextButton(
onPressed: () {
print('FilledButton pressed!');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.orange),
foregroundColor: MaterialStateProperty.all(Colors.white),
padding: MaterialStateProperty.all(
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0)),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
)),
side: MaterialStateProperty.all(
const BorderSide(color: Colors.deepOrange, width: 3)),
elevation: MaterialStateProperty.all(6.0),
shadowColor: MaterialStateProperty.all(Colors.orangeAccent),
),
child: const Text(
'Press me',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
),
),
);
}
}
在這個(gè)示例中，我們?yōu)镕illedButton添加了以下樣式：
- 按鈕背景顏色為橙色。
- 按鈕上的文本顏色為白色，字體大小為20，字體加粗。
- 按鈕內(nèi)邊距為水平24像素，垂直12像素。
- 按鈕形狀為圓角矩形，圓角半徑為12像素。
- 按鈕邊框?yàn)樯畛壬?，寬度?像素。
- 按鈕陰影高度為6.0，陰影顏色為橙色。
其效果為：
11.3 事件處理
最后，我們將學(xué)習(xí)如何處理FilledButton組件的事件。當(dāng)用戶點(diǎn)擊FilledButton時(shí)，可以通過onPressed屬性來處理事件。下面是一個(gè)處理FilledButton點(diǎn)擊事件的示例：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('FilledButton 事件示例'),
),
body: Center(
child: FilledButton(
onPressed: () {
print('點(diǎn)擊了 FilledButton');
// 在這里處理點(diǎn)擊事件
},
child: const Text('點(diǎn)擊我'),
),
),
),
);
}
}
在這個(gè)示例中，我們?cè)?code>onPressed屬性中添加了一個(gè)回調(diào)函數(shù)，用于處理FilledButton的點(diǎn)擊事件。文章來源：http://www.zghlxwxcb.cn/news/detail-502348.html
11.4 小結(jié)
我們?cè)谶@個(gè)小節(jié)中介紹了如何在 Flutter 中使用 FilledButton 組件，包括如何創(chuàng)建 FilledButton 組件，設(shè)置組件樣式，以及處理事件。文章來源地址http://www.zghlxwxcb.cn/news/detail-502348.html
到了這里，關(guān)于Flutter 組件（三）按鈕類組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
