Flutter 混合開發實戰問題記錄（一）FlutterView閃爍

本人主要從事android開發，從開始研究到項目實戰接入大概有一個半月了，前期的摸索階段花的時間不是不少，天天抽出1小時來看，學習路線大概是：

搭建環境---語言熟悉---寫demo---寫案例----摘取實際項目中的模塊徹底翻譯爲dart版本----接入到項目中
複製代碼

目前還算順利，遇到的問題大都解決了。dart語法相似於js，也和java8，kt等之後的語法糖相通，熟悉下便可上手。

我隨手記錄了些比較繁瑣難解決，實施不是很簡單的問題，相似於widget佈局等就再也不詳細描述了，只是時間問題，熟悉下就好了。

咱們項目中嵌入Flutter的入口是主頁的第四個tab，須要一個fragment，能夠在flutterfragment中return flutterView。

public class MyFlutterFragment extends BaseFlutterFragment implements BasicMessageChannel.MessageHandler<String>{
    private BasicMessageChannel<String> messageChannel;
    @Override
    public FlutterView onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        FlutterView flutterView = Flutter.createView(
                mActivity,
                getLifecycle(),
                "routename");
        messageChannel = new BasicMessageChannel<>(flutterView, "android_channel", StringCodec.INSTANCE);
        messageChannel.setMessageHandler(this);
        //todo 註冊你的methodChannel
        // ......
        return flutterView;
    }

    @Override
    public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {
       //todo
    }
}

複製代碼

向你的flutter的main（）方法中傳遞routename 而後啓動相應的widget，自己沒有什麼問題，嵌入以後widget渲染和請求也ok，只是在切換flutterFragment和nativeFragment的時候出現了明顯的閃爍，而nativeFragment之間切換則沒有。

翻閱源碼能夠看到flutterView自己就是surfaceView，作android原生開發朋友知道，即便不使用flutter，在作自定義相機，視頻渲染，以及相似於XWalkView 的使用中都會遇到相似問題。

對flutter瞭解不深，不明白爲什麼選取surface來作載體，使用textureView會有什麼問題。

【Surfaceview的特性】：內部維護了兩個線程即主線程和渲染線程，渲染線程能夠在主線程以外的線程中向屏幕上繪圖。這樣能夠避免主線程因繪圖任務繁重致使程序的阻塞，從而提升了程序的反應速度。在遊戲開發中多用surfaceView，遊戲的背景，任務，動做盡可能在畫布Canvas中繪製。這種雙線程的設計模式，極大的消耗了CPU內存，爲此，SurfaceView可見時才被建立，SurfaceView隱藏時便被銷燬，從而達到節約內存的目的。 
複製代碼

搜索資料，因爲場景不一樣解決方案也不一樣。

1 假如單頁面中嵌套surfaceView，能夠在Activity的onCreate()方法中加上一句話：

getWindow().setFormat(PixelFormat.TRANSLUCENT);
複製代碼

或在rootview中構建一個長寬爲0px 而且不可見的SurfaceView。

2 有人遇到了xwalkView中的閃爍，https://blog.csdn.net/qq2364121253/article/details/82253996,解決方案在文章內。

3 有人在flutter的GitHub issue中提了問題，主要是在原生中啓動flutter頁面（而非act中嵌入Fragment）的閃爍和黑屏問題，和重置flutterView大小遇到的問題

https://github.com/flutter/flutter/issues/19189

綜合幾種方案，能夠找到一個比較簡單的方式, 構建你的flutterView後設置屬性

public class MyFlutterFragment extends BaseFlutterFragment implements BasicMessageChannel.MessageHandler<String>{
   private BasicMessageChannel<String> messageChannel;
   @Override
   public FlutterView onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       FlutterView flutterView = Flutter.createView(
               mActivity,
               getLifecycle(),
               "routename");
       
       //添加        
       flutterView.setZOrderOnTop(true);
       flutterView.getHolder().setFormat(PixelFormat.TRANSLUCENT);  
       
       messageChannel = new BasicMessageChannel<>(flutterView, "android_channel", StringCodec.INSTANCE);
       messageChannel.setMessageHandler(this);
       //todo 註冊你的methodChannel
       // ......
       return flutterView;
   }

   @Override
   public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {
      //todo
   }
}
複製代碼

後續我會繼續作記錄，標記一些問題，最近在弄混合棧，在原生-flutter - web中自由跳轉，借鑑鹹魚的混合棧（由於有些bug和沒必要要功能，暫時沒有采用）的思路，你們均可以寫出本身的路由棧。