在移動應用開發中，滑動刪除是一種常見的交互方式。Flutter 提供了一個強大的小部件 Dismissible，使得實現這一功能變得非常簡單。本文將介紹 Dismissible 的主要屬性及其使用方法。
1. Dismissible 簡介
Dismissible 是一個 Flutter 小部件，可以包裹其他小部件，使其能夠通過滑動手勢被刪除。常見的用例包括待辦事項列表、郵件列表等，在用戶滑動某一項時，可以進行刪除、歸檔等操作。
2. Dismissible 的主要屬性
key: 每個Dismissible組件必須提供一個唯一的key，用于標識該項。child:Dismissible包裹的子組件，即你想要實現滑動刪除功能的組件。background: 在滑動過程中顯示的背景組件。通常用于顯示刪除等操作的提示。secondaryBackground: 從右向左滑動時顯示的背景組件。direction: 允許滑動的方向。可以是DismissDirection.horizontal、DismissDirection.vertical、DismissDirection.endToStart、DismissDirection.startToEnd。confirmDismiss: 滑動時的確認回調，可以在這里彈出確認對話框或進行其他判斷邏輯。onDismissed: 確認刪除后的回調函數。
3. Dismissible 的使用示例
下面是一個簡單的示例，展示了如何在一個待辦事項列表中使用 Dismissible 實現滑動刪除功能。
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('Dismissible 示例'),),body: TodoList(),),);}
}class TodoList extends StatefulWidget {_TodoListState createState() => _TodoListState();
}class _TodoListState extends State<TodoList> {final List<String> items = List<String>.generate(10, (i) => "待辦事項 ${i + 1}");Widget build(BuildContext context) {return ListView.builder(itemCount: items.length,itemBuilder: (context, index) {final item = items[index];return Dismissible(key: Key(item),background: Container(color: Colors.green, child: Icon(Icons.check)),secondaryBackground: Container(color: Colors.red, child: Icon(Icons.delete)),onDismissed: (direction) {setState(() {items.removeAt(index);});ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("$item 已刪除")),);},confirmDismiss: (direction) {return showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: Text("確認刪除"),content: Text("你確定要刪除 $item 嗎？"),actions: <Widget>[TextButton(onPressed: () => Navigator.of(context).pop(false),child: Text("取消"),),TextButton(onPressed: () => Navigator.of(context).pop(true),child: Text("確認"),),],);},);},child: ListTile(title: Text('$item'),),);},);}
}
4. 代碼解析
- 關鍵屬性解析：
key: 使用item作為每個Dismissible項的唯一標識符。background和secondaryBackground: 分別定義滑動方向不同的背景。onDismissed: 當滑動結束并確認刪除后，更新狀態并顯示提示信息。confirmDismiss: 在刪除前彈出確認對話框。
5. 總結
Dismissible 小部件使得在 Flutter 中實現滑動刪除變得非常方便。通過合理配置其屬性，可以實現各種定制化的交互效果。希望這篇文章能夠幫助你更好地理解和使用 Dismissible。如果你有任何問題或建議，歡迎在下方留言討論。
