Flutter SnackBar 控件詳細介紹

SnackBar 是 Flutter Material Design 中的一個輕量級消息提示控件，用于向用戶顯示簡短的操作反饋信息。它通常出現在屏幕底部，短暫顯示后自動消失。

基本特性

1. 位置：默認顯示在屏幕底部
2. 持續時間：短暫顯示后自動消失（默認4秒）
3. 外觀：遵循 Material Design 設計規范
4. 交互：可包含一個操作按鈕

基本用法

1. 顯示簡單 SnackBar

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('這是一條消息'),),
);

2. 自定義持續時間

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('這條消息會顯示更久'),duration: Duration(seconds: 5), // 自定義顯示時間),
);

主要屬性

屬性	類型	說明
content	Widget	必需，SnackBar的主要內容，通常是Text
duration	Duration	顯示時長，默認4秒
action	SnackBarAction	可選的操作按鈕
backgroundColor	Color	背景顏色
elevation	double	陰影高度
shape	ShapeBorder	自定義形狀
behavior	SnackBarBehavior	顯示行為（fixed或floating）
width	double	僅當behavior為floating時有效，設置寬度
padding	EdgeInsets	內邊距
dismissDirection	DismissDirection	滑動關閉的方向

高級用法

1. 帶操作的 SnackBar

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('文件已刪除'),action: SnackBarAction(label: '撤銷',textColor: Colors.white,onPressed: () {// 執行撤銷操作},),),
);

2. 自定義樣式

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('自定義樣式SnackBar'),backgroundColor: Colors.indigo,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),behavior: SnackBarBehavior.floating,margin: EdgeInsets.all(10),),
);

3. 浮動式 SnackBar

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('浮動式SnackBar'),behavior: SnackBarBehavior.floating,margin: EdgeInsets.all(20), // 設置外邊距),
);

SnackBarAction 屬性

當需要用戶交互時，可以使用 SnackBarAction：

屬性	類型	說明
label	String	按鈕文本
onPressed	VoidCallback	點擊回調
textColor	Color	文本顏色
disabledTextColor	Color	禁用狀態文本顏色

實際應用場景

1. 操作反饋：文件保存成功、發送完成等
2. 錯誤提示：表單驗證失敗、網絡錯誤
3. 撤銷操作：刪除后提供撤銷選項
4. 狀態通知：下載進度、同步狀態

注意事項

1. 上下文要求：必須在包含 Scaffold 的上下文中使用
2. 顯示限制：同一時間只能顯示一個 SnackBar
3. 生命周期：在頁面切換時，SnackBar 會自動消失（除非使用 ScaffoldMessenger）
4. 無障礙：確保消息對屏幕閱讀器友好

完整示例

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'SnackBar Demo',home: Scaffold(appBar: AppBar(title: Text('SnackBar Demo')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () => _showSimpleSnackBar(context),child: Text('簡單SnackBar'),),ElevatedButton(onPressed: () => _showActionSnackBar(context),child: Text('帶操作的SnackBar'),),ElevatedButton(onPressed: () => _showStyledSnackBar(context),child: Text('自定義樣式SnackBar'),),],),),),);}void _showSimpleSnackBar(BuildContext context) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('這是一個簡單的SnackBar消息'),duration: Duration(seconds: 2),),);}void _showActionSnackBar(BuildContext context) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('文件已刪除'),duration: Duration(seconds: 3),action: SnackBarAction(label: '撤銷',onPressed: () {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('撤銷操作已執行')),);},),),);}void _showStyledSnackBar(BuildContext context) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('自定義樣式SnackBar'),backgroundColor: Colors.purple,shape: StadiumBorder(),behavior: SnackBarBehavior.floating,margin: EdgeInsets.all(20),duration: Duration(seconds: 2),),);}
}

建議

1. 消息簡潔：保持消息簡短，一般不超過兩行
2. 操作明確：如果有操作按鈕，確保標簽清晰易懂
3. 適當時長：重要消息可適當延長顯示時間
4. 避免濫用：不要過度使用，以免打擾用戶
5. 考慮主題：SnackBar 樣式應與應用主題協調

SnackBar 是 Flutter 中實現輕量級用戶反饋的理想選擇，合理使用可以顯著提升用戶體驗。

---

結束語
Flutter是一個由Google開發的開源UI工具包，它可以讓您在不同平臺上創建高質量、美觀的應用程序，而無需編寫大量平臺特定的代碼。我將學習和深入研究Flutter的方方面面。從基礎知識到高級技巧，從UI設計到性能優化，歡飲關注一起討論學習，共同進入Flutter的精彩世界！