具體問題
iOS和flutter都有手勢處理，但是在某些情況下可能產生手勢衝突，比如iOS有一個抽屜手勢，而flutter有一個水平的滑動手勢，這個時候就會產生衝突的問題，具體問題看下面情況。
- iOS抽屜手勢
1、需求場景
綠色部分為放置flutter的控制器(ContentViewController)，當在螢幕左側滑動的時候，會劃出iOS的抽屜控制器(LeftTableViewController)，並且此抽屜手勢也是iOS控制。 iOS抽屜手勢的程式碼網上很多，此處是從專案裡面抽出來的，就不再贅述，程式碼地址
2、flutter頁面
假設我們flutter頁面是有橫向滑動的view，需要整合到iOS裡面去，如下圖:
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];
複製程式碼看一下效果:
我們可以看到，在listView上面從左向右滑動時，大概率會觸發iOS的抽屜手勢，這和我們的需求不符。 相信大家都知道原因了，這就是iOS的手勢優先順序高於flutter手勢的優先順序，所以會觸發iOS的抽屜手勢。
4、解決手勢問題
知道原因，解決起來也方便了。這裡提供一個方案，當我們的手勢在flutter的頁面上操作時，由flutter自行判斷是否需要觸發抽屜的動作，那麼在flutter端處理的思路就清晰了。當我們在listView上滑動時候，不需要iOS參與，當我們在flutter其他區域存在手勢時，呼叫iOS原生的觸發方法。
流程:
我們判斷手勢是否在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);
});
}
}
}
複製程式碼很開心的開始看效果，結果還是有問題，仔細看圖，當觸發抽屜滑動的時候，邊緣有明顯的抖動。
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);
});
}
}
複製程式碼效果:
可以看到，當在ListView上面滑動的時候，listView左右滑動正常，並且沒有誤觸iOS時候，當在flutter下方的非listView區域滑動時，能夠觸發iOS的抽屜手勢，並且沒有抖動。
demo存放Github地址:https://github.com/TonyReet/iOS-flutter-gesture-conflict