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
    包装你的整个
    脚手架
    ,而不是只包装身体嗯,这很奇怪..不知怎的,我做了一些类似的事情,它对我有效,然后尝试一下ove
    Scaffold
    ,使用
    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(
                    [...]
                  )
                //)
            ])
          )
        )
      )
    );