在屏幕外构建小部件 [英] Build the widget off screen

问题描述

我需要构建一个小部件以获取其位图.我不在乎屏幕上有小部件.

I need to build a widget just to get its bitmap. I don't care about widget being on the screen.

所以我的问题是:我可以以某种方式在不使用屏幕视图层次结构的情况下在侧面"构建窗口小部件吗?

So my question is: can I somehow build the widget "on the side" without using the screen view hierarchy?

我没有找到一种方法.因此，如果无法实现，我可以在屏幕上构建小部件，但实际上不显示它.我已经尝试过 Visibility ，但这会使 RenderObject 为空.使用 Offstage 时，在断言上调用 toImage()时会失败:断言失败:2752行pos 12:'！debugNeedsPaint':不正确.

I didn't find a way to do it. So, if that's not possible can I build the widget on the screen, but not actually show it. I've tried Visibility but that will make RenderObject null. With Offstage it would fail when calling toImage() on assertion: Failed assertion: line 2752 pos 12: ‘!debugNeedsPaint’: is not true.

推荐答案

看来这在Flutter的最新版本中出现了问题.不知道为什么，但是我想Flutter现在会在确定完全不可见叠加层时避免绘制.此方法仍然可以使用，但需要与翻译结合才能将其移出屏幕: https://gist.github.com/itsJoKr/ce5ec57bd6dedf74d1737c1f39481913

It looks like this broke in a recent version of Flutter. Not sure why, but I guess that Flutter will now avoid drawing when it determines that overlay will not be visible at all. This method can still be used, but it needs to combine with translate to move it offscreen: https://gist.github.com/itsJoKr/ce5ec57bd6dedf74d1737c1f39481913

有人建议使用 OverlayEntry ，它看起来是最好的解决方案.

Some people recommended using OverlayEntry and it looks like the best solution.

您可以将 OverlayEntry 放置在当前屏幕下方，以使其不可见，并使用 maintainState:true 构建.一个很大的优点是，由于它不与当前的窗口小部件树混合使用，因此易于实现.

You can put OverlayEntry below the current screen so it's not visible and with maintainState: true it will be built. A big advantage is that it's easier to implement as it doesn't mix with the current widget tree.

OverlayState overlayState = Overlay.of(context);
OverlayEntry entry = OverlayEntry(builder: (context) {
  return RepaintBoundary(key: key, child: yourWidget,); // Using RepaintBoundary to get RenderObject and convert to image
}, maintainState: true);
overlayState.insert(entry);
// doesn't work anymore
// overlayState.rearrange([entry], above: entry); // Didn't find how to insert it at the bottom of current overlays, so this should rearrange it so that our entry is at the bottom

这篇关于在屏幕外构建小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！