首页 > 其他分享 >一统天下 flutter - widget 列表类: Dismissible - 滑动删除

一统天下 flutter - widget 列表类: Dismissible - 滑动删除

时间:2023-04-26 17:25:47浏览次数:49  
标签:index widget const key 删除 Dismissible context 滑动 flutter

源码 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

标签:index,widget,const,key,删除,Dismissible,context,滑动,flutter
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_list_dismissible.html

相关文章

  • 一统天下 flutter - widget 列表类: DataTable - 数据表格
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget列表类:DataTable-数据表格示例如下:lib\widget\list\data_table.dart/**DataTable-数据表格*/import'dart:math';import'package:flutter/material.dart';import......
  • Android原生项目引入Flutter
    原文地址www.jianshu.com前言目前Flutter可以说是非常火热了,多次更新过后也越来越稳定,受到了很多开发者的青睐。不过纯Flutter开发还是存在一定成本和风险的,尤其是对于规模稍大一些的项目,可能更加适合的是将Flutter用于项目中的某一个模块,因此我们有必要了解一下如何在原生......
  • iFlutter - 加速Flutter开发
    iFlutter是一款辅助Flutter开发的IDEA插件插件安装插件已上传官方Plugins仓库,可在IDEAPlugins界面搜索iFlutter下载iFlutter生态欢迎PR、issues、advice,一起共建Flutter生态Github该文档不再更新,请直接查看最新文档Wiki功能说明资源文件管理依赖树生成D......
  • listwidget 实现横向流式排布关键以及过滤注意事项
    listWidget里面设置以下属性:this->setViewMode(QListView::IconMode);this->setResizeMode(QListView::Adjust);this->setMovement(QListView::Static);流式排布过滤时需要注意:在流式排布中过滤item采用隐藏的方式时,因为采用的是IconMode模式,所以偶尔会出现排版......
  • Qt 将 widget 打印到 pdf
    一开始直接render到QPrinter里发现渲染出的图很小,原因是没有把两者的尺寸对齐到一致这里我们按printer和widget的比例缩放:defexportToPDF(w:QWidget,file_name):printer=QPrinter()printer.setPageSize(QPrinter.A4)printer.setOutputFormat(......
  • 一统天下 flutter - widget Sliver: SliverGrid - 网格(需要在 CustomScrollView 中使
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverGrid-网格(需要在CustomScrollView中使用)示例如下:lib\widget\sliver\sliver_grid.dart/**SliverGrid-网格(需要在CustomScrollView中使用)*/import'dart:......
  • 一统天下 flutter - widget Sliver: SliverAppBar/FlexibleSpaceBar - 可展开/收缩的
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverAppBar/FlexibleSpaceBar-可展开/收缩的标题栏(需要在CustomScrollView中使用)示例如下:lib\widget\sliver\sliver_app_bar.dart/**SliverAppBar/FlexibleSpaceBar......
  • 一统天下 flutter - widget Sliver: SliverToBoxAdapter - 为不可滚动组件提供 sliver
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverToBoxAdapter-为不可滚动组件提供sliver效果示例如下:lib\widget\sliver\sliver_to_box_adapter.dart/**SliverToBoxAdapter-为不可滚动组件提供sliver效果......
  • 一统天下 flutter - widget Sliver: NestedScrollView - 为可滚动组件提供 sliver 效
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:NestedScrollView-为可滚动组件提供sliver效果示例如下:lib\widget\sliver\nested_scroll_view.dart/**NestedScrollView-为可滚动组件提供sliver效果*/import......
  • 一统天下 flutter - widget Sliver: SliverPersistentHeader - 自定义可展开/收缩的标
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverPersistentHeader-自定义可展开/收缩的标题栏示例如下:lib\widget\sliver\sliver_persistent_header.dart/**SliverPersistentHeader-自定义可展开/收缩的标题栏......