背景

最近遇到一个项目中的需求： 接入native三方打印SDK，将flutter绘制的页面进行打印。打印SDK支持打印bitmap图片数据。整体的思路是将flutter页面进行渲染，转换成图片数据，将图片数据通过methodChannel以字节数组的形式传递到原生层进行打印。

下面我们来重点说说视图转图片的部分

RepaintBoundary

• 防止重绘

在自定义绘制时，我们常常使用 RepaintBoundary 做性能优化，来避免重复绘制。RepaintBoundary 内部的 widget 拥有独立画布，可以不被干扰，官方很多组件外层也包了层 RepaintBoundary。

SingleChildScrollView(
    Column(
        children:[
            WidgetA,
            WidgetB,
            RepaintBoundary( -> 外层嵌套 RepaintBoundary ，当页面进行滚动时，CustomPaint 不会进行重绘。
              child: CustomPaint(),
            ),
        ]
    )
)

• 生成截图

今天，我们用到 RepaintBoundary 的第二个常用能力：生成截图。

final _boundaryKey = GlobalKey();

@override
void initState() {
  super.initState();
  SchedulerBinding.instance?.addPostFrameCallback((_) { -> 监听页面绘制，绘制完成开始生成截图
    _captureWidget();
  });
}

/// 通过 RenderRepaintBoundary 生成图片
void _captureWidget() async {
  final boundary = _boundaryKey.currentContext?.findRenderObject();
  if (boundary != null && boundary is RenderRepaintBoundary) {
    final image = await boundary.toImage();
    ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
    if (byteData != null) {
      // 图片数据生成成功，用法在下面
    }
  }
}

@override
Widget build(BuildContext context) {
  return SingleChildScrollView( -> 外层嵌套支持滚动，可生成长屏截图
    child: RepaintBoundary(
      key: _boundaryKey,
      child: widgetA, —> widgetA 为截图的视图层
    )
  );
}

方法_captureWidget 中 ByteData 即为生成的图片数据，具体用法如下：

//Unit8List 就是一个 byte[]
Unit8List imageData = byteData.buffer.asUnit8List();

• 直接展示为 Image

...
child: Image.memory(imageData),

• 转换为base64

...
String bs64 = base64Encode(imageData);

• 保存为本地文件file

//tempPath 文件功能可通过官方插件 `path_provider` 来获取，如：
//Directory tempDir = await getTemporaryDirectory()
...
File(tempPath).writeAsBytes(imageData);

附注

• image.toByteData(format: format) 可以自定义存储格式，一般图片为png格式，但是要注意，如果你的RepaintBoundary包裹的部分没有设置背景色，那么存储出来的图片可能会有背景色缺失的问题。
• toImage({double pixelRatio = 1.0})中的pixelRatio参数是生成图片像素倍数。例如，屏幕基础宽高为360px*480px， 默认输出也是360px*480px的图片文件；如果将pixelRatio设置为10，那么你输出的图片文件大小将是3600px*4800px。

Native 层如何接收 字节数组

我们知道截图生成的Unit8List，其数据结构为字节数组byte[]。下面我们用小篇幅来演示一下如何通过methodChannel接收传递字节数组。

Dart层

var params = {"imgData": imageData}
_methodChannel.invokeMethod("methodName", params)

Native层 (以android为例)

override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result){
    val imgData = call.argument<ByteArray>("imgData") as ByteArray
    val bitmap = BitmapFactory.decodeByteArray(imgData, 0, imgData.size)
}