flutter共享native資源的多種姿(fang)勢(shì)(shi)

導(dǎo)語：flutter+native混合開發(fā)過程中，flutter可能需要共享native已有的資源，如app內(nèi)置資源、下載好的數(shù)據(jù)、已緩存的內(nèi)存數(shù)據(jù)等，這里介紹幾種flutter共享native資源的方式，包括通常的channel、file，以及指針方式實(shí)現(xiàn)內(nèi)存共享。以安卓為例。

使用flutter開發(fā)全新app時(shí)，資源一般是放置在flutter工程中，ios、android兩端共享。但是在已有app中集成flutter進(jìn)行flutter+native的混合開發(fā)過程中，為了能復(fù)用app已有資源，flutter經(jīng)常需要向native拿取這些資源，如已內(nèi)置的圖片、文件等。本文主要介紹幾種flutter向native拿取資源的方式。以android為例。

目錄

  1. channel bytes流傳輸方式
  2. 文件路徑方式
  3. 內(nèi)存指針共享方式
  4. bitmap內(nèi)存指針共享
  5. 修改flutter engine直接讀取native內(nèi)置其他assets資源方式

先上小菜，flutter如何與native進(jìn)行通信？

  • flutter提供了platform channel與native進(jìn)行通信，官方介紹 , 別人家的原理剖析。
  • flutter、native雙方以channel作為橋梁，以channel name作為標(biāo)識(shí)，將調(diào)用轉(zhuǎn)到對(duì)方指定代碼。
  • 在native側(cè)注冊(cè)監(jiān)聽，等待flutter調(diào)用，通過channel將native信息返回給flutter。
