SingleChildScrollView“切割”屏幕 [英] SingleChildScrollView 'cutting' the screen
问题描述
这是我正在开发的登录页面的屏幕:
Here's a screen of the login page I am developing :
当键盘出现时,表明我有溢出现象,这似乎很正常:
When the keyboard shows up, it indicates me that there is an overflow, which seems to be normal :
在网络上进行了一些研究之后,我发现我必须使用 SingleChildScrollView
小部件,以便在键盘输入时出现,我就可以滚动。从我所看到的,我不得不将其添加到脚手架的 body
属性中。那就是我所做的,并且有效:我能够滚动并且没有更多的溢出错误消息。
After some researches on the web, I found that I had to use the SingleChildScrollView
widget so that when the keyboard shows up, I'd be able to scroll. From what I've seen, I had to add it within the body
property of the Scaffold. That's what I did, and it works : I'm able to scroll and no more overflow error message.
但是:如您所见,显示已被剪切:
BUT : The display has been cut as you can see :
有人知道这是哪里来的吗?
Does someone know where does that come from ?
这是我的代码
return Scaffold(
body:
SingleChildScrollView(child:
Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
SizedBox(
height: 150,
),
Container(
padding: EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(
children: <Widget>[
tabBarContainer,
SizedBox(
height: 20.0,
),
AnimatedContainer(
duration: Duration(seconds: 1),
padding: EdgeInsets.only(top: 40.0, left: 40.0, right: 40.0),
width: double.infinity,
height: _containerHeight,
decoration: cardDecoration,
child: TabBarView(
children: <Widget>[
LoginForm(),
RegisterForm(),
],
)
),
],
),
)
],
),
)
)
)
);
编辑:我也尝试添加ConstrainedBox,如api flutter网站示例所示,但是它并没有帮助我:/
EDIT : I also tried to add the ConstrainedBox as shown in the exemple of the api flutter website, but it didn't help me :/
推荐答案
在SingleChildScrollView中用一个Expanded包裹,他自己包裹在Column中。
wrap the SingleChildScrollView with an Expanded, himself wrapped within a Column.
Column(
children:<Widget>[
Expanded(
child:SingleChildScrollView(...)
)
]
)
这篇关于SingleChildScrollView“切割”屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!