如何在不同的UI和不同手机的大小之间同步flutter应用程序

Question

在此处输入图像描述

我的应用程序没有与不同的手机同步。如何解决这个问题？请帮忙详细解释一下？

Answer 1

您可以使用为不同的屏幕构建

OrientationBuilder

和

MediaQuery。

此外，您还可以使用插件fluft_screenutil。

flutter_screenutil-用于调整屏幕和字体大小的flutter插件。让您的UI在不同的屏幕大小上显示合理的布局！注意：此插件仍在开发中，某些API可能还不可用

Answer 2

使您的容器可滚动(ListView或其他类型(，这样当屏幕大小更改时，您的内容就不会被隐藏

Answer 3

您想要使用MediaQuery类来获取用户屏幕的高度和宽度。你可以在这里阅读：https://api.flutter.dev/flutter/widgets/MediaQuery-class.html

为了获得用户屏幕的高度和宽度，你可以在你的小部件构建方法中调用这个：

var screenWidth = MediaQuery.of(context).size.width;
var screenHeight = MediaQuery.of(context).size.height;

然后，在你有了这些变量之后，你可以让其他小部件的大小与你的设计成比例。我通常在AdobeXD中设计，我使用640 x 360的模板屏幕大小。然后，如果我在设计中制作了一个尺寸为50x50的特定小部件，我会使用以下公式在应用程序中设置相应的小部件高度和宽度：

50 / 640.0 * screenHeight;
50 / 360.0 * screenWidth;

这样，我的小部件可能会根据用户的屏幕大小而有所不同。你应该把它和贝苏夫卡德·门吉所说的结合起来。如果您认为所有的小部件都无法放在小屏幕上，请使用ListView。