//android java監(jiān)聽
final MethodChannel channel = new MethodChannel(flutterView, "your_method_name");
channel.setMethodCallHandler(new MethodCallHandler() {//注冊(cè)監(jiān)聽
  @Override
  public void onMethodCall(MethodCall methodCall, Result result) {
    if(methodCall.method.equals("your_method_name")) {
      String arg1 = methodCall.argument("arg1");
      Map<String, Object> reply = new HashMap<String, Object>();
      reply.put("result", "haha2");
      result.success(reply);//返回值
    }
  }
//flutter dart 調(diào)用
const MethodChannel _channel = const MethodChannel("your_channel_name");
final Map<dynamic, dynamic> reply = await _channel.invokeMapMethod('your_method_name', {
              "arg1" : "haha"
            });
  • 同樣，也可以在flutter注冊(cè)監(jiān)聽，等待native調(diào)用，通過channel將flutter信息傳遞給native。
//flutter dart監(jiān)聽
const MethodChannel _channel = const MethodChannel("your_channel_name");
_channel.setMethodCallHandler((methodCall) async{//注冊(cè)監(jiān)聽
  if(methodCall.method == "your_method_name"){
    return "haha";//返回
  }
  return null;
});
//android java調(diào)用
new MethodChannel(flutterView, "your_channel_name")
    .invokeMethod("your_method_name", your_args, new MethodChannel.Result(){//調(diào)用
        @Override
        public void success(Object o) {//返回值
        }
        @Override
        public void error(String s, String s1, Object o) {
        }
        @Override
        public void notImplemented() {
        }
    });

下面進(jìn)入正題

1. channel bytes流傳輸方式

  • channel上可以傳遞多種數(shù)據(jù)格式，本質(zhì)上也都是bytes流，這種方式是把數(shù)據(jù)以bytes流方式通過channel傳給flutter。
  • 例如native通過bytes流把native內(nèi)置drawable圖片傳給flutter。
  • flutter沒有直接的api可以讀取android native內(nèi)置的drawable、asset資源，flutter只支持直接讀取在flutter側(cè)添加的flutter_assets資源。所以bytes流方式可以幫助實(shí)現(xiàn)對(duì)這些native內(nèi)置資源的訪問。
//android java側(cè)讀取資源，得到byte[]，回傳給flutter
//flutter method call resName => resId
InputStream inputStream = context.getResources().openRawResource(resId);
//從inputStream種讀取資源，轉(zhuǎn)成bytes
int size = inputStream.available();
byte[] bytes = new byte[size];
byte[] buffer = new byte[Math.min(1024, size)];
int index = 0;
int len = inputStream.read(buffer);//讀取資源到byte[]
while (len != -1){
    System.arraycopy(buffer, 0, bytes, index, len);
    index += len;
    len = inputStream.read(buffer);
}
result.success(bytes);//把bytes寫到channel種返回給flutter
inputStream.close();
//flutter調(diào)用，拿取byte[]。在flutter 側(cè) byte[]對(duì)應(yīng)Uint8List
Uint8List data = await _channel.invokeMethod('getNativeImage', {
    "imageName" : "xxx",
  });
//flutter Image.memory api 可以把這些Uint8List/byte[]展示成圖像

2. 文件路徑方式

  • android apk內(nèi)置資源組織方式使得內(nèi)置圖片/文件在flutter側(cè)不能以file方式直接讀取，因?yàn)檫@些內(nèi)置資源是以數(shù)據(jù)塊方式存放在apk這個(gè)大文件中的一片段上，通過android系統(tǒng)的assset_manager來管理和讀取。
  • 不過可以通過app緩存目錄來中轉(zhuǎn)，flutter需要時(shí)，native通過系統(tǒng)接口讀取并寫入到app緩存目錄or sdcard，告知flutter文件path, flutter以文件方式訪問。(PS: 在內(nèi)置資源沒有更新時(shí)可以不必重新寫入)
//android java讀取內(nèi)置drawable寫入緩存目錄/sdcard
//flutter method call resName => resId
InputStream inputStream = context.getResources().openRawResource(resId);
File parent = outFile.getParentFile();
if(!parent.exists()){
    parent.mkdirs();
}
FileOutputStream fos = new FileOutputStream(outFile);
byte[] buffer = new byte[1024];
int byteCount = inputStream.read(buffer);
while ((byteCount) != -1) {
    fos.write(buffer, 0, byteCount);
    byteCount = inputStream.read(buffer);
}
fos.flush();//刷新緩沖區(qū)
inputStream.close();
fos.close();
//return outFile path
//flutter 拿取到文件path 以  Image.file 展示圖片

3. 內(nèi)存指針共享方式

  • 在native讀取數(shù)據(jù)轉(zhuǎn)成byte[]后，如何傳輸給flutter，除上面兩種方式，還可以通過內(nèi)存指針共享方式，把native側(cè)數(shù)據(jù)指針地址和length傳遞給flutter，flutter依據(jù)內(nèi)存指針地址和length讀取處理數(shù)據(jù)。
  • flutter是運(yùn)行于native所封裝的環(huán)境中，在同一個(gè)進(jìn)程，內(nèi)存地址空間并沒有隔離，可以共享內(nèi)存空間。但這里有兩個(gè)問題需要解決，由于java和dart語言中并沒有像c/c++那樣的指針用法，需要解決：1)在android java中拿到內(nèi)存指針傳給flutter dart；2）在flutter dart中把指針轉(zhuǎn)換成dart數(shù)據(jù)結(jié)構(gòu)使用。
  • 1）如何拿到byte[]內(nèi)存指針？通過jni方式
//android java側(cè)拿取byte[]指針
jbyte *cData = env->GetByteArrayElements(bytes, &isCopy);
  • 因?yàn)閖ava byte[]是在java堆上申請(qǐng)的，根據(jù)不同系統(tǒng)實(shí)現(xiàn)，這種方式可能會(huì)導(dǎo)致數(shù)據(jù)在jni被復(fù)制一份，產(chǎn)生更多的內(nèi)存增量，參考NDK開發(fā)指導(dǎo)：如何使用原生代碼共享原始數(shù)據(jù)？ 。推薦使用ByteBuffer.allocateDirect, 分配jni native byte[]。另外在內(nèi)存指針返回給flutter使用時(shí)，native側(cè)需要保證這份內(nèi)存數(shù)據(jù)不被回收掉，flutter用完時(shí)需通知native釋放。
//android java代碼
InputStream inputStream = context.getResources().openRawResource(resId);
int size = inputStream.available();
ByteBuffer byteBuffer = ByteBuffer.allocateDirect(size);
//...read inputStream to byteBuffer
long ptr = JniInterface.native_getByteBufferPtr(byteBuffer);
Map<String, Object> reply = new HashMap<String, Object>();
reply.put("rawDataAddress", ptr);
reply.put("rawDataLength", totalLength);
//cacheObj(nativeImageID, byteBuffer);//需要緩存一下，以保證flutter使用時(shí)沒有被釋放
result.success(reply);
inputStream.close();
//android jni 獲取內(nèi)存指針
Java_com_xxxx_JniInterface_native_1getByteBufferPtr(
        JNIEnv *env, jclass clazz, jobject byte_buffer) {
    jbyte *cData = (jbyte*)env->GetDirectBufferAddress(byte_buffer);//獲取指針
    return (jlong)cData;
}
  • 2）flutter側(cè)如何使用native傳遞的指針？dart:ffi Pointer.fromAddress（flutter>=1.9） 或 修改engine添加接口
