解决原生横滑scrollView和Flutter 纵滑CustomScroll的冲突

前言


最近项目中在横向滑动的PageViewController(WMPageController)里嵌入了Flutter 的 CustomScrollView,原本会觉得一切ok,却出现了一个致命的问题:安卓嵌入之后滑动流程稳定,没有任何问题,iOS 嵌入之后出现Flutter 页面滑动卡顿、不流畅,体现在触发flutter 列表滑动的同时,会触发原生横滑,且必须垂直滑动(无一点左右的滑动偏移)才会稳定触发Flutter 列表的滑动,否则容易触发左右横滑,所以我们习惯了单手用手机的人,根本无法顺畅滑动。如下面的gif(其实我已经很努力的在上下滑了,很明显上下滑动的距离大于水平滑动的距离,用户的用意也应该是要上下滑动,但是却触发了横滑):

1595228716860927.png

解决方式


首先触摸flutter的页面,原生的UIScrollView的panGesture也会收到触摸事件,导致UIScrollView的手势生效,开始我想着如果能再UIScrollView的手势代理方法中区分出Flutter CustomScrollView的手势,然后再做调整。但是这条路是错误的,因为Flutter的滑动手势并不是采用系统提供的手势,在断点时发现,触发之后,并没有相关flutter 上的 系统手势类。所以我改变了思路用以下去解决这个问题:

  1. 如果当前触摸在FlutterView上,我们的子类UIScrollView 手势就不接收touch事件,控制其手势不会生效;
  2. 继承FLBFlutterViewContainer父类,重写touches相关方法,手动调整UIScrollView 的contentOffset(注意: 我们混合栈使用的是闲鱼的FlutterBoost, FLBFlutterViewContainer继承自FlutterViewController)

上代码:

  1. 自定义继承自UIScrollView的子类,并且实现手势代理方法,控制Touch的传递。如果touch的View是FlutterView 我们的ScrollView就不接收这个touch事件。

    @interface WMScrollView()
    
    @end
    
    @implementation WMScrollView
    
    #pragma mark - 
    
    - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
        if ([NSStringFromClass(touch.view.class) isEqualToString:@"FlutterView"]) {
            return NO;
        }
        return YES;
    }
    
    @end
    
  1. 自定义一个继承自FLBFlutterViewContainer的子类,重写Touches方法,在touchBegan方法的时候,我们让自定的ScrollView手势不生效;在touchMoved的时候,我们干预计算触摸方向的识别,如果在纵滑<5 && 横滑大于2的时候我们默认用户想要横滑 横滑距离大于纵滑的距离我们认为用户想要横滑(判断横滑距离大于纵滑距离如下代码),故手动改变ScrollView的contentOffset,否则的话手势继续不生效, flutterView 生效;在touchEnd和touchCancel的情况下,我们判断当前的contentOffset,如果距离大于当前页距离的1/3, 跳转到下一页,如果距离小于上一页距离的2/3, 跳转到前一页;负责调整offset回到当前页面的起始位置。

    @implementation DDScrollFlutterViewContainer
    
    - (void)viewDidLoad {
        [super viewDidLoad];
     }
    
    #pragma mark - UITouches
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
        [super touchesBegan:touches withEvent:event];
        [self touchesBegan:touches];
    }
    
    - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
        [self touchMoveWithTouch:touches event:event];
    }
    
    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
        [self touchEnd:touches event:event isCanceled:NO];
    }
    
    - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
        [self touchEnd:touches event:event isCanceled:YES];
    }
    
    - (void)touchesBegan:(NSSet *)touches {
        UIScrollView *superView = (UIScrollView *)self.view.superview.superview;
        superView.panGestureRecognizer.enabled = NO;
        self.hasOffset = NO;
        self.lastLocation = [touches.anyObject locationInView:self.view];
    }
    
    - (void)touchMoveWithTouch:(NSSet *)touches event:(UIEvent *)event{
        UITouch *touch = [touches anyObject];
        CGPoint previoursLocation = self.lastLocation;
        CGPoint location = [touch locationInView:self.view];
        CGFloat deltax = fabs(location.x - previoursLocation.x);
        CGFloat deltay = fabs(location.y - previoursLocation.y);
        UIScrollView *superView = (UIScrollView *)self.view.superview.superview;
        if (deltax > deltay) {
            CGPoint offset = superView.contentOffset;
            [superView.delegate scrollViewWillBeginDragging:superView];
            CGPoint previours = [touch previousLocationInView:self.view];
            [superView setContentOffset:CGPointMake(offset.x - (location.x - previours.x), offset.y)];
            self.hasOffset = YES;
        } else {
            if (!self.hasOffset) {
                [super touchesMoved:touches withEvent:event];
            }
        }
    }
    
    - (void)touchEnd:(NSSet *)touches event:(UIEvent *)event isCanceled:(BOOL)isCanceled {
        UIScrollView *superView = (UIScrollView *)self.view.superview.superview;
        if (self.hasOffset) {
            CGPoint offset = superView.contentOffset;
            CGFloat offsetX = offset.x;
            if (offsetX > (1 * self.view.width+ self.view.width * 1 / 3)) {
                [superView setContentOffset:CGPointMake(2*self.view.width, offset.y) animated:YES];
            } else if (offsetX <=  self.view.width * 2 / 3) {
                [superView setContentOffset:CGPointMake(0, offset.y) animated:YES];
            } else {
                [superView setContentOffset:CGPointMake(self.view.width, offset.y) animated:YES];
            }
            [superView.delegate scrollViewDidEndDecelerating:superView];
            [self.nextResponder touchesEnded:touches withEvent:event];
        }
    isCanceled ? [super touchesCancelled:touches withEvent:event] : [super touchesEnded:touches withEvent:event];
        superView.panGestureRecognizer.enabled = YES;
    }
    
    
    @end
    

处理之后的效果:

flutter_and_ios_matter_sh2.gif

总结


这个问题也是困扰了许久,因为在安卓上表现良好,而在iphone上表现极其的不舒适,所以最初考虑到这也是Flutter团队对于CustomScrollView 原生渲染适配的问题,但是既然他们适配不好,我们就需要手动的去适配。但是从解决办法的探索中,我们发现Flutter的手势并不是通过iOS原生的手势实现的,而是自己的一套手势识别。而且FlutterViewController 的touches事件是被重写了,因为假如你重写了touches的方法,没有调用父类方法,那么会发现flutter 不能滑动,所以判断flutter的滑动事件Touches方法也是参与其中,所以记得调用父类方法。而我们重写了Touches的事件也是区分了一下用户意图要滑动的方向,相当于做了个手势的方向的识别。

你可能感兴趣的:(解决原生横滑scrollView和Flutter 纵滑CustomScroll的冲突)