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

Posted

技术标签:

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

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

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

【问题讨论】:

【参考方案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。

【讨论】:

以上是关于各种移动设备上的 Flutter 响应问题的主要内容,如果未能解决你的问题,请参考以下文章

仅在移动设备上的响应式 CSS 样式

移动设备上的引导响应

viewport 理解-转载

移动前端开发之viewport的深入理解(转)

移动前端开发之viewport的理解

Bootstrap 4 - 移动设备上的行不是响应的