Flutter实现电影院选座效果

·  阅读 2592

原文地址:juejin.cn/post/695046…

转载请署名,严禁抄袭

直接上效果图:

竖屏:

RPReplay_Final1618209116.gif

横屏:

imageonline-rotategif-7582021.gif

初始化自适应屏幕的放大缩小效果:

RPReplay_Final1618278037 (1).gif

导语

接到了一个仿电影院的需求,上周几乎是找遍了百度,谷歌,stackoverflow。 均没有找到用flutter实现的效果, 那只能自己写一个了。

本文只讲思路,具体实现还需各位看官自己动手。只要看懂了下面的思路,实现起来非常简单

布局分析

  1. 中间的座位=>矩阵,通过Column嵌套Row实现,不能通过GridView实现(滑动冲突,下文会说明)

  2. 左侧导航条=>一个简单的Column(不能用ListView,同样会造成滑动冲突)

交互分析&实现

放大缩小拖动效果:

对于放大缩小拖动的效果,Flutter现在有自带的组件InteractiveViewer

通过这个组件可完美实现放大缩小效果。组件属性这边不展开解释,比较简单,可点击上面链接自行了解。

这里讲下两个重点属性:

一、回调事件

  1. 交互开始 onInteractionStart
  2. 交互更新 onInteractionUpdate
  3. 交互结束 onInteractionEnd

二、变换控制器 transformationController

可以通过这个类来通过代码控制放大缩小效果


导航条跟随座位表放大缩小拖动:

左边导航条跟随中间座位的放大缩小,以及行数定位不偏离

上面讲的那些东西一般大家都能想到,也很好实现。这个交互效果的真正难点是这个跟随滑动效果

由于左边的导航条是固定在最左侧的,而座位表可以全屏拖动,所以这座位表和导航条不能放在一个缩放组件里,

不然座位表放大的时候,直接将导航条放大出屏幕了。

所以我们的思路就是将导航条和座位表作为Stack的子组件,然后座位表实现放大缩小效果,并且让导航条能跟随座位表进行放大缩小。

笔者在这试了很多方法:

方法一:

左侧导航栏和中间座位表均使用InteractiveViewer,

然后通过InteractiveViewer的回调事件和变换控器来实现效果同步

结果:

失败,transformationController的原理是Matrix4泛型的ValueNotifier(四维矩阵),简单的移动放大还能实现,完全克隆一个放大缩小拖动效果,笔者做不到。。各位如果线性代数非常牛逼的可以试试。

方法二:

flutter有一个同步滚动组件叫linked_scroll_controller 他能将两个scrollController绑定在一起,实现同步滚动。

所以让左侧导航栏使用ListView,中间座位表使用InteractiveViewer嵌套GridView, 然后将ListView和GridView的ScrollController绑定在一起实现同步滚动。

结果:

失败,InteractiveViewer的滑动是通过Matrix4实现的,和ListView的滑动冲突。 同步滚动实现了,但是放大缩小的拖动无法执行。

方法三:

使用InteractiveViewer是逃不过的,不然自己实现放大缩小效果太头疼, 如果能像上面的linked_scroll_controller一样,将InteractiveViewer的缩放效果复制到另外一个InteractiveViewer中去,那就完美了。

就是方法一的思路,但是用InteractiveViewer开放的接口和控制器,无法完成,这个时候就需要去阅读理解InteractiveViewer的源码,看看有没有什么启发。

@override
  Widget build(BuildContext context) {
    Widget child = Transform(
      transform: _transformationController.value,
      child: KeyedSubtree(
        key: _childKey,
        child: widget.child,
      ),
    );

    if (!widget.constrained) {
      child = OverflowBox(
        alignment: Alignment.topLeft,
        minWidth: 0.0,
        minHeight: 0.0,
        maxWidth: double.infinity,
        maxHeight: double.infinity,
        // maxHeight: 220.w,
        child: child,
      );
    }

    if (widget.clipBehavior != Clip.none) {
      child = ClipRRect(
        clipBehavior: widget.clipBehavior,
        child: child,
      );
    }

    // A GestureDetector allows the detection of panning and zooming gestures on
    // the child.
    return Listener(
      key: _parentKey,
      onPointerSignal: _receivedPointerSignal,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        // Necessary when panning off screen.
        dragStartBehavior: DragStartBehavior.start,
        onScaleEnd: onScaleEnd,
        onScaleStart: onScaleStart,
        onScaleUpdate: onScaleUpdate,
        child: child,
      ),
    );
  }

