简体繁体 English

Flutter 提高屏幕上大量定位小部件的性能

[英]Flutter increase performance of large number of Positioned Widgets on screen

原文 2022-07-04 09:05:55 5 1 flutter/ performance

I'm making a grid of hexagons by placing Positioned Widgets.我通过放置定位小部件来制作六边形网格。 I have them inside an Interactive Viewer Widget so I can zoom in and out and move around.我将它们放在一个交互式查看器小部件中，这样我就可以放大和缩小并四处移动。

Issue I'm having however is that with a large number of them being rendered it's far too laggy.然而，我遇到的问题是，在渲染大量它们时，它太滞后了。 It's unusable with about 4000 rendered on screen and ideally I need 10s of thousands.它无法在屏幕上渲染大约 4000 个，理想情况下我需要成千上万个。 And this has nothing to do with the Widget itself as it's the same when replaced with a SizedBox with a Container or Text in.这与 Widget 本身无关，因为它在替换为带有 Container 或 Text 的 SizedBox 时是相同的。

I am using an InteractiveViewer.builder and only render the Widgets on the screen, which works great and there's no lag when zoomed in with few widgets on the screen, however I need to zoom out and see more.我正在使用 InteractiveViewer.builder 并且只在屏幕上呈现小部件，效果很好，并且在屏幕上只有少数小部件的情况下放大时没有延迟，但是我需要缩小并查看更多内容。

I've also run in release mode and it's the same.我也在发布模式下运行，它是一样的。 I'm running in Windows and my PC is more than capable, too capable compared to the phones this should also be able to run on.我在 Windows 中运行，而我的 PC 功能强大，与应该能够运行的手机相比，功能太强大了。

Is there some way to increase performance, or some other way I should be doing this instead of thousands of Positioned Widgets?有什么方法可以提高性能，或者我应该这样做而不是成千上万的定位小部件？ Or is Flutter just not suited for this?还是 Flutter 不适合这个？

Edit: Image.编辑：图像。

1 个解决方案

Using a widget for each individual hexagon at that scale feels like massive overkill.以这种规模为每个单独的六边形使用一个小部件感觉就像是大材小用。 If you're going to use flutter, maybe use a CustomPaint widget, which allows you to draw shapes directly to a pixel grid?如果您打算使用 flutter，也许使用CustomPaint小部件，它允许您直接将形状绘制到像素网格？

You could wrap it in a GestureDector and implement scrolling and zooming via that perhaps?您可以将它包装在GestureDector中并通过它实现滚动和缩放？