Flutter可滑动删除组件插件 flutter_dismissible_tile 的使用

flutter_dismissible_tile 是一个用于实现滑动删除功能的Flutter插件。它提供了丰富的配置选项，可以自定义背景颜色、覆盖层、动画效果等。

主要特性

• 支持从左到右（LTR）和从右到左（RTL）滑动触发动作。
• 动画背景在滑动时显示。
• 支持多种自定义参数，如背景颜色、覆盖层、动画时长等。

使用步骤

1. 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_dismissible_tile: any

2. 导入包

在你的 Dart 文件中导入该包：

import 'package:flutter_dismissible_tile/flutter_dismissible_tile.dart';

3. 示例代码

以下是一个完整的示例，展示了如何使用 DismissibleTile 组件来创建一个支持左右滑动删除的列表项。

import 'package:flutter/material.dart';
import 'package:flutter_dismissible_tile/flutter_dismissible_tile.dart';

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

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        shrinkWrap: true,
        physics: const BouncingScrollPhysics(),
        padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 20),
        children: List.generate(
          10,
          (index) => DismissibleTile(
            key: UniqueKey(),
            padding: const EdgeInsets.symmetric(vertical: 8),
            borderRadius: const BorderRadius.all(Radius.circular(16)),
            delayBeforeResize: const Duration(milliseconds: 500),
            ltrBackground: const ColoredBox(color: Colors.yellowAccent),
            rtlBackground: const ColoredBox(color: Colors.greenAccent),
            ltrDismissedColor: Colors.lightBlueAccent,
            rtlDismissedColor: Colors.redAccent,
            rtlOverlayIndent: 28,
            confirmDismiss: (direction) => Future.delayed(
              const Duration(seconds: 1),
              () => true,
            ),
            ltrOverlay: const _SlidableOverlay(
              title: 'Add',
              iconData: Icons.add_circle_outline,
            ),
            ltrOverlayDismissed: const _DismissedOverlay(title: 'Added'),
            rtlOverlay: const _SlidableOverlay(
              title: 'Delete',
              iconData: Icons.delete_forever,
            ),
            rtlOverlayDismissed: const _DismissedOverlay(title: 'Deleted'),
            child: Container(
              height: 175,
              alignment: Alignment.center,
              decoration: const BoxDecoration(
                color: Colors.greenAccent,
                borderRadius: BorderRadius.all(Radius.circular(16)),
              ),
              child: Text(
                'Dismissible Tile ${index + 1}',
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 28,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _SlidableOverlay extends StatelessWidget {
  const _SlidableOverlay({
    required this.title,
    required this.iconData,
  });

  final String title;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(
          iconData,
          color: Colors.white,
        ),
        const SizedBox(width: 4),
        Text(
          title,
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontSize: 22,
            color: Colors.white,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }
}

class _DismissedOverlay extends StatelessWidget {
  const _DismissedOverlay({
    required this.title,
  });

  final String title;

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      textAlign: TextAlign.center,
      style: const TextStyle(
        fontSize: 22,
        color: Colors.white,
        fontWeight: FontWeight.w500,
      ),
    );
  }
}

4. 参数说明

以下是 DismissibleTile 的主要参数及其说明：

• key: 每个 DismissibleTile 需要一个唯一的 Key。
• padding: 内边距。
• borderRadius: 圆角半径。
• ltrBackground: 左滑时显示的背景。
• rtlBackground: 右滑时显示的背景。
• ltrDismissedColor: 左滑时显示的颜色。
• rtlDismissedColor: 右滑时显示的颜色。
• ltrOverlay: 左滑时显示的覆盖层。
• rtlOverlay: 右滑时显示的覆盖层。
• confirmDismiss: 确认是否可以删除的回调函数。
• onResize: 当组件大小发生变化时的回调。
• onDismissed: 当组件被删除时的回调。
• delayBeforeResize: 删除前的延迟时间。
• resizeDuration: 缩放动画的持续时间。
• movementDuration: 移动动画的持续时间。
• dismissThresholds: 触发删除的阈值。

通过这些参数，你可以灵活地定制 DismissibleTile 的行为和外观。