各种移动设备上的颤振响应性问题

Question

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

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

Answer 1

您可以将proxy_hide_header Cache-Control; proxy_hide_header maxage; add_header Cache-Control "no-cache,max-age=$upstream_http_maxage"; 用作父项，

SingleChildScrollView

---

编辑：还要从SingleChildScrollView( child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: Stack( ), ), ); 小部件中删除fit: StackFit.expand,。

Answer 2

此问题背后的原因是高度为100px的sizebox小部件。 删除并使用mainaxisalignment均匀地获得所需的输出。 这是修改后的代码：

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

这解决了问题。

Answer 3

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

任何屏幕尺寸的设备（平板电脑）中的响应UI。 检查这个插件plugin️
https://pub.dev/packages/sizer

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

在使用像这样的值after .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)),
);

我已经使用此插件构建了许多响应式用户界面。