實現滑動關閉
如何實現滑動以刪除或移除內容。
“滑動刪除”模式在許多移動應用中都很常見。例如,在編寫電子郵件應用時,你可能希望允許使用者滑動郵件以將其從列表中刪除。
Flutter 透過提供 Dismissible 元件讓這一任務變得簡單。按照以下步驟瞭解如何實現滑動刪除:
- 建立列表項。
- 使用
Dismissible元件包裹每個列表項。 - 提供“滑走後”的背景指示器。
1. 建立列表項
#首先,建立列表項。關於如何建立列表的詳細說明,請參考處理長列表方案。
建立一個數據源
#在這個示例中,你需要 20 個示例項來操作。為簡單起見,生成一個字串列表。
dart
final items = List<String>.generate(20, (i) => 'Item ${i + 1}');
將資料來源轉換為列表
#在螢幕上顯示列表中的每一項。此時,使用者還無法滑動這些列表項。
dart
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
2. 使用 Dismissible 元件包裹每個列表項
#在此步驟中,使用 Dismissible 元件讓使用者能夠從列表中滑動移除某一項。
當用戶滑走列表項後,從列表中刪除該項並顯示一個 snackbar。在真實的應用中,你可能需要執行更復雜的邏輯,例如從 Web 服務或資料庫中刪除該項。
更新 itemBuilder() 函式以返回 Dismissible 元件。
dart
itemBuilder: (context, index) {
final item = items[index];
return Dismissible(
// Each Dismissible must contain a Key. Keys allow Flutter to
// uniquely identify widgets.
key: Key(item),
// Provide a function that tells the app
// what to do after an item has been swiped away.
onDismissed: (direction) {
// Remove the item from the data source.
setState(() {
items.removeAt(index);
});
// Then show a snackbar.
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text('$item dismissed')));
},
child: ListTile(title: Text(item)),
);
},
3. 提供“滑走後”的背景指示器
#目前,應用允許使用者透過滑動將列表項移除,但沒有給出操作後的視覺反饋。為了提示使用者列表項已被刪除,可以在滑動移除列表項時顯示一個“滑走後”的背景指示器。在本例中,該指示器為一個紅色背景。
要新增指示器,請為 Dismissible 提供 background 引數。
dart
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('$item dismissed')));
},
// Show a red background as the item is swiped away.
background: Container(color: Colors.red),
child: ListTile(
title: Text(item),
),
互動示例
#import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
// MyApp is a StatefulWidget. This allows updating the state of the
// widget when an item is removed.
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
MyAppState createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
final items = List<String>.generate(20, (i) => 'Item ${i + 1}');
@override
Widget build(BuildContext context) {
const title = 'Dismissing Items';
return MaterialApp(
title: title,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return Dismissible(
// Each Dismissible must contain a Key. Keys allow Flutter to
// uniquely identify widgets.
key: Key(item),
// Provide a function that tells the app
// what to do after an item has been swiped away.
onDismissed: (direction) {
// Remove the item from the data source.
setState(() {
items.removeAt(index);
});
// Then show a snackbar.
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text('$item dismissed')));
},
// Show a red background as the item is swiped away.
background: Container(color: Colors.red),
child: ListTile(title: Text(item)),
);
},
),
),
);
}
}