混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決

更新時(shí)間：2022年08月09日 15:39:05 作者：幺風(fēng)

這篇文章主要為大家介紹了混合棧跳轉(zhuǎn)導(dǎo)致Flutter頁面事件卡死問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

問題來源

在我們升級Flutter2.5后，測試在走整個(gè)業(yè)務(wù)流程中發(fā)現(xiàn)了有頁面卡死現(xiàn)象，于是給我提了一個(gè)BUG。

在xx頁面多次操作后，頁面卡死，頁面還可以滾動(dòng)但是無法跳轉(zhuǎn)，點(diǎn)擊長按事件都失效了。

在我多次測試后發(fā)現(xiàn)，確實(shí)存在這個(gè)問題，而且老版本也都存在。

問題難點(diǎn)

復(fù)現(xiàn)難

問題定位

最開始，我先確定了失效情況下，事件源頭有沒有正確發(fā)送，所以，先在_dispatchPointerDataPacket方法上添加了斷點(diǎn)。結(jié)果發(fā)現(xiàn)都是正常。其實(shí)也好理解，頁面可以滾動(dòng)，說明引擎層發(fā)送事件肯定是正常的。

在進(jìn)行一系列沒有用的斷點(diǎn)定位后發(fā)現(xiàn)，正常事件的hitTestResult(事件中命中測試階段收集的所有能夠響應(yīng)事件的RenderObject節(jié)點(diǎn))和錯(cuò)誤頁面的hitTestResult的_path數(shù)量不一樣。

正常的hitTestResult

錯(cuò)誤的hitTestResult

經(jīng)過對比發(fā)現(xiàn)，錯(cuò)誤的列表到RenderPointerListener這個(gè)就停止了，我看這名字還挺熟悉，難道跟IgnorePointer有啥關(guān)系？我通過這個(gè)RenderObject節(jié)點(diǎn)的parent一層一層往上找，發(fā)現(xiàn)是ScrollableState中使用了IgnorePointer（ScrollableState是列表組件如ListView、SingleChildScrollView等底層使用的Widget State)

//...
Widget result = _ScrollableScope(
  scrollable: this,
  position: position,
  child: Listener(
    onPointerSignal: _receivedPointerSignal,
    child: RawGestureDetector(
      key: _gestureDetectorKey,
      gestures: _gestureRecognizers,
      behavior: HitTestBehavior.opaque,
      excludeFromSemantics: widget.excludeFromSemantics,
      child: Semantics(
        explicitChildNodes: !widget.excludeFromSemantics,
        child: IgnorePointer(
          key: _ignorePointerKey,
          ignoring: _shouldIgnorePointer,
          ignoringSemantics: false,
          child: widget.viewportBuilder(context, position),
        ),
      ),
    ),
  ),
);
//...

這里會(huì)通過_ignorePointerKey來把滾動(dòng)區(qū)域及其子節(jié)點(diǎn)的事件都屏蔽了。那么什么時(shí)候_ignorePointerKey會(huì)被置為true呢。

通過了解ScrollableState源碼發(fā)現(xiàn)，只要頁面在滾動(dòng)過程中，_ignorePointerKey就會(huì)被置為true，當(dāng)手指抬起時(shí)，才會(huì)將_ignorePointerKey重新置為false。

通過多次斷點(diǎn)和日志輸出發(fā)現(xiàn)，當(dāng)我從后面的頁面返回到目標(biāo)頁面時(shí)，第一次滾動(dòng)時(shí)，就觸發(fā)了ScrollableState的setIgnorePointer將_ignorePointerKey置為true了，但是后面再無事件將_ignorePointerKey置為false了，此后，再滾動(dòng)頁面時(shí)，也無法觸發(fā)setIgnorePointer方法。

到這里，想繼續(xù)調(diào)試，就需要比較熟悉Flutter的事件原理了，因?yàn)檫@里我只想講一下我解決這個(gè)問題的思路，所以Flutter原理的知識不多講。后面經(jīng)過一系列調(diào)試發(fā)現(xiàn)，問題出在OneSequenceGestureRecognizer這個(gè)抽象類中

abstract class OneSequenceGestureRecognizer extends GestureRecognizer {
  //...
  @protected
  void startTrackingPointer(int pointer, [Matrix4? transform]) {
    // 將當(dāng)前指針和當(dāng)前的handleEvent方法添加到全局指針識別器中存儲(chǔ)緩存起來
    GestureBinding.instance!.pointerRouter.addRoute(pointer, handleEvent, transform);
    _trackedPointers.add(pointer);
    assert(!_entries.containsValue(pointer));
    _entries[pointer] = _addPointerToArena(pointer);
  }
  @protected
  void stopTrackingPointer(int pointer) {
    if (_trackedPointers.contains(pointer)) {
      // 從全局指針中移出當(dāng)前指針
      GestureBinding.instance!.pointerRouter.removeRoute(pointer, handleEvent);
      _trackedPointers.remove(pointer);
      // 如果_trackedPointers是空的
      if (_trackedPointers.isEmpty)
        didStopTrackingLastPointer(pointer);
    }
  }
}

