Flutter 键盘关闭后UI错误
我从一个没有向上滑动但被挤压的支架开始,在一个建议的答案之后,我将其调整为使用Flutter 键盘关闭后UI错误,flutter,Flutter,我从一个没有向上滑动但被挤压的支架开始,在一个建议的答案之后,我将其调整为使用resizeToAvoidBottomInset:true,和SingleChildScrollView作为主体并移除展开的 包装第二列的小部件。现在,这把用户界面搞得一团糟。firs容器只占据了屏幕高度的2/3,所以在调整了所有填充物后,UI恢复了原来的状态。问题是,当键盘出现时,屏幕会向上滑动,当键盘消失时,用户界面又变得一团糟。你能看到出了什么问题吗 原脚手架: 脚手架( resizeToAvoidBottomP
resizeToAvoidBottomInset:true,
和SingleChildScrollView
作为主体并移除展开的
包装第二列的小部件。现在,这把用户界面搞得一团糟。firs容器只占据了屏幕高度的2/3,所以在调整了所有填充物后,UI恢复了原来的状态。问题是,当键盘出现时,屏幕会向上滑动,当键盘消失时,用户界面又变得一团糟。你能看到出了什么问题吗
原脚手架:
脚手架(
resizeToAvoidBottomPadding:false,
主体:容器(
颜色:颜色。黑色54,
key:widget.key,
填充:边缘组。对称(水平:100,垂直:30),
子:容器(
装饰:盒子装饰(
颜色:颜色。透明,
边界半径:边界半径。圆形(5),
边框:边框。全部(颜色:Colors.redAccent,宽度:2),
),
填充:边缘组。对称(水平:50,垂直:15),
子:列(
mainAxisAlignment:mainAxisAlignment.spaceBetween,
crossAxisAlignment:crossAxisAlignment.center,
儿童:[
扩大(
孩子:填充(
填充:常量边集。对称(水平:50.0),
子:列(
mainAxisAlignment:mainAxisAlignment.start,
crossAxisAlignment:crossAxisAlignment.center,
儿童:[
],
),
],
),
),
),
),
改性脚手架:
脚手架(
resizeToAvoidBottomInset:true,//小部件仍然受到挤压
正文:SingleChildScrollView(
子:容器(
颜色:颜色。黑色54,
key:widget.key,
填充:仅限边设置(左:50,右:50,顶部:30,底部:100),
子:容器(
装饰:盒子装饰(
颜色:颜色。透明,
边界半径:边界半径。圆形(5),
边框:边框。全部(颜色:Colors.redAccent,宽度:2),
),
填充:边缘组。对称(水平:50,垂直:30),
子:列(
mainAxisAlignment:mainAxisAlignment.spaceBetween,
crossAxisAlignment:crossAxisAlignment.center,
儿童:[
填充物(
填充:常量边集。对称(水平:50),
子:列(
mainAxisAlignment:mainAxisAlignment.spaceBetween,
crossAxisAlignment:crossAxisAlignment.center,
儿童:[
],
),
//尺寸箱(高度:10),
],
),
),
),
),
),
用SingleChildScrollView
包装整个页面应该可以做到这一点一个可能的解决方案:
设置resizetoavidbottompadding:true
先删除扩展的
大概是这样的:
Scaffold(
resizeToAvoidBottomPadding: true, ** <- here **
body: SingleChildScrollView(
child: Container(
[...]
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//Expanded( ** <- here - remove this **
//child:
Padding(
[...]
)
//)
])
)
)
)
);
脚手架(
resizeToAvoidBottomPadding:true,**的确,我尝试了我的前两个代码示例。我做错了吗?你能提供一种正确的包装方式吗?用SingleChildScrollView
包装你的整个脚手架
,而不是只包装身体嗯,这很奇怪..不知怎的,我做了一些类似的事情,它对我有效,然后尝试一下oveScaffold
,使用SingleChildScrollView(child:Container(child:Column(childs:[//此处的小部件)))
Nope..也不起作用。我添加了视图的图片。我注意到这是收缩的第二列,因为它位于扩展的
小部件中。很抱歉,我不能提供进一步的帮助,我很少接触扩展的小部件,因为它经常遇到错误,但从来并没有你们的类型,所以我认为我可以提供帮助,但不幸的是;(抱歉Scaffold(resizeToAvoidBottomInset:false,resizeToAvoidBottomPadding:false,主体:SingleChildScrollView(物理:ClampingScrollPhysics(),子:容器(
在此代码中尝试删除物理:ClampingScrollPhysics(),
@Vincenzously SingleChildScrollView将修复issue@VincenzoThank太感谢你了!我已经为此发疯好几天了。我有点明白这是扩展的原因。但是当我尝试删除它时,我得到了一个错误,因为列中的行有一个扩展的小部件。我猜在combina中的SingleChildScrollView
使用resizetoavidobtompadding:true
(而不是false
,因为我尝试了各种建议的解决方案)修复了它。再次非常感谢。干杯。实际上使用SingleChildScrollView弄乱了UI。然后我重新调整了所有填充值以再次获得正确的UI绘图。当键盘打开时视图向上滑动,当它关闭UI后,UI有点错误。你能看到哪里出了问题吗?查看更新的问题在打开键盘之前,请尝试sc滚动屏幕,因为我假设它的底部有一个空间。确实..当重新填充以重新获得以前的UI布局时,我实际上认为第一个填充中的底部为100..但这是给我正确UI的值..无论如何..再次非常感谢
Scaffold(
resizeToAvoidBottomInset: true, // widgets still get squeezed
body: SingleChildScrollView(
child: Container(
color: Colors.black54,
key: widget.key,
padding: EdgeInsets.only(left:50, right:50, top:30, bottom: 100),
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.redAccent, width: 2),
),
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
],
),
// SizedBox(height: 10),
],
),
),
),
),
),
Scaffold(
resizeToAvoidBottomPadding: true, ** <- here **
body: SingleChildScrollView(
child: Container(
[...]
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//Expanded( ** <- here - remove this **
//child:
Padding(
[...]
)
//)
])
)
)
)
);