各种移动设备上的 Flutter 响应问题答案

【问题标题】：Flutter responsiveness problem on various mobile devices各种移动设备上的 Flutter 响应问题
【发布时间】：2020-04-14 22:42:20
【问题描述】：

我是 Flutter 的初学者，我尝试创建一个虚拟登录页面。当我尝试运行该应用程序时，它在 Pixel 3 XL 上完美无缺，但在 Pixel 2 XL 上却不是很好。我将如何管理响应能力？我遇到了MediaQuery 小部件，但是如何为每个设备创建一个完全响应的应用程序？当今的移动设备（如缺口显示、全屏等）有很多变化，随后出现了平板电脑。我怎么能管理这个？我应该为每个分辨率编写代码吗？

这是我在 Pixel 3 XL 和 Pixel 2 XL 上的设计

【问题讨论】：

标签： flutter dart flutter-layout flutter-dependencies flutter-test

【解决方案1】：

您可以使用SingleChildScrollView 作为父母，

SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
        ),
      ),
    );

编辑：同时从 Stack 小部件中删除 fit: StackFit.expand,。

【讨论】：

我试过了，但它没有改变任何东西......看看我的代码，如果可能的话，提出建议codeshare.io/GqVWrx
为你的完整代码创建一个 git repo，我会研究一下
这里是我的repo：github.com/bala0406/focus7我推送了master，所以你说的更改将不可用。
虽然我无法运行您的项目，但从 Stack 中删除 fit: StackFit.expand, 必须对您有所帮助。
感谢您的回复。我尝试删除 fit 属性，但问题仍然存在

【解决方案2】：

这个问题背后的原因是高度为 100 像素的 sizedbox 小部件。删除它并使用 mainaxisalignment as spaceevenly 给出所需的输出。这是修改后的代码：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          bgimage,
         Column(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                logoimage,    
                userName(),    
                password(),
                forgotPassword(),    
                loginButton(),
                googleSignIn(),
                signUp()
              ],
            ),
        ],
      ),
    );
  }

这样就解决了问题。

【讨论】：

【解决方案3】：

为不同屏幕尺寸制作响应式 UI 的最简单方法是 Sizer 插件。

在任何屏幕尺寸的设备以及平板电脑上都具有响应式 UI。看看这个插件⬇️
https://pub.dev/packages/sizer

.h  - for widget height
.w  - for widget width
.sp - for font size

在这样的值之后使用.h、.w、.sp ⬇️

例子：

Container(
  height: 10.0.h,  //10% of screen height
  width: 80.0.w,   //80% of screen width
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

我已经用这个插件构建了许多响应式 UI。

【讨论】：