Flutter 滑动删除功能实现

如何在Flutter中实现类似iOS的滑动删除功能？我尝试使用Dismissible组件，但发现删除动画不够流畅，而且滑动触发区域太小。有没有更好的解决方案可以自定义滑动背景、调整触发灵敏度，并支持左右双向滑动删除？另外，在ListView.builder中使用Dismissible时，如何避免item重建导致的性能问题？

3 回复

实现 Flutter 的滑动删除功能，可以使用 Dismissible 小部件。以下是一个简单的示例：

import 'package:flutter/material.dart';

class SwipeToDelete extends StatelessWidget {
  final List<String> items = List.generate(10, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('滑动删除示例')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: Key(items[index]),
            onDismissed: (direction) {
              items.removeAt(index);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('${items[index]} 删除成功'))
              );
            },
            child: ListTile(
              title: Text(items[index]),
            ),
          );
        },
      ),
    );
  }
}

这段代码中，每个列表项都可以通过左右滑动来触发删除操作。Dismissible 包裹了可滑动的子组件，当用户滑动时会触发 onDismissed 回调，从而从列表中移除对应的数据，并显示一个 SnackBar 提示。

如果需要更复杂的动画效果或定制滑动按钮，可以通过设置 background 或 secondaryBackground 属性来自定义滑动时的 UI。

更多关于Flutter 滑动删除功能实现的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现滑动删除功能可以借助 Dismissible 小部件。以下是一个简单的实现步骤：

  1. 引入 Dismissible
    使用 Dismissible 包裹需要滑动删除的组件，设置 direction 属性定义滑动方向（如水平方向 DismissDirection.horizontal）。

  2. 定义 onDismissed 回调
    通过 onDismissed 回调捕获滑动删除后的操作，比如从列表中移除对应数据。

  3. 添加背景删除按钮
    使用 background 或 secondaryBackground 属性设置滑动时显示的删除按钮或提示。

示例代码：

import 'package:flutter/material.dart';

class SlidableList extends StatelessWidget {
  final List<String> items = List.generate(20, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Dismissible(
          key: Key(items[index]),
          direction: DismissDirection.endToStart,
          background: Container(
            color: Colors.red,
            alignment: Alignment.centerRight,
            padding: EdgeInsets.only(right: 16),
            child: Icon(Icons.delete, color: Colors.white),
          ),
          onDismissed: (direction) {
            items.removeAt(index);
            ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Deleted")));
          },
          child: ListTile(title: Text(items[index])),
        );
      },
    );
  }
}

此代码实现了基本的滑动删除功能，并在删除后显示一个提示。

在 Flutter 中实现滑动删除功能可以使用 Dismissible 组件，这是一个内置支持滑动删除的 Widget。以下是实现代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List.generate(20, (i) => "Item ${i + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('滑动删除示例')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return Dismissible(
            key: Key(item),
            background: Container(
              color: Colors.red,
              alignment: Alignment.centerLeft,
              child: Icon(Icons.delete, color: Colors.white),
            ),
            secondaryBackground: Container(
              color: Colors.green,
              alignment: Alignment.centerRight,
              child: Icon(Icons.archive, color: Colors.white),
            ),
            onDismissed: (direction) {
              setState(() {
                items.removeAt(index);
              });
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text("$item 已删除")),
              );
            },
            confirmDismiss: (direction) async {
              if (direction == DismissDirection.startToEnd) {
                return await showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text("确认删除"),
                    content: Text("确定要删除 $item 吗？"),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(false),
                        child: Text("取消"),
                      ),
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(true),
                        child: Text("删除"),
                      ),
                    ],
                  ),
                );
              }
              return true;
            },
            child: ListTile(
              title: Text(item),
            ),
          );
        },
      ),
    );
  }
}

关键点说明：

  1. Dismissible 必须有一个唯一的 key
  2. background 和 secondaryBackground 分别设置左右滑动时的背景
  3. onDismissed 回调处理删除逻辑
  4. confirmDismiss 可用于添加确认对话框

你可以根据需要调整滑动方向、背景颜色和删除逻辑。

回到顶部