Flutter和iOS手勢衝突解決思路

20130639發表於2019-07-16
FlutteriOS

具體問題

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

  • iOS抽屜手勢
    原生抽屜

1、需求場景

綠色部分為放置flutter的控制器(ContentViewController)，當在螢幕左側滑動的時候，會劃出iOS的抽屜控制器(LeftTableViewController)，並且此抽屜手勢也是iOS控制。 iOS抽屜手勢的程式碼網上很多，此處是從專案裡面抽出來的，就不再贅述，程式碼地址

2、flutter頁面

假設我們flutter頁面是有橫向滑動的view，需要整合到iOS裡面去，如下圖:

flutter頁面

flutter頁面主要程式碼:

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的抽屜手勢呢？

3、整合效果

我們將flutter頁面整合到iOS專案中，整合方法網上有很多，這裡使用google官方方案

在ContentViewController新增程式碼：

    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];
複製程式碼

看一下效果:

首次整合flutter.gif

我們可以看到，在listView上面從左向右滑動時，大概率會觸發iOS的抽屜手勢，這和我們的需求不符。 相信大家都知道原因了，這就是iOS的手勢優先順序高於flutter手勢的優先順序，所以會觸發iOS的抽屜手勢。

4、解決手勢問題

知道原因，解決起來也方便了。這裡提供一個方案，當我們的手勢在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

5、抖動處理

檢視原因發現，當我們將滑動的訊息傳送到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);
            });
        }
    }
複製程式碼

效果:

最後效果.gif

可以看到，當在ListView上面滑動的時候，listView左右滑動正常，並且沒有誤觸iOS時候，當在flutter下方的非listView區域滑動時，能夠觸發iOS的抽屜手勢，並且沒有抖動。

demo存放Github地址:https://github.com/TonyReet/iOS-flutter-gesture-conflict

相關文章