各种移动设备上的 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 响应问题的主要内容,如果未能解决你的问题,请参考以下文章