//flutter dart 把指針轉(zhuǎn)換成dart數(shù)據(jù)結(jié)構(gòu)Uint8List
import 'dart:ffi';
Pointer<Uint8> pointer = Pointer<Uint8>.fromAddress(
    rawDataAddress); //address是內(nèi)存地址
Uint8List bytes = pointer.asExternalTypedData(
    count: rawDataLength);
//Uint8List bytes可以通過 Image.memory 接口顯示圖像
//建議參考MemoryImage重寫一個(gè)ImageProvider把對(duì)native內(nèi)存引用釋放羅加入
//之前調(diào)用native獲取指針，增加內(nèi)存引用計(jì)數(shù)1
PaintingBinding.instance.instantiateImageCodec(bytes) ;
//之后通知減除內(nèi)存引用1

//對(duì)于低版本不支持dart:ffi的估計(jì)是自定義engine了，可以自己添加接口，實(shí)現(xiàn)指針轉(zhuǎn)Uint8List
const long address = tonic::DartConverter<long>::FromDart(Dart_GetNativeArgument(args, 0));
void* ptr = reinterpret_cast<char*>(address);
const int bytes_size = tonic::DartConverter<int>::FromDart(Dart_GetNativeArgument(args, 1));
tonic::DartInvoke(callback_handle,{
    tonic::DartConverter<tonic::Uint8List>::ToDart(reinterpret_cast<const u_int8_t*>(ptr), bytes_size)
});
  • 這兩個(gè)問題解決后，通過channel串聯(lián)起來即可實(shí)現(xiàn)，指針方式的內(nèi)存共享。好處是沒有大塊數(shù)據(jù)通過channel拷貝傳遞，但需要注意內(nèi)存的引用和釋放。

4. bitmap內(nèi)存指針共享

  • bitmap內(nèi)存共享與上一節(jié)相似，共享的bitmap在內(nèi)存的pixel bytes。為什么要bitmap共享呢？flutter+native混合開發(fā)中，一些圖片已經(jīng)在native的內(nèi)存中加載了，如果flutter能夠復(fù)用這內(nèi)存，既能節(jié)省內(nèi)存，也能省去讀取文件和解碼圖片的過程，優(yōu)化性能。
  • 網(wǎng)上也有通過紋理方式在native和flutter間進(jìn)行圖片共享的方法，這種方式需要在native維護(hù)一個(gè)GL線程，不是頻繁復(fù)用場(chǎng)景（如gallery/camera) ，成本有點(diǎn)高。
  • 字節(jié)跳動(dòng)Flutter架構(gòu)實(shí)踐“圖片透?jìng)鲀?yōu)化方案”一節(jié)也提出了通過改engine實(shí)現(xiàn)bitmap內(nèi)存共享，方案圖如下，不過并沒有給出具體實(shí)現(xiàn)介紹。
  • 我們這種bitmap共享方式可以不依賴flutter-engine改造，可以在官方sdk上運(yùn)行。
  • 上一節(jié)中已經(jīng)看到可以使用內(nèi)存指針實(shí)現(xiàn)bytes內(nèi)存共享，bitmap在內(nèi)存中也是pixels bytes，如果能拿到這塊內(nèi)存指針，那么bitmap內(nèi)存共享也不是問題。
  • 如何拿到？android jni 提供了 AndroidBitmap_lockPixels 可以幫助我們實(shí)現(xiàn)這一功能。
