【交互 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 中已经详细讲过了。

目录
相关文章
|
20小时前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
60 8
|
21小时前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
56 1
|
20天前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
4月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
175 0
|
5月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
42 0
|
6月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
6月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
100 0
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
|
6月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
73 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
6月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
81 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
6月前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。