Question

我正在尝试从窗口小部件导出图像，而无需将此窗口小部件添加到屏幕。
这有可能吗？
通过添加到可滚动容器中，我已经成功导出了它，现在我想在不将其添加到屏幕的情况下进行渲染，并将其保存到临时文件中以进行共享。
我认为应该在其中某处进行“绘画”调用，但无法确切地知道在哪里。
这是我的代码：

var shareImage = await ShareImageWidget.builder(context,
item: item, definition: definition);
var widget = shareImage.build(context);
var repaint = RepaintBoundary.wrap(widget, 0);
var render = RenderRepaintBoundary(child:repaint.createRenderObject(context));
ui.Image image = await render.toImage(pixelRatio: 1.0);
ByteData byteData = await image.toByteData(format:ui.ImageByteFormat.png);
var pngBytes = byteData.buffer.asUint8List();
var bs64 = base64Encode(pngBytes);
var dir = await getTemporaryDirectory();

Answer 1

您可以使用Transform.translate小部件将小部件移出屏幕。 Transform在绘制窗口小部件之前先对其进行移动。

Answer 2

我正在使用这里的功能：

How to create an image from a widget in Flutter-web?

此功能允许您将小部件转换为图像，而无需担心在屏幕上隐藏这些小部件。最近，这也适用于网络。

Answer 3

示例：

/// Creates an image from the given widget by first spinning up a element and render tree,
/// then waiting for the given [wait] amount of time and then creating an image via a [RepaintBoundary].
/// 
/// The final image will be of size [imageSize] and the the widget will be layout, ... with the given [logicalSize].
Future<Uint8List> createImageFromWidget(Widget widget, {Duration wait, Size logicalSize, Size imageSize}) async {
  final RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();

  logicalSize ??= ui.window.physicalSize / ui.window.devicePixelRatio;
  imageSize ??= ui.window.physicalSize;

  assert(logicalSize.aspectRatio == imageSize.aspectRatio);

  final RenderView renderView = RenderView(
    window: null,
    child: RenderPositionedBox(alignment: Alignment.center, child: repaintBoundary),
    configuration: ViewConfiguration(
      size: logicalSize,
      devicePixelRatio: 1.0,
    ),
  );

  final PipelineOwner pipelineOwner = PipelineOwner();
  final BuildOwner buildOwner = BuildOwner();

  pipelineOwner.rootNode = renderView;
  renderView.prepareInitialFrame();

  final RenderObjectToWidgetElement<RenderBox> rootElement = RenderObjectToWidgetAdapter<RenderBox>(
    container: repaintBoundary,
    child: widget,
  ).attachToRenderTree(buildOwner);

  buildOwner.buildScope(rootElement);

  if (wait != null) {
    await Future.delayed(wait);
  }

  buildOwner.buildScope(rootElement);
  buildOwner.finalizeTree();

  pipelineOwner.flushLayout();
  pipelineOwner.flushCompositingBits();
  pipelineOwner.flushPaint();

  final ui.Image image = await repaintBoundary.toImage(pixelRatio: imageSize.width / logicalSize.width);
  final ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);

  return byteData.buffer.asUint8List();
}

参考：https://github.com/flutter/flutter/issues/40064#issuecomment-620081426

有一个具有此功能的软件包：https://pub.dev/packages/screenshot#capturing-widgets-that-are-not-in-the-widget-tree

RenderRepaintBoundary到图像，而无需在屏幕上添加小部件

3 个答案: