【交互 widget】 Flutter Dismissible

简介: 【交互 widget】 Flutter Dismissible

image.png


前天我也中招了,还好有些存货,不然就要断更了。希望都快点好起来吧。

Dismissible,一个可以用拖动的方式触发删除的 widget。

Dismissible 介绍

这是一个 StatefulWidget ,通过组合很多基础 widget 来实现功能。比如手势识别使用了GestureDetector,滑动效果使用了 SlideTransition,裁剪使用了 ClipRect 等等。这些基础 widget 之前都讲过了。有了这些组件的基础,学习 Dismissible 会很轻松。

使用 Dismissible

const Dismissible({
    required Key key,
    required this.child,
    this.background,
    this.secondaryBackground,
    this.confirmDismiss,
    this.onResize,
    this.onUpdate,
    this.onDismissed,
    this.direction = DismissDirection.horizontal,
    this.resizeDuration = const Duration(milliseconds: 300),
    this.dismissThresholds = const <DismissDirection, double>{},
    this.movementDuration = const Duration(milliseconds: 200),
    this.crossAxisEndOffset = 0.0,
    this.dragStartBehavior = DragStartBehavior.start,
    this.behavior = HitTestBehavior.opaque,
  }
复制代码

虽然参数比较多,但是不复杂。

key 是必须的

在之前的文章  flutter key 中已经详细解释过 key 作用。当 一个 widget 有很多兄弟的时候,key 可以唯一标识他的身份。因为我们要删除节点,删除后,其它的兄弟节点要重新找位置,如果没有 key,位置就都错了。

background 是背景 widget

默认向右滑的时候,就会显示 background widget。如果没有设置 secondaryBackground 向左滑也显示。

secondaryBackground 是背景 widget

默认向左滑的时候,就会显示 secondaryBackground widget。如果设置 secondaryBackground,必须设置 background。

confirmDismiss

typedef ConfirmDismissCallback = Future<bool?> Function(DismissDirection direction);
复制代码

给 widget 一个决定是否响应删除的机会。在  Future resolve 之前,widget 不能被再次拖动。如果返回  true ,onResize,onDismissed 会被执行。返回 false, widget 回到原来的位置。

onResize

当 widget size 改变的时候调用 onResize。比如当有 item 被删除的时候,size 就会改变。

onUpdate

wiget 被拖动的时候调用。例如,此回调可用于根据当前是否达到关闭阈值来更改 background widget 的颜色。

onDismissed

当 widget 被移除,并完成 resize 的时候调用 onDismissed。这时应该 setState 更新数据。

direction

决定如何滑动可以删除 item。默认是水平向左或向右。在水平方向也可以做限定,可以指定 DismissDirection.startToEnd,或DismissDirection.endToStart。这样就只有一个方向可以删除。

resizeDuration

resizeDuration 如果为 null,size 变化不会有动画,会立即调用 onDismissed,默认是  300ms。

dismissThresholds

final Map<DismissDirection, double> dismissThresholds;
复制代码

这是一个 map,可以设置各个方向的 值,默认是 0.4。表示 只有超 40% 距离才能触发 dismiss。如果设置为 1 ,表示在这个方向上不能触发 dismiss,即使 direction 已经允许了这个方向。

movementDuration

如果没有 dismiss 比如 confirmDismiss 返回 false,movementDuration 就是 widget 返回原来位置的时间。默认 200ms。不能为空,可以设置为 Duration.zero。

crossAxisEndOffset

如果 crossAxisEndOffset 不为 0,当滑动的时候,widgt 会沿着 cross 轴方向慢慢移动。正负决定了移动的方向。

dragStartBehavior

dragStartBehavior  有两个值, start,down。down 会让 dragStart 更早的发生。如果可以拖动的距离比较短可以设置此值。否则就默认的 start 就好。

behavior 在前面的 Listener 中已经详细讲过了。

目录
相关文章
|
2天前
|
容器
Flutter Widget 解析
Flutter Widget 解析
|
2天前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
1月前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
76 8
|
1月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
103 2
|
1月前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
86 1
|
2月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
1月前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
75 0
|
5月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
199 0
|
6月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
52 0
|
7月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析