时间戳

首页 > 解决方案 > 如何让flutter应用的高宽适应不同的屏幕尺寸？

flutter - 如何让flutter应用的高宽适应不同的屏幕尺寸？

问题描述

我和我的团队正在开发不同的屏幕尺寸模拟器。在集成时，我们注意到一些属性与其他属性重叠，而有些属性是不可见的。那么我们如何才能让我们的应用适应不同的屏幕尺寸。浏览了 mediaquery() 小部件，但我不太了解。

标签： flutterdartmobile-application

解决方案

使用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,
      )
    ),
  ),
),

您也可以使用：

推荐阅读