不看不知道,一看吓一跳,其实InteractiveViewer已经将所有的方法都替我们封装好了。

注意上面的GestureDetector,整个InteractiveViewer的手势交互方法,其实就是onScaleEnd,onScaleStart,onScaleUpdate这三个方法。

那我们只需要将座位表组件回调的的这三个方法中的参数,传入到导航条组件中去就行,然后删掉导航条组件的GestureDetector,让导航条组件只接受来自座位表组件的手势交互参数。

我们只需重写两个InteractiveViewer,一个为主组件(座位表),一个为从组件(导航条),并开放InteractiveViewerState,当座位表组件回调手势的三个方法时,通过key将三个方法的参数传入导航条组件就OK。

  _onInteractionUpdate(ScaleUpdateDetails details) {
    if (controller.fromInteractiveViewKey.currentState != null) {
      controller.fromInteractiveViewKey.currentState.onScaleUpdate(details);
    }
  }

  _onInteractionStart(ScaleStartDetails details) {
    if (controller.fromInteractiveViewKey.currentState != null) {
      controller.fromInteractiveViewKey.currentState.onScaleStart(details);
    }
  }

  _onInteractionEnd(ScaleEndDetails details) {
    if (controller.fromInteractiveViewKey.currentState != null) {
      controller.fromInteractiveViewKey.currentState.onScaleEnd(details);
    }
  }

完全无需任何加工,将参数照搬照抄的传入导航条组件。我们就能实现同步缩放拖动的效果!

这里必须特别注意:座位表和导航条组件的单个item的高度必须完全相同,包括margin,padding,不然还是会出现错位现象

至此,最大的难点同步缩放和滑动就解决了。


底部弹框悬浮在座位表上方:

点击座位后弹出底部弹框,遮盖部分座位表,但是座位表能持续向上拖动显示完最后一行的数据

这个乍一看没啥难的,但细细一想也有点复杂。

首先

明确座位表的显示区域是包含底部弹框的,因为底部弹框是悬浮在座位表上面的,

那么我们就只能使用margin而不是padding,所以根据设计图底部弹框的height,我们将marginBottom设成这个height就行,但是会有个问题:

当整个座位表放大margin部分也会同步放大,这样就会导致放的越大,座位表距离下面空出的间距就越大。

解决思路:

我们需要拿到当前放大的倍数,动态调整margin,

当前放大X倍,原始margin为Y,则当前放大后的margin=Y/X

Y已知,我们只需要知道X就行。

但是在_onInteractionUpdate接口中,X并非当前放大几倍,而是较上次缩放后的缩放倍数。

即:初始1.0倍,

第一次放大至2倍,接口回调的放大倍数为2

第二次放大至3倍,接口回调的放大倍数为1.5(较第一次又放大了1.5倍)。

并且更严重的是当放大到maxScale后,接口仍会持续回调放大倍数。这就很困扰我们,

后来阅读源码后发现,我们所要的较原始放大倍数的当前放大倍数参数在InteractiveViewer类中的

// Return a new matrix representing the given matrix after applying the given
  // scale.
  Matrix4 _matrixScale(Matrix4 matrix, double scale) {
    if (scale == 1.0) {
      return matrix.clone();
    }
    assert(scale != 0.0);

    // Don't allow a scale that results in an overall scale beyond min/max
    // scale.
    final double currentScale =
        _transformationController.value.getMaxScaleOnAxis();
    final double totalScale =currentScale * scale;
    //改了算法
    // final double totalScale = math.max(
    //   currentScale * scale,
    //   // Ensure that the scale cannot make the child so big that it can't fit
    //   // inside the boundaries (in either direction).
    //   math.max(
    //     _viewport.width / _boundaryRect.width,
    //     _viewport.height / _boundaryRect.height,
    //   ),
    // );
    final double clampedTotalScale = totalScale.clamp(
      widget.minScale,
      widget.maxScale,
    );
    
    
    widget.scaleCallback?.call(clampedTotalScale);
    
    
    final double clampedScale = clampedTotalScale / currentScale;
    return matrix.clone()..scale(clampedScale);
  }

