在移动应用开发中，滑动删除是一种常见的交互方式。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 {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Dismissible 示例'),
),
body: TodoList(),
),
);
}
}
class TodoList extends StatefulWidget {
@override
_TodoListState createState() => _TodoListState();
}
class _TodoListState extends State<TodoList> {
final List<String> items = List<String>.generate(10, (i) => "待办事项 ${i + 1}");
@override
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。如果你有任何问题或建议，欢迎在下方留言讨论。