[英]Flutter: Scroll the screen up when keyboard appears
I am trying to build a login screen which contains phone number field on top along with an image and login button at the bottom, as soon as I clicked on the phone number field keyboard rises but my 'login button' hides behind the keyboard, I have used "SingleChildScrollView" so as when the keyboard rises the page becomes scrollable but login button does not appear on the top of the keyboard.我正在尝试构建一个登录屏幕,其中包含顶部的电话号码字段以及底部的图像和登录按钮,一旦我点击电话号码字段键盘升起但我的“登录按钮”隐藏在键盘后面,我已使用“SingleChildScrollView”,以便当键盘上升时页面变为可滚动但登录按钮不会出现在键盘顶部。
Here is the snippet of the code:这是代码片段:
return Scaffold(
backgroundColor: white.color,
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
'Enter your mobile number',
style: TextStyle(
fontSize: headSize.fontSize,
fontWeight: FontWeight.w400,
color: black.color,
fontFamily: 'ProductSans',
),
),
),
Container(
height: screenHeight / 15,
child: Center(
child: SizedBox(
height: screenHeight / 6,
width: double.infinity,
child: RaisedButton(
color: indigo.color,
shape: borderRadius,
child: Text(
"Continue",
....
I can give you a hint as your code is kinda hard to understand, you can use MediaQuery.of(context).viewInsets.bottom.我可以给你一个提示,因为你的代码有点难以理解,你可以使用 MediaQuery.of(context).viewInsets.bottom。 Now the question is what it does and how will it help me.现在的问题是它的作用以及它将如何帮助我。
2.How can I use: you can create an empty container or sized box at the bottom of the column and set its height=MediaQuery.of(context).viewInsets.bottom and wrap your column in a single child scroll view. 2.如何使用:您可以在列底部创建一个空容器或大小框,并设置其 height=MediaQuery.of(context).viewInsets.bottom 并将您的列包装在单个子滚动视图中。
Try replacing with screenHeight / 15 and screenHeight / 6
with for example 100 and check the result.尝试用例如 100 替换screenHeight / 15 and screenHeight / 6
并检查结果。
Container(
height: screenHeight / 15,
child: Center(
child: SizedBox(
height: screenHeight / 6,
width: double.infinity,
child: RaisedButton(
color: indigo.color,
shape: borderRadius,
child: Text(
"Continue",
By the way you are setting the height of the parent to be smaller than the child.顺便说一句,您将父级的高度设置为小于子级。 I wonder why?我想知道为什么? :) :)
For example, if screenHeight = 100例如,如果 screenHeight = 100
100/15 = 6.6 parent 100/15 = 6.6 父母
100/6 = 16.6 child 100/6 = 16.6 孩子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.