Flutter混合开发调用原生图片

当我们把flutter某块嵌入到已有的项目中，很多图片资源已经存在了，如果再把资源图片导入flutter模块会加大安装包的大小。
所以，我们现在使用一种简单的方法来读取原生的图片资源

原生实现

private void getNativeImage(String imageName , MethodChannel.Result result) {
        int drawableId = this.getResources().getIdentifier(imageName, "drawable", this.getPackageName());
        Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), drawableId);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        boolean isSuccess = bitmap.compress(Bitmap.CompressFormat.PNG, 100, baos);
        result.success(isSuccess ? baos.toByteArray() : "");
    }

上面的代码什么意思呢，我们写入一张图片（比如test.png）,然后从对应的drawable目录中去拿相关的资源返回Bitmap给我们,只要拿的到Bitmap那还有什么好说的呢,转成 byte[]直接传给flutter(怎么传我就不说了，这里要调用MethodChannel来实现，如果不知道怎么看看前几篇文章)

观察平台通道支持数据类型，下面有一张表

支持的数据类型

可以看到Unit8List对应android的byte[],下面的就好办了还说什么呢打开工程写吧

Flutter实现

/// 用于读取原生资源中的图片
class NativeImageProvider extends ImageProvider<NativeImageProvider> {

  final String imageName;
  final double scale;
  final Uint8List bytes;

  const NativeImageProvider(this.imageName ,this.bytes,{this.scale: 1.0});

  @override
  ImageStreamCompleter load(key) {
    return new MultiFrameImageStreamCompleter(
        codec: _loadAsync(key),
        scale: key.scale,
        informationCollector: (StringBuffer information) {
          information.writeln('Image provider: $this');
          information.write('Image key: $key');
        });
  }

  Future<ui.Codec> _loadAsync(NativeImageProvider key) async {
    /// 读不到原生图片，开始读取images
    if (bytes == null || bytes.lengthInBytes == 0) {
      AssetBundle assetBundle = PlatformAssetBundle();
      ByteData byteData = await assetBundle.load("assets/images/$imageName.png");
      return await PaintingBinding.instance.instantiateImageCodec(byteData.buffer.asUint8List());
    } else {
      return await _loadAsyncFromFile(key, bytes);
    }
  }

  Future<ui.Codec> _loadAsyncFromFile(NativeImageProvider key, Uint8List bytes) async {
    assert(key == this);
    if (bytes.lengthInBytes == 0) {
      throw new Exception("bytes[] was empty");
    }
    return await ui.instantiateImageCodec(bytes);
  }

 @override
  Future<NativeImageProvider> obtainKey(ImageConfiguration configuration) {
    // TODO: implement obtainKey
    return SynchronousFuture<NativeImageProvider>(this);
  }
}

大概就是我写了一个ImageProvider用于把获取到的结果转成Image好直接用于显示，在这里我们的准备工作已全部完成，现在可以愉快的使用了，调用Channel获取数据

/// 获取原生图片
  Future getNativeImage(String imageName) async {
    Uint8List bytes =
        await channel.invokeMethod('getNativeImage', {'imageName': imageName});
    setState(() {
      imageIcon = bytes;
    });
  }

在需要使用的地方加上

Image(image: NativeImageProvider('cc_white_return', imageIcon),)，

现在我们再也不用担心图片资源浪费了happy!

最后编辑于：2019.06.04 16:40:44