如何在 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 构造小部件，它们每次都会重新构建！

Answer 2

要使任何小部件的大小与任何设备成比例，您需要在设置小部件大小之前获取设备的宽度和高度。 例如，要创建一个大小可响应任何设备高度和宽度并在旋转时缩放的容器，您需要使用 MediaQuery 获取设备高度和宽度来缩放您的小部件大小，如下所示：

 ....


     @override
        Widget build(BuildContext context){
             double _height = MediaQuery.of(context).size.height;
             double _width = MediaQuery.of(context).size.width;
             return Container(
                  height: _width > _height ? _width / 10 : _height / 10,
                  width: _width > _height? ? _height / 10 : _widht / 10, 
                  child: AnyWidget(), 
             );
       }
       ...