在开发中,经常会碰到的一个需求是将组件转为图片,比如分享功能。在 Flutter 中,如果需要截图组件,可以使用 RepaintBoundary
组件包裹需要截图的部分。
定义一个 RepaintBoundary
参数只有两个,第一个 key 用于标记,第二个 child 就是正常的 Widget,比如可以包裹一个 Container。
RepaintBoundary(
key: ,
child: ,
),
对于 key 的定义,可以使用一个 GlobalKey
,当然其他的 key 也是可以的。
late GlobalKey key;
key = GlobalKey();
截图方法
定义好 key 后,我们就可以通过 key 获得组件的上下文,之后将图片转为二进制的数据,这里需要注意的就是要获取像素的比例,不然会出现图片模糊的情况,在这里我使用了 Get 获取上下文,如果没有使用将其替换掉即可。
var boundary = state.key.currentContext?.findRenderObject() as RenderRepaintBoundary;
var pixelRatio = MediaQuery.devicePixelRatioOf(Get.context!);
var image = await boundary.toImage(pixelRatio: pixelRatio);
var data = await image.toByteData(format: ImageByteFormat.png);
var byteList = data?.buffer.asUint8List();