实现滑动删除

“滑动删除”模式在许多移动应用中很常见。例如，在编写电子邮件应用程序时，您可能希望允许用户滑动删除电子邮件消息以将其从列表中删除。

Flutter 通过提供 Dismissible 组件简化了此任务。按照以下步骤学习如何实现滑动删除：

1. 创建项目列表。
2. 将每个项目包装在 Dismissible 组件中。
3. 提供“遗留”指示器。

首先，创建一个项目列表。有关如何创建列表的详细说明，请遵循使用长列表 教程。

在此示例中，您需要使用 20 个示例项目。为简便起见，生成一个字符串列表。

final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

在屏幕上显示列表中的每个项目。用户暂时还无法滑动删除这些项目。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

在此步骤中，使用 Dismissible 组件，让用户能够从列表中滑动删除项目。

在用户滑动删除项目后，从列表中删除该项目并显示一个 SnackBar。在实际应用中，您可能需要执行更复杂的逻辑，例如从 Web 服务或数据库中删除项目。

更新 itemBuilder() 函数以返回 Dismissible 组件：

itemBuilder: (context, index) {
  final item = items[index];
  return Dismissible(
    // 每个 Dismissible 必须包含一个 Key。Key 允许 Flutter 唯一标识组件。
    key: Key(item),
    // 提供一个函数，告诉应用在项目被滑动删除后该做什么。
    onDismissed: (direction) {
      // 从数据源中删除该项目。
      setState(() {
        items.removeAt(index);
      });

      // 然后显示一个 SnackBar。
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('$item dismissed')));
    },
    child: ListTile(
      title: Text(item),
    ),
  );
},

目前，应用允许用户从列表中滑动删除项目，但它没有给出当用户这样做时会发生什么的视觉指示。为了提供项目被移除的提示，在用户将项目从屏幕上滑出时显示“遗留”指示器。在本例中，指示器为红色背景。

要添加指示器，请向 Dismissible 提供 background 参数。

  ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('$item dismissed')));
},
// 当项目被滑动删除时显示红色背景。
background: Container(color: Colors.red),
child: ListTile(
  title: Text(item),
),

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// MyApp 是一个 StatefulWidget。这允许在删除项目时更新组件的状态。
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(
              // 每个 Dismissible 必须包含一个 Key。Key 允许 Flutter 唯一标识组件。
              key: Key(item),
              // 提供一个函数，告诉应用在项目被滑动删除后该做什么。
              onDismissed: (direction) {
                // 从数据源中删除该项目。
                setState(() {
                  items.removeAt(index);
                });

                // 然后显示一个 SnackBar。
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('$item dismissed')));
              },
              // 当项目被滑动删除时显示红色背景。
              background: Container(color: Colors.red),
              child: ListTile(
                title: Text(item),
              ),
            );
          },
        ),
      ),
    );
  }
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。