如何在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的函数。函数没有优化，你不能构造窗口小部件，它们每次都会被重新构建！

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(), 
             );
       }
       ...