免费资源部落

这篇文章主要讲解了“FlutterFlow如何实现滑动显隐层”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“FlutterFlow如何实现滑动显隐层”吧！

实现思路

思路其实非常简单，监听横向滑动的手势事件，根据偏移量让上层组件进行偏移。当放手时，根据偏移量是否达到宽度的一半，使用动画进行移出或者关闭。

偏移的实现方式有很多，但需要自由地进行布局和矩阵变换、透明度，并且需要支持动画的变化，Flow 组件是一个非常不错的选择。 Flow 组件可以通过代理类对子组件进行自定义布局，灵活性极强；如果是 CustomPaint 是 绘制之王 可以绘制万物，那么 Flow 就是 布局之王，可以摆放万物。

另外，在滑动过程中需要注意限制偏移量，使偏移量在 0~size.width 之内；当放手时，通过动画控制器来驱动动画，使用补间让偏移量运动到 0 (打开) 或 size.width(关闭) 。当关闭时，在右下角展示一个按钮用于点击展开：

布局的代码实现

Flow 组件布局最重要的是实现 FlowDelegate，在其中的 paintChildren 方法中实现布局的逻辑。和 CustomPainter 类似，FlowDelegate 的实现类也可以通过 super 构造为 repaint 入参设置可监听对象。可监听对象的变化会触发 paintChildren 重新绘制：

SwipeFlowDelegate 实现类再构造时传入可监听对象 offsetX，在绘制索引为 1 的孩子时，通过 Matrix4 进行偏移。这样只要在手势水平滑动中，更新 offsetX 值即可。另外，可以根据 offsetX.value 是否达到 size.width 知道是否是关闭状态，如果已经关闭，绘制按钮。

classSwipeFlowDelegateextendsFlowDelegate{finalValueListenable<double>offsetX;SwipeFlowDelegate(this.offsetX):super(repaint:offsetX);@overridevoidpaintChildren(FlowPaintingContextcontext){Sizesize=context.size;context.paintChild(0);Matrix4offsetM4=Matrix4.translationValues(offsetX.value,0,0);context.paintChild(1,transform:offsetM4);//偏移量对于父级尺寸if(offsetX.value==size.width){Matrix4m1=Matrix4.translationValues(size.width/2-30,size.height/2-30,0);context.paintChild(2,transform:m1);Matrix4m2=Matrix4.translationValues(size.width/2-30,-(size.height/2-50),0);context.paintChild(3,transform:m2);}}@overrideboolshouldRepaint(covariantSwipeFlowDelegateoldDelegate){returnoldDelegate.offsetX.value!=offsetX.value;}}

从这里可以看出，FlowDelegate 的最大优势是可以自定义孩子的绘制与否，还可以在绘制时通过 Matrix4 对孩子进行矩阵变换，还有可选参数可以控制透明度。接下来使用 Flow 组件时，提供 SwipeFlowDelegate ，并在 children 列表中依次放入子组件。其中前两个组件由外界传入，分别是底组件和上层组件，这样组件的布局就完成了，接下来监听事件，更新 factor 即可：

finalValueNotifier<double>factor=ValueNotifier(0);Flow(delegate:SwipeFlowDelegate(factor),children:[widget.content,widget.overflow,GestureDetector(onTap:open,child:constIcon(Icons.menu_open_outlined,color:Colors.white)),GestureDetector(onTap:(){Navigator.of(context).pop();},child:constIcon(Icons.close,color:Colors.white))],)手势的监听

这里手势的处理是非常简单的，通过 GestureDetector 监听水平拖拽事件。在 onHorizontalDragUpdate 中根据拖拽的偏移量更新 factor 的值，其中通过 .clamp(0, widget.width) 可以限制偏移量的取值区间。

@overrideWidgetbuild(BuildContextcontext){returnGestureDetector(behavior:HitTestBehavior.opaque,onHorizontalDragUpdate:_onHorizontalDragUpdate,onHorizontalDragEnd:_onHorizontalDragEnd,child:SizedBox(height:MediaQuery.of(context).size.height,width:widget.width,child:Flow(delegate://同上,略...);}void_onHorizontalDragUpdate(DragUpdateDetailsdetails){doublecur=factor.value+details.delta.dx;factor.value=cur.clamp(0,widget.width);}void_onHorizontalDragEnd(DragEndDetailsdetails){if(factor.value>widget.width/2){close();}else{open();}}

最后在 _onHorizontalDragEnd 回调中，根据当前偏移量是否大于一般宽度，决定关闭还是打开。期间过程使用动画进行偏移量的过渡变化。

动画的使用

动画的使用，主要是通过 AnimationController 动画控制器来驱动数值的变化；在放手时 Tween 创建补间动画器，监听动画器数值的变化更新偏移量。这样偏移量就可以在指定时间内，在两个值之间渐变，从而产生动画效果。比如抬手时,open 方法是让偏移量从当前位置变化到 0 :

class_ScrollHideWrapperStateextendsState<ScrollHideWrapper>withSingleTickerProviderStateMixin{lateAnimationController_ctrl;finalValueNotifier<double>factor=ValueNotifier(0);@overridevoidinitState(){super.initState();_ctrl=AnimationController(duration:constDuration(milliseconds:200),vsync:this,);}@overrideWidgetbuild(BuildContextcontext){//略同...}//动画关闭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 自定义布局的灵活性非常强，很多疑难杂症，都可以使用它来完成。

感谢各位的阅读，以上就是“FlutterFlow如何实现滑动显隐层”的内容了，经过本文的学习后，相信大家对FlutterFlow如何实现滑动显隐层这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！