Flutter和iOS手勢衝突怎麼辦，‘涼拌嗎？’

時間 2019-12-04

原文原文鏈接

具體問題

iOS和flutter都有手勢處理，可是在某些狀況下可能產生手勢衝突，好比iOS有一個抽屜手勢，而flutter有一個水平的滑動手勢，這個時候就會產生衝突的問題，具體問題看下面狀況。javascript

iOS抽屜手勢php

原生抽屜

一、需求場景

綠色部分爲放置flutter的控制器(ContentViewController)，當在屏幕左側滑動的時候，會劃出iOS的抽屜控制器(LeftTableViewController)，而且此抽屜手勢也是iOS控制。
iOS抽屜手勢的代碼網上不少，此處是從項目裏面抽出來的，就再也不贅述，代碼地址java

二、flutter頁面

假設咱們flutter頁面是有橫向滑動的view，須要集成到iOS裏面去，以下圖:git

flutter頁面

flutter頁面主要代碼:github

Column(children: <Widget>[
          Container(
              child: ListView.separated(
                itemCount: 10,
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                separatorBuilder: (BuildContext context, int index) {
                  return Container(
                    width: 5,
                  );
                },
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                      child: Container(
                    margin: EdgeInsets.all(5),
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text('測試標題:${index}',
                            style: TextStyle(fontSize: 19, color: Colors.white),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis),
                        Container(
                          width: 22,
                          height: 2,
                          color: Colors.white,
                        ),
                        Text(
                          '測試內容:${index}',
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 13, color: Colors.white),
                        )
                      ],
                    ),
                    width: 180,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                        color: RandomColor().rColor),
                  ));
                },
              ),
              height: 180),
          Expanded(
              child:Container()
          )
        ]
複製代碼

最上方是一個橫向滑動的listView，咱們先明確一個需求，當咱們在listView上面滑動的時候，只觸發listView的左右滑動效果，當咱們不在listView上面滑動的時候，才觸發iOS的抽屜手勢。

-那麼將flutter集成到iOS之後，當我橫向滑動listView的時候，是觸發listView滑動，仍是會觸發iOS的抽屜手勢呢？微信

三、集成效果

咱們將flutter頁面集成到iOS項目中，集成方法網上有不少，這裏使用google官方方案app

在ContentViewController添加代碼：dom

AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
    self.flutterViewController = [[FlutterViewController alloc] initWithEngine:appDelegate.flutterEngine nibName:nil bundle:nil];
    
    self.flutterViewController.view.frame = self.view.bounds;
    [self.view addSubview:self.flutterViewController.view];
複製代碼

看一下效果:async

首次集成flutter.gif

咱們能夠看到，在listView上面從左向右滑動時，大機率會觸發iOS的抽屜手勢，這和咱們的需求不符。
相信你們都知道緣由了，這就是iOS的手勢優先級高於flutter手勢的優先級，因此會觸發iOS的抽屜手勢。ide

四、解決手勢問題

知道緣由，解決起來也方便了。這裏提供一個方案，當咱們的手勢在flutter的頁面上操做時，由flutter自行判斷是否須要觸發抽屜的動做，那麼在flutter端處理的思路就清晰了。當咱們在listView上滑動時候，不須要iOS參與，當咱們在flutter其餘區域存在手勢時，調用iOS原生的觸發方法。

流程:

流程圖.png

咱們判斷手勢是否在flutter頁面上：

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
    
    // 若爲FlutterView（即點擊了flutter），則不截獲Touch事件
    if ([NSStringFromClass([touch.view class]) isEqualToString:@"FlutterView"]) {
        // 當手勢在flutter上，由flutter處理
        NSLog(@"flutterView");
        return NO;
    }

    NSLog(@"native View");
    return  YES;
}
複製代碼

iOS和flutter交互使用channel，代碼以下:

iOS

FlutterMethodChannel *scrollMethodChannel = [FlutterMethodChannel methodChannelWithName:@"scrollMethodChannel" binaryMessenger:self.flutterViewController];
    
    self.scrollMethodChannel = scrollMethodChannel;
    
    __weak typeof(self) weakSelf = self;
    [self.scrollMethodChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        [weakSelf flutterInvokeNativeMethod:call result:result];
    }];
複製代碼

flutter

static const MethodChannel _scrollMethodChannel =
      MethodChannel('scrollMethodChannel');

  static String _scrollBeganKey = 'scrollBeganKey';

  static String _scrollUpdateKey = 'scrollUpdateKey';

  static String _scrollEndKey = 'scrollEndKey';
複製代碼

