如何使Flutter应用程序的高度和宽度适应不同的屏幕尺寸？

Question

我和我的团队正在开发一款适用于不同屏幕大小的模拟器。在集成过程中，我们发现一些属性被其他属性覆盖，有些属性则根本看不到。因此，我们该如何使我们的应用程序适应不同的屏幕大小呢？我们查阅了mediaquery()小部件，但我并没有完全理解。

- Gokul Jayaraman

Answer 1

使用MediaQuery类：

MediaQueryData queryData;
queryData = MediaQuery.of(context);

MediaQuery：建立一个子树，在其中媒体查询会解析给定的数据。

MediaQueryData：关于设备上某个媒体（如窗口）的信息。

获取设备像素比：

queryData.devicePixelRatio

获取设备屏幕的宽度和高度：

queryData.size.width
queryData.size.height

获取文本缩放比例：

queryData.textScaleFactor

使用 AspectRatio 类：

从文档中可以看到：

尝试将子组件调整为特定的宽高比的小部件。

该小部件首先尝试布局约束允许的最大宽度。小部件的高度是应用给定宽高比到宽度上得出的，它被表达为宽度与高度的比率。

例如，16:9 的宽高比将具有值 16.0/9.0。如果最大宽度为无限大，则初始宽度是通过将宽高比应用于最大高度来确定的。

现在考虑第二个例子，这次宽高比为 2.0，布局约束要求宽度介于 0.0 和 100.0 之间，高度介于 0.0 和 100.0 之间。我们将选择宽度为 100.0（允许的最大值）和高度为 50.0（以匹配宽高比）。

//example
new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.orange,
      )
    ),
  ),
),

同样你也可以使用以下内容::

• LayoutBuilder
• FittedBox
• CustomMultiChildLayout

- AZxBB

---

谢谢，我会参考并实施，完成后会告诉你。 - Gokul Jayaraman

Answer 2

MediaQuery是这种情况的一个不错的选择。

例如，我只想创建一个容器，其宽度和高度分别为移动屏幕可用宽度和高度的一半。

class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Container(
      color:Colors.orange,
      width: size.width/2,
      height: size.height/2
    );
  }
}

- Osama Buzdar