专业商城网站建设公司,速度最快的wordpress主题,成都小程序推广企业,安卓手机做网站flutter开发实战-RepaintBoundary实现Widget截图功能
在开发中#xff0c;遇到需要使用截图#xff0c;像iOS可以截图UIView获取到UIImage#xff0c;在flutter中可以使用RepaintBoundary实现截图功能
相机拍摄的图片#xff1a;
RepaintBoundary截图后的图片
一、Re…flutter开发实战-RepaintBoundary实现Widget截图功能
在开发中遇到需要使用截图像iOS可以截图UIView获取到UIImage在flutter中可以使用RepaintBoundary实现截图功能
相机拍摄的图片
RepaintBoundary截图后的图片
一、RepaintBoundary
RepaintBoundary是绘制边界。
如果CustomPaint有子节点为了避免子节点不必要的重绘并提高性能通常情况下都会将子节点包裹在RepaintBoundary组件中这样会在绘制时就会创建一个新的绘制层Layer其子组件将在新的Layer上绘制而父组件将在原来Layer上绘制也就是说RepaintBoundary 子组件的绘制将独立于父组件的绘制RepaintBoundary会隔离其子节点和CustomPaint本身的绘制边界。示例如下 CustomPaint(size: Size(300, 300), //指定画布大小painter: MyPainter(),child: RepaintBoundary(child:...)),
)
参考https://book.flutterchina.club/chapter10/custom_paint.html#_10-4-1-custompaint
二、实现Widget截图
实现Widget截图需要将Widget嵌套在RepaintBoundary里需要用到Globalkey 示例如下
Container(width: widget.width,height: widget.height,clipBehavior: Clip.hardEdge,decoration: BoxDecoration(color: Colors.transparent,),child: RepaintBoundary(key: _cameraViewGlobalKey,child: Transform.scale(scale: scale * aspectRatio,child: AspectRatio(aspectRatio: aspectRatio,child: Center(child: CameraPreview(controller!,),),),),),);
实现截图功能
// 根据GlobalKey来截图Widgetstatic FutureUint8List? makeImageUInt8List(GlobalKey globalKey) async {RenderRepaintBoundary boundary globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary;// 这个可以获取当前设备的像素比var dpr ui.window.devicePixelRatio;ui.Image image await boundary.toImage(pixelRatio: dpr);ByteData? byteData await image.toByteData(format: ui.ImageByteFormat.png);Uint8List? pngBytes byteData?.buffer.asUint8List();return pngBytes;}
获得Uint8List可以直接将其写入文件或者使用Image展示。 if (uInt8List ! null) {await File(imagePath).writeAsBytes(uInt8List);}
三、小结
flutter开发实战-RepaintBoundary实现Widget截图功能像iOS可以截图UIView获取到UIImage在flutter中可以使用RepaintBoundary实现截图功能。