OneSequenceGestureRecognizer這個(gè)類的作用是當(dāng)存在多個(gè)手勢時(shí)，只響應(yīng)一個(gè)手勢。比如我同時(shí)兩個(gè)手指點(diǎn)擊一個(gè)按鈕，按鈕的點(diǎn)擊事件也只會(huì)觸發(fā)一次。像我們常見的TapGestureRecognizer、VerticalDragGestureRecognizer、HorizontalDragGestureRecognizer等最終都是實(shí)現(xiàn)的這個(gè)類。

在這個(gè)類中startTrackingPointer方法會(huì)在手指按下后，也就是發(fā)生PointerDownEvent時(shí)將當(dāng)前類的handleEvent添加到全局指針識別器中，并且將這個(gè)pointer（可以看做指針id）添加到_trackedPointers中緩存起來，可以這樣理解，這個(gè)方法就是一次手勢的開始。

當(dāng)發(fā)生PointerUpEvent等事件時(shí)，會(huì)調(diào)用stopTrackingPointer事件，將手勢移除，這就標(biāo)志著手勢的結(jié)束。

其中有個(gè)_trackedPointers.isEmpty判斷，會(huì)調(diào)用didStopTrackingLastPointer方法，這個(gè)方法一般是將手勢識別器的狀態(tài)置為ready。經(jīng)過我多次對問題頁斷點(diǎn)發(fā)現(xiàn)，無論如何都調(diào)不到這個(gè)方法，也就是說_trackedPointers里面一直有個(gè)手勢指針沒有被移除。

這里我要介紹一下VSCode一個(gè)調(diào)試方法。因?yàn)槲疫€不知道問題的根源，所以我復(fù)現(xiàn)問題是通過不斷點(diǎn)擊頁面同時(shí)觸發(fā)頁面跳轉(zhuǎn)來達(dá)到的，而且只是有幾率復(fù)現(xiàn)。所以我無法通過斷點(diǎn)來確定這里為何有手勢事件沒有調(diào)用stopTrackingPointer，所以我使用了VSCode的LogPoint方式來對整個(gè)過程進(jìn)行日志輸出。

在不斷復(fù)現(xiàn)問題查看日志中發(fā)現(xiàn)，在跳轉(zhuǎn)頁面前，會(huì)有指針事件被添加進(jìn)_trackedPointers，但是卻沒有調(diào)用stopTrackingPointer方法就跳轉(zhuǎn)到新頁面了。

tap 4. addAllowedPointer (tap.dart) _down != null = true 637436658
tap 5. _trackedPointers add 195 502831342 handleEvent: 931478062
tap 5. _trackedPointers add 195 21393736 handleEvent: 790157058
tap 5. _trackedPointers add 195 126324365 handleEvent: 160402385
onNativeRouteEvent: (9): NativeRouteEvent.onCreate
onNativeRouteEvent: (8): NativeRouteEvent.onPause
onFlutterRouteEvent: (9): FlutterRouteEvent.onPush

問題確定

由于我們是混合棧項(xiàng)目，我們是自己寫的一套混合棧路由管理，類似FlutterBoost，在進(jìn)行頁面跳轉(zhuǎn)時(shí)，會(huì)將FlutterEngine先detach，然后再跳轉(zhuǎn)。在Flutter的Android發(fā)送事件源碼里面，會(huì)對FlutterEngine是否attach進(jìn)行判斷，然后觸發(fā)Flutter Framework一系列處理。

@Override
  public boolean onTouchEvent(@NonNull MotionEvent event) {
    // 這里判斷是否attach
    if (!isAttachedToFlutterEngine()) {
      return super.onTouchEvent(event);
    }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
      requestUnbufferedDispatch(event);
    }
    return androidTouchProcessor.onTouchEvent(event);
  }

這里由于頁面跳轉(zhuǎn)時(shí)如果還有事件在處理（比如手指按下并沒有抬起），那么跳轉(zhuǎn)后，F(xiàn)lutter再也接收不到手指抬起的事件了，所以_trackedPointers就一直不被正確移除，導(dǎo)致了事件異常。由于是我們自己寫的混合棧庫，所以修改起來也簡單。

問題解決

Android

public class XXXFlutterView extends FlutterView {
  // ...
  @Override
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        try {
            AndroidTouchProcessor androidTouchProcessor;
            Field field = this.getClass().getSuperclass().getDeclaredField("androidTouchProcessor");
            field.setAccessible(true);
            androidTouchProcessor =  (AndroidTouchProcessor)field.get(this);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                requestUnbufferedDispatch(event);
            }
            return androidTouchProcessor.onTouchEvent(event);
        } catch (Exception e) {
            e.printStackTrace();
            return super.onTouchEvent(event);
        }
    }
}

我們本身有一個(gè)繼承于FlutterView的類，在其中實(shí)現(xiàn)一下父類的onTouchEvent方法，把isAttachedToFlutterEngine的判斷去掉即可，由于androidTouchProcessor是私有類，所以這里我使用了反射。

iOS解決思路還不太一樣，在新的Flutter版本中，iOS提供了forceTouchesCancelled方法來取消Flutter中的事件，所以iOS是通過在混合棧中detach前，手動(dòng)調(diào)用一下這個(gè)方法來解決這個(gè)問題的。