flutter端，只須要把非listView的手勢通知iOS就行，listView手勢不須要處理。那麼，只須要處理Expanded裏面的 Container便可。

Column(children: <Widget>[
          Container(
              child: ListView.separated(...),// 將listView代碼省略，主要提現container
              height: 180),
          Expanded(
              child: GestureDetector(
            onHorizontalDragStart: (detail) {
              Map<String, dynamic> resInfo = {
                "offsetX": detail.globalPosition.dx,
                "velocityX": detail.globalPosition.dx
              };

              _scrollMethodChannel.invokeMethod(_scrollBeganKey, resInfo);
            },
            onHorizontalDragEnd: (detail) {
              Map<String, dynamic> resInfo = {
                "offsetX": 0,
                "velocityX": detail.primaryVelocity
              };

              _scrollMethodChannel.invokeMethod(_scrollEndKey, resInfo);
            },
            onHorizontalDragUpdate: (detail) {
              Map<String, dynamic> resInfo = {
                "offsetX": detail.globalPosition.dx,
                "velocityX": detail.primaryDelta
              };

              _scrollMethodChannel.invokeMethod(_scrollUpdateKey, resInfo);
            },
            child: Container(color: Colors.yellow),
          ))
        ]
複製代碼

看代碼其實比較簡單，使用GestureDetector 的onHorizontalDragxxx方法監聽開始滑動，滑動ing，和滑動結束的動做，而且將嘴硬的座標和滑動的速度信息等傳遞給iOS，iOS拿到數據後，進行view的移動處理便可。

iOS拿到數據後的處理方式:

// 定義的block:
@property (nonatomic, copy) void(^scrollGestureBlock)(CGFloat offsetX,CGFloat velocityX,TYSideState state);

- (void)flutterInvokeNativeMethod:(FlutterMethodCall * _Nonnull )call result:(FlutterResult  _Nonnull )result{

    if (!call.arguments)return;
    
    NSLog(@"測試%@",call.arguments);
    CGFloat offsetX = [call.arguments[@"offsetX"] floatValue];
    CGFloat velocityX = [call.arguments[@"velocityX"] floatValue];

    /// 開始滑動
    if ([call.method isEqualToString:@"scrollBeganKey"]){

        if (self.scrollGestureBlock){
            dispatch_async(dispatch_get_main_queue(), ^{
                self.scrollGestureBlock(0, velocityX, TYSideStateBegan);
            });
        }
    }
    
    /// 滑動更新
    if ([call.method isEqualToString:@"scrollUpdateKey"]){
        
        if (self.scrollGestureBlock){
            dispatch_async(dispatch_get_main_queue(), ^{
                self.scrollGestureBlock(offsetX, velocityX, TYSideStateUpdate);
            });
        }

    }
    
    /// 結束滑動
    if ([call.method isEqualToString:@"scrollEndKey"]){
        if (self.scrollGestureBlock){
            dispatch_async(dispatch_get_main_queue(), ^{
                self.scrollGestureBlock(0, velocityX, TYSideStateEnded);
            });
        }
    }
}
複製代碼

很開心的開始看效果，結果仍是有問題，仔細看圖，當觸發抽屜滑動的時候，邊緣有明顯的抖動。

flutter抖動.gif

五、抖動處理

查看緣由發現，當咱們將滑動的消息發送到iOS之後，iOS會修改flutterView的x座標，好比從0修改到10。可是flutter的手勢此時一直沒有中斷，而且時從0開始計算偏移量，可是iOS修改x座標之後，偏移量就會有10的偏差，這個時候，就想到當iOS修改完x後，將x保存起來。在下次flutter消息到來的時候，加上此偏移量便可。

保存x偏移：

if ([self.rootViewController isKindOfClass:[ContentViewController class]]){
        ContentViewController *vc = (ContentViewController *)self.rootViewController;

        vc.currentViewOffsetX = xoffset;
    }
複製代碼

使用x偏移:

/// 滑動更新
    if ([call.method isEqualToString:@"scrollUpdateKey"]){
        
        if (self.scrollGestureBlock){
            dispatch_async(dispatch_get_main_queue(), ^{
                self.scrollGestureBlock(offsetX + self.currentViewOffsetX, velocityX, TYSideStateUpdate);
            });
        }

    }
    
    /// 結束滑動
    if ([call.method isEqualToString:@"scrollEndKey"]){
        if (self.scrollGestureBlock){
            dispatch_async(dispatch_get_main_queue(), ^{
                self.scrollGestureBlock(self.currentViewOffsetX, velocityX, TYSideStateEnded);
            });
        }
    }
複製代碼