Flutter Flow实现滑动显隐层示例详解
作者:张风捷特烈 发布时间:2022-01-29 23:50:56
1. 前言
最近要实现一个小需求,涵盖了很多知识点,比如手势、动画、布局等。挺有意思的,写出来和大家分享一下。如下所示,分为上下两层;当左右滑时,上层会随偏移量而平移,从而让上层产生滑动手势显隐的效果:
标题
这里上层通过不透明度 0.2 的蓝色示意,实际使用时可以改为透明色。很多直播间的浮层就是这种交互逻辑,通过右滑来隐藏浮层。
直播 | 右滑中 |
---|---|
2. 实现思路
思路其实非常简单,监听横向滑动的手势事件,根据偏移量让上层组件进行偏移。当放手时,根据偏移量是否达到宽度的一半,使用动画进行移出或者关闭。
偏移的实现方式有很多,但需要自由地进行布局和矩阵变换、透明度,并且需要支持动画的变化,Flow 组件是一个非常不错的选择。 Flow 组件可以通过代理类对子组件进行自定义布局,灵活性极强;如果是 CustomPaint
是 绘制之王 可以绘制万物,那么 Flow
就是 布局之王,可以摆放万物。三年前写过一篇介绍 Flow 使用的文章: 《【Flutter高级玩法- Flow 】我的位置我做主》 。 本文就不对 Flow 的基础使用进行介绍了。
另外,在滑动过程中需要注意限制偏移量,使偏移量在 0~size.width
之内;当放手时,通过动画控制器来驱动动画,使用补间让偏移量运动到 0
(打开) 或 size.width
(关闭) 。当关闭时,在右下角展示一个按钮用于点击展开:
3. 布局的代码实现
Flow 组件布局最重要的是实现 FlowDelegate
,在其中的 paintChildren
方法中实现布局的逻辑。和 CustomPainter
类似,FlowDelegate
的实现类也可以通过 super
构造为 repaint
入参设置可监听对象。可监听对象的变化会触发 paintChildren
重新绘制:
SwipeFlowDelegate
实现类再构造时传入可监听对象 offsetX
,在绘制索引为 1
的孩子时,通过 Matrix4
进行偏移。这样只要在手势水平滑动中,更新 offsetX 值即可。另外,可以根据 offsetX.value
是否达到 size.width
知道是否是关闭状态,如果已经关闭,绘制按钮。
class SwipeFlowDelegate extends FlowDelegate {
final ValueListenable<double> offsetX;
SwipeFlowDelegate(this.offsetX) : super(repaint: offsetX);
@override
void paintChildren(FlowPaintingContext context) {
Size size = context.size;
context.paintChild(0);
Matrix4 offsetM4 = Matrix4.translationValues(offsetX.value, 0, 0);
context.paintChild(1, transform: offsetM4);
// 偏移量对于父级尺寸
if (offsetX.value == size.width) {
Matrix4 m1 = Matrix4.translationValues(size.width / 2 - 30, size.height / 2 - 30, 0);
context.paintChild(2, transform: m1);
Matrix4 m2 = Matrix4.translationValues(size.width / 2 - 30, -(size.height / 2 - 50), 0);
context.paintChild(3, transform: m2);
}
}
@override
bool shouldRepaint(covariant SwipeFlowDelegate oldDelegate) {
return oldDelegate.offsetX.value != offsetX.value;
}
}
从这里可以看出,FlowDelegate
的最大优势是可以自定义孩子的绘制与否,还可以在绘制时通过 Matrix4
对孩子进行矩阵变换,还有可选参数可以控制透明度。接下来使用 Flow
组件时,提供 SwipeFlowDelegate
,并在 children 列表中依次放入子组件。其中前两个组件由外界传入,分别是底组件和上层组件,这样组件的布局就完成了,接下来监听事件,更新 factor
即可:
final ValueNotifier<double> factor = ValueNotifier(0);
Flow(
delegate: SwipeFlowDelegate(factor),
children: [
widget.content,
widget.overflow,
GestureDetector(
onTap: open,
child: const Icon(Icons.menu_open_outlined, color: Colors.white)),
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: const Icon(Icons.close, color: Colors.white))
],
)
4. 手势的监听
这里手势的处理是非常简单的,通过 GestureDetector
监听水平拖拽事件。在 onHorizontalDragUpdate
中根据拖拽的偏移量更新 factor
的值,其中通过 .clamp(0, widget.width)
可以限制偏移量的取值区间。
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onHorizontalDragUpdate: _onHorizontalDragUpdate,
onHorizontalDragEnd: _onHorizontalDragEnd,
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: widget.width,
child: Flow( delegate:// 同上,略...
);
}
void _onHorizontalDragUpdate(DragUpdateDetails details) {
double cur = factor.value + details.delta.dx;
factor.value = cur.clamp(0, widget.width);
}
void _onHorizontalDragEnd(DragEndDetails details) {
if (factor.value > widget.width / 2) {
close();
} else {
open();
}
}
最后在 _onHorizontalDragEnd
回调中,根据当前偏移量是否大于一般宽度,决定关闭还是打开。期间过程使用动画进行偏移量的过渡变化。
5. 动画的使用
动画的使用,主要是通过 AnimationController
动画控制器来驱动数值的变化;在放手时 Tween
创建补间动画器,监听动画器数值的变化更新偏移量。这样偏移量就可以在指定时间内,在两个值之间渐变,从而产生动画效果。比如抬手时,open
方法是让偏移量从当前位置变化到 0
:
class _ScrollHideWrapperState extends State<ScrollHideWrapper> with SingleTickerProviderStateMixin {
late AnimationController _ctrl;
final ValueNotifier<double> factor = ValueNotifier(0);
@override
void initState() {
super.initState();
_ctrl = AnimationController(
duration: const Duration(milliseconds: 200),
vsync: this,
);
}
@override
Widget build(BuildContext context) {
// 略同...
}
// 动画关闭
Future<void> close() async {
Animation<double> anim = Tween<double>(begin: factor.value, end: widget.width).animate(_ctrl);
anim.addListener(() => factor.value = anim.value);
await _ctrl.forward(from: 0);
}
// 动画打开
Future<void> open() async {
Animation<double> anim = Tween<double>(begin: factor.value, end: 0).animate(_ctrl);
anim.addListener(() => factor.value = anim.value);
await _ctrl.forward(from: 0);
}
}
如果想让动画的变化非匀速,可以使用 Curve 来控制动画曲线。这样,基于 Flow 实现的自定义布局,就可以根据手势和动画,完成特定的交互功能。从这里可以看出 Flow 自定义布局的灵活性非常强,很多疑难杂症,都可以使用它来完成。
比如企业微信中:侧滑展示左栏,而且上层不会全部消失,通过 Flow 来自定义布局就很容易实现。大家可以基于本文,自己实现一下作为练习。那本文就到这里,谢谢观看 ~
标题 | 关闭 |
---|---|
来源:https://juejin.cn/post/7205959141562023997
猜你喜欢
- Spring Boot 的启动原理可以概括为以下几个步骤:加载 Spring Boot 应用程序的启动类根据启动类所在的包路径扫描相关的类根
- @RequestBody,@RequestParam和@Param区别@Param@Param是mybatis中的注解,用注解来简化xml配
- 1.pom.xml<?xml version="1.0" encoding="UTF-8"?&
- 前台代码: <asp:Button ID="Button1" runat="server" T
- 1.给定时间戳返回指定的时间格式private string StampToDate(string timeStamp,string for
- 我以2018版的intellij idea为例一.创建JavaWeb1.第一步点击左上角的File-->New-->Projec
- 本文实例讲述了C#日期格式字符串的相互转换操作。分享给大家供大家参考,具体如下:方法一:Convert.ToDateTime(string)
- 流程引擎对象和其配置对象都是activiti的核心对象一、activiti的简单使用流程activiti在工作时,一般有以下几个步骤:创建一
- Spring Boot可以和大部分流行的测试框架协同工作:通过Spring JUnit创建单元测试;生成测试数据初始化数据库用于测试;Spr
- 本文实例讲述了C#实现简单屏幕监控的方法。分享给大家供大家参考。具体如下:这是一段C#编写的屏幕监控代码,可以自动对屏幕进行截图,软件自身隐
- 什么是指纹解锁技术根据人的指纹来验证是否能够解锁的技术,类似于通过输入密码来解锁,都是通过一定的数字特征来解锁。指纹解锁技术原理理解首先说明
- 一、spring声明式事务1.1 spring的事务管理器spring没有直接管理事务,而是将管理事务的责任委托给JTA或相应的持久性机制所
- 本人从开始用Android Studio到现在已经快一年了吧,在我刚开始用的时候Android Studio还是1.2的版本。当时安装会因为
- 一、引言以前在饿了么上面订餐的时候,曾经看到过这么一个特效,就是将商品加入订单时,会有一个小球呈抛物线状落入购物车中,然后购物车中的数量会改
- 一直使用Eclipse环境开发Android,也尝鲜使用过Android Studio去开发,各种IDE配合Android SDK及SDK原
- 一、前言Android 实现卫星式菜单也叫弧形菜单,主要要做的工作如下:1.动画的处理2.自定义ViewGroup来实现卫星式菜单View(
- 1. 通过设置采样率压缩res资源图片压缩 decodeResource public Bitmap decodeSampled
- 本文实例讲述了Android开发实现模仿微信小窗口功能。分享给大家供大家参考,具体如下:运用方法:将显示窗口的风格 设置为对话框风格即可具体
- 一、Jsoup的主要功能Jsoup是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API
- 文件上传也是常见的功能,趁着周末,用Spring boot来实现一遍。前端部分前端使用jQuery,这部分并不复杂,jQuery可以读取表单