作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试从小部件导出图像而不将此小部件添加到屏幕。
这甚至可能吗?
我已经通过添加到可滚动容器成功导出它,现在我想渲染它而不将其添加到屏幕并将其保存到临时文件以供共享。
我认为那里应该有一个“油漆”电话,但无法弄清楚确切的位置。
这是我的代码:
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();
最佳答案
例子:
/// 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
关于dart - RenderRepaintBoundary 到图像而不将小部件添加到屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55134343/
我正在尝试从小部件导出图像而不将此小部件添加到屏幕。 这甚至可能吗? 我已经通过添加到可滚动容器成功导出它,现在我想渲染它而不将其添加到屏幕并将其保存到临时文件以供共享。 我认为那里应该有一个“油漆”
我正在使用 SingleChildScrollView使我的屏幕滚动,但是当我添加 SingleChildScrollView我得到以下错误 RenderBox was not laid out: R
我正在使用 SingleChildScrollView 和 Column 来显示滑动条和 gridview。 如果我在我的专栏中使用一些其他小部件,如文本、图像,应用程序显示正常。但是我的swiper
我是一名优秀的程序员,十分优秀!