注意上面的scaleCallback,这是笔者自己实现的回调方法,其中的clampedTotalScale就是我们想要的较初始缩放倍数的当前放大倍数,

即:初始1.0倍,

第一次放大至2倍,接口回调的放大倍数为2

第二次放大至3倍,接口回调的放大倍数为3(较初始放大了3倍)。

且clampedTotalScale永远在minScale和maxScale的区间内。拿来即用非常方便。


上面代码中有一段算法被我注释掉了,这段代码的效果是:

当InteractiveViewer中的child已经完全显示的时候,则无法再缩小,即minScale不仅仅取决于我们设置的值, 还取决于InteractiveViewer的child显示效果,这里我不需要这个限制,则将他注释掉了。

其实如果要完美实现UI给出的效果,有很多地方要用到margin,比如座位表的上下左右margin,只要拿到了上面的clampedTotalScale,均可以动态计算,很方便。

横竖屏适配效果

上面的gif图有横屏效果,横竖屏切换用的也是官方API,OrientationBuilder,这个用起来也很简单。 这里讲一个UI适配的注意事项:

由于笔者项目用了ScreenUtil(UI自适应),所以在竖屏的时候,传入竖屏的UI尺寸图,且尺寸结尾使用.w进行适配,当横屏时,传入横屏的UI尺寸图(其实就是将竖屏的width和height倒置),然后尺寸结尾使用.h进行适配。这样就基本能完美适配横竖屏,剩余的细节就可以微调。

初始放大倍数

如上面的效果图, 在第一次进入或横竖屏切换时,当座位表布局过多(默认显示不下时),尽可能缩小以显示更多的内容(下限缩小至minScale),当座位表布局过少(默认显示时屏幕很空),尽可能放大直至显示满屏幕(上限放大至maxScale)。

上面效果可总结为:在尽可能显示完全的前提下尽可能大。

InteractiveViewer并没有初始放大倍数参数,默认进入都是放大1.0倍。

这里就需要我们自己来算出这个初始放大倍数。

计算

(如果有用screenUtil,以下计算注意区分横竖屏,横屏时适配结尾用.w,竖屏用.h,其中异形屏的padding不用区分横竖屏,系统会自动更改)

  1. 整个座位表的显示区域,

    屏幕高-异形屏上下padding-竖屏时底部悬浮框的height(横屏悬浮框如果不在底部,则为0)-标题栏高度以及自己加的一些其他布局的高度。

    屏幕宽-异形屏左右padding-横屏时右侧悬浮框width(竖屏时悬浮框如不在右侧,则为0)- 导航条宽度(这个导航栏宽度也需要根据放大缩小倍数动态计算)-其他自己加的布局宽。

  2. 计算初始放大倍数(1.0)下的座位表item的width和height以及padding,这个直接按设计图的就行。

  3. 获得当前座位表的x轴和y轴。即每行几个座位,一共有几行座位。

  4. 计算假设要将所有座位表显示下,每个item的width和height。

    即用上面1.所得的座位表显示区域的宽高分别除以座位表的x和y,

  5. 将2.的width除以4.width,即如X轴完全显示下需要缩放的值SX,

    将2.的height除以4.height,即如Y轴完全显示下需要缩放的值SY,

  6. 比较SX和SY两值,取小值defaultS(在尽可能显示完全的前提下尽可能大)

  7. 如果defaultS在minScale和maxScale区间内,则取defaultS,反之取区间边界值。

缩放

用transformationController将InteractiveViewer缩放到defaultS

// 座位表
mainTransformationController.value = Matrix4.identity()..scale(defaultS);
// 导航条
fromTransformationController.value = Matrix4.identity()..scale(defaultS);

这里注意座位表和导航条都要进行缩放。

缩放动态margin

最后别忘记将各种需要动态计算的margin也缩放到defaultS值

如果有横竖屏切换效果的,在每次横竖屏切换的时候都动态计算初始放大值,

需要注意,每次计算的时候都要将动态计算的margin置为初始值(即当缩放大小为1.0时的margin值)。

结语

至此所有效果都实现了,剩余的相信大家自己也能搞定,非常的简单。

由于这个组件的灵活性和公司项目保密性,代码就不传了,如果还有什么问题可以留言。

有时候想不出来就看源码,立马就会醍醐灌顶。

分类:
Android
标签:
分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改