//android jni代碼。java bitmap object 轉(zhuǎn) pixels內(nèi)存指針
Java_com_xxxx_JniInterface_native_1getBitmapPixelDataMemoryPtr(
        JNIEnv *env, jclass clazz, jobject bitmap) {
    AndroidBitmapInfo bitmapInfo;
    int ret;
    if ((ret = AndroidBitmap_getInfo(env, bitmap, &bitmapInfo)) < 0) {
        LOGE("AndroidBitmap_getInfo() failed ! error=%d", ret);
        return 0;
    }
    // 讀取 bitmap 的像素?cái)?shù)據(jù)塊到 native 內(nèi)存地址
    void *addPtr;
    if ((ret = AndroidBitmap_lockPixels(env, bitmap, &addPtr)) < 0) {
        LOGE("AndroidBitmap_lockPixels() failed ! error=%d", ret);
        return 0;
    }
    //unlock，保證不因這里獲取地址導(dǎo)致bitmap被鎖定
    AndroidBitmap_unlockPixels(env, bitmap);
    return (jlong)addPtr;
}
//android java調(diào)用，并返回給flutter內(nèi)存指針信息
long address = JniInterface.getBitmapPixelDataMemoryPtr(bitmap);
if (address != 0) {
    Map<String, Object> reply = new HashMap<String, Object>();
    reply.put("pixelsDataAddress", address);
    reply.put("pixelsDataWidth", bitmap.getWidth());
    reply.put("pixelsDataHeight", bitmap.getHeight());
    //cacheObj(nativeImageID, bitmap);//需要緩存一下，以保證flutter使用時(shí)沒有被釋放
    result.success(reply);
}
//flutter 側(cè)使用
Pointer<Uint8> pointer = Pointer<Uint8>.fromAddress(pixelsDataAddress); //address是內(nèi)存地址
int bytesCount = pixelsDataHeight * pixelsDataWidth * 4;
Uint8List bytes = pointer.asExternalTypedData(count: bytesCount);//pixels bytes data
ui.PixelFormat format = ui.PixelFormat.rgba8888;
  • flutter如何使用像素?cái)?shù)據(jù)，這里的bytes是解碼后的像素?cái)?shù)據(jù)，不能使用Image.memory展示， Image.memory接收的是未解碼數(shù)據(jù)。但flutter提供了另一個(gè)接口 dart:ui.decodeImageFromPixels
  • 這里提供了flutter顯示圖片pixels數(shù)據(jù)的例子 PixelMemoryImage ，同樣做好是重寫加入對(duì)bitmap的引用和釋放邏輯。ui.decodeImageFromPixels 之前去獲取指針，引用+1，engine處理完回調(diào)后引用-1。

5. 修改flutter engine直接讀取native內(nèi)置其他assets資源方式

  • 查看flutter讀取flutter添加的assets資源流程，即 Image.asset 調(diào)用流程，可以發(fā)現(xiàn)，flutter是在engine層通過android jni結(jié)構(gòu)直接讀取的flutter_assets資源。那是否可以改造讓其也可以讀取native已有的內(nèi)置資源呢？
  • Image.asset流程：
Image.asset
  AssetImage
    AssetBundleImageProvider#load
       AssetBundleImageProvider#_loadAsync
          asset_bundle.dart#PlatformAssetBundle#load
             defaultBinaryMessenger.send('flutter/assets', asset_name)
                engine.cc#HandlePlatformMessage  //flutter engine層
                   engine.cc#HandleAssetPlatformMessage
                      asset_manager_->GetAsMapping(asset_name)//返回mapping,包含內(nèi)存指針和size
                         apk_asset_provider.cc#APKAssetProvider::GetAsMapping
//apk_asset_provider.cc中的實(shí)現(xiàn)
std::unique_ptr<fml::Mapping> APKAssetProvider::GetAsMapping(
    const std::string& asset_name) const {
  std::stringstream ss;
  ss << directory_.c_str() << "/" << asset_name;  //dir是flutter_assets，asset_name是flutter層開發(fā)指定，合起來flutter_assets/asset_name
  //這是flutter側(cè)添加的資源在android apk中的位置，打包在native assets目錄下
  //AAssetManager_open是android jni接口,位于android/asset_manager_jni.h
  AAsset* asset =
      AAssetManager_open(assetManager_, ss.str().c_str(), AASSET_MODE_BUFFER);
  if (!asset) {
    return nullptr;
  }
  return std::make_unique<APKAssetMapping>(asset);//最終通過AAsset_getBuffer讀取數(shù)據(jù)
}
  • flutter 是通過在engine層調(diào)用asset_manager讀取flutter側(cè)添加的資源，其限定了讀取apk assets目錄下flutter_assets下的資源。所以flutter默認(rèn)api不能支持讀取native原生添加的assets或drawable資源。分析apk可以看到如下的結(jié)構(gòu)：
