一統天下 flutter - widget 列表類: Dismissible - 滑動刪除

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd

一統天下 flutter - widget 列表類: Dismissible - 滑動刪除

示例如下:

lib\widget\list\dismissible.dart

/*
 * Dismissible - 滑動刪除
 *
 * 支持左滑/右滑/上滑/下滑刪除，一般在列表中使用，當然也可以不依託列表使用
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class DismissibleDemo extends StatefulWidget {
  const DismissibleDemo({Key? key}) : super(key: key);

  @override
  _DismissibleDemoState createState() => _DismissibleDemoState();
}

class _DismissibleDemoState extends State<DismissibleDemo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title")),
      backgroundColor: Colors.orange,
      body: const _MyWidget(),
    );
  }
}

class _MyWidget extends StatefulWidget {
  const _MyWidget({super.key});

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<_MyWidget> {
  List<int> items = List<int>.generate(100, (int index) => index);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (BuildContext context, int index) {
        return Dismissible(
          /// 必須要指定 key
          key: ValueKey<int>(items[index]),

          /// 滑動刪除支持的滑動方向（vertical, horizontal, endToStart, startToEnd, up, down, none）
          direction: DismissDirection.horizontal,
          /// 正常狀態下顯示的內容
          child: ListTile(
            title: MyText('item ${items[index]}',),
          ),
          /// item 的背景內容（右滑刪除操作時）
          background: Container(
            color: Colors.red,
            alignment: Alignment.centerLeft,
            child: const MyTextSmall("右滑刪除"),
          ),
          /// item 的背景內容（左滑刪除操作時）
          secondaryBackground: Container(
            color: Colors.green,
            alignment: Alignment.centerRight,
            child: const MyTextSmall("左滑刪除"),
          ),
          /// 滑動刪除時，item 的偏移係數（偏移量爲偏移係數 * item 的高）
          crossAxisEndOffset: 0.0,

          /// 刪除前的回調，用於確認是否真的刪除
          confirmDismiss: (DismissDirection direction) async {
            var result = await showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  content: const Text("確認刪除嗎？"),
                  actions: <Widget>[
                    ElevatedButton(
                      onPressed: () => Navigator.of(context).pop(true),
                      child: const Text("刪除"),
                    ),
                    ElevatedButton(
                      onPressed: () => Navigator.of(context).pop(false),
                      child: const Text("取消"),
                    ),
                  ],
                );
              },
            );
            /// 返回 true 則會觸發 onDismissed() 回調
            return result;
          },
          /// 刪除後的回調
          onDismissed: (DismissDirection direction) {
            setState(() {
              items.removeAt(index);
            });
          },

          /// 刪除後，刪除項的下面的項會移上來，這裏用於設置這個動畫的時長
          resizeDuration: const Duration(milliseconds: 300),
          /// 刪除後，刪除項的下面的項會移上來，這個動畫效果的每一幀都會觸發這個事件
          onResize: () {
            /// log("onResize");
          },
          /// 滑動的進度發生變化時會觸發此事件
          onUpdate: (DismissUpdateDetails details) {
            log("onUpdate, progress:${details.progress}, reached:${details.reached}");
          },
          /// 滑動刪除動畫的時長（快速慣性滑動時此值無效）
          movementDuration: const Duration(milliseconds: 200),
          /// 用於指定拖動到什麼程度時觸發 onDismissed
          dismissThresholds: const {
            DismissDirection.startToEnd: 0.8, /// 右滑時，在超過 80% 的位置鬆開手則會觸發 onDismissed（快速慣性滑動時此值無效）
            DismissDirection.endToStart: 0.3  /// 左滑時，在超過 30% 的位置鬆開手則會觸發 onDismissed（快速慣性滑動時此值無效）
          },
        );
      },
    );
  }
}

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd