user-interface - 如何在Flutter中设计兼容屏幕分辨率的UI？

Question

我用Flutter开发的应用程序设计在屏幕尺寸不同的设备(平板电脑和手机)上都被破坏了。卡和容器重叠且大小不同。你有什么建议？

Answer 1

我真的建议您看一看为解决您的问题而创建的LayoutBuilder类。看一下每个信息的文档；这是一个简单的用法:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < YOUR_SIZE)
      return Column();
    else
      return GridView();       
  },
),

非常直观:如果设备的宽度小于 YOUR_SIZE，则屏幕不是那么“宽”，并且一列很合适。否则，您可以将小部件放置在N列的网格中。

Official video about LayoutBuilder on YouTube.

使用小部件组成而不是返回 Widget的函数。函数未优化，您无法const-construct小部件，并且每次都会对其进行重建!