image.png
image.png
  • 如果對(duì)APKAssetProvider::GetAsMapping 進(jìn)行如下簡(jiǎn)單改造，可以讓其支持 ../ 格式，就能讀取flutter_assets之外的assets資源
std::unique_ptr<fml::Mapping> APKAssetProvider::GetAsMapping(
    const std::string& asset_name) const {
  std::stringstream ss;
  if(asset_name.size() > 3 && asset_name.compare(0, 3, "../") == 0){
    ss << asset_name.substr(3);//支持 ../ 讀取native assets下資源
  } else {
    ss << directory_.c_str() << "/" << asset_name;//默認(rèn)方式
  }
  AAsset* asset =
      AAssetManager_open(assetManager_, ss.str().c_str(), AASSET_MODE_BUFFER);
  if (!asset) {
    return nullptr;
  }
  return std::make_unique<APKAssetMapping>(asset);
}
  • flutter使用如下：定位到apk/assets/earth.jpg圖片
Image image = Image.asset(
  "../earth.jpg", //默認(rèn)../格式是中不到資源的，報(bào)錯(cuò)
  fit: BoxFit.fill,
  width: 200,
);
  • 這種方式對(duì)于跨平臺(tái)開發(fā)并不友好，兩端資源位置路徑可能不一致，需要分平臺(tái)開發(fā)。
  • 對(duì)于如何修改engine直接讀取android native的drawable圖片資源，暫時(shí)還沒有找到比合適的方法，因?yàn)樽x取drawable資源的android實(shí)現(xiàn)是放在AssetManager2.cpp ，并沒有對(duì)應(yīng)的jni接口，asset_manager jni接口列表 。
  • 參考AssetInputStream在c++層的使用方式，配合android AssetManager.java的nativeOpenNonAsset獲取Asset指針，在engine層轉(zhuǎn)換成Asset* 用jni接口讀取看上去可行，就是有點(diǎn)復(fù)雜，暫時(shí)沒有場(chǎng)景值得這么去做。
  • 編譯和應(yīng)用flutter engine，可以參考鏈接 Flutter Engine編譯和應(yīng)用介紹

最后，總結(jié)一下

  • 本文提供了5中flutter共享native資源的方式，在flutter+native混合棧開發(fā)中可能會(huì)有一款適合你 : ) 。
    1. 通過channel傳bytes流方式
    1. 通過寫文件中轉(zhuǎn)方式
    1. 內(nèi)存指針方式，可以避免數(shù)據(jù)傳遞，但需要注意維護(hù)native的內(nèi)存數(shù)據(jù)的引用和釋放
    1. 針對(duì)bimap的內(nèi)存指針共享方式
    1. 嘗試從修改engine的方式支持flutter直接讀取native assets資源，但還不支持res/drawable資源。

最最后感謝閱讀~~

參考資料鏈接

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在 2019 年，F(xiàn)lutter 推出了多個(gè)正式版本，支持的終端越來越多，使用的項(xiàng)目也越來越多。Flutter 正...
    zhx喜籽閱讀 4,286評(píng)論 0贊 9
  • 一、初識(shí)flutter image 在講解源碼之前，我們先看下面幾個(gè)例子，回顧一下flutter加載圖片資源的方式...
    五月_f6d4閱讀 11,507評(píng)論 3贊 23
  • 前幾天朋友閑聊時(shí)偶然說了一句話“小心把你帶進(jìn)臭水溝里去。”隨后又無聊的加了句“這兩天下雨了，溝里水漲了，小心被淹到...
    黑色的水閱讀 389評(píng)論 0贊 0
  • 長(zhǎng)街長(zhǎng)，煙花繁 槐火紛亂，寒煙微涼， 挑燈回看： 黃泉，紫陌，碧落，紅塵 ——靈魂空曠 若水猶離，...
    白落落閱讀 1,001評(píng)論 0贊 3
  • 華燈束縛，長(zhǎng)街光轉(zhuǎn)，銀漢飛星弄舞。 他年日盼夜相逢，可添是、別離天妒。 佳期如故，風(fēng)光流里，莫道鵲橋住處。 來年若...
    浪哥你個(gè)浪閱讀 356評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容