使用resizeToAvoidBottomPadding无法解决颤振键盘重叠问题

问题描述 投票:0回答:1

基本上我有一个登录页面,我首先进入2个容器,其中一个覆盖55%和45%的屏幕。然后在这两个容器的顶部,我添加了一个容器,其中屏幕大小的前40%,并且在其中我还有一个容器,其中包含我的用户名和密码文本字段。所以在设计方面我很好。

现在键盘出现密码字段的问题完全不可见。首先我只是堆栈然后我做谷歌和一些建议把脚手架和添加此行resizeToAvoidBottomPadding:false,但似乎也不适合我。

Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Container(
        child: Stack(

      children: <Widget>[

        // The containers in the background
        new Column(
          children: <Widget>[
            new Container(
              height: MediaQuery.of(context).size.height * .55,
             //color: Colors.blue,
              decoration: new BoxDecoration(
               image: new DecorationImage(image: new AssetImage("lib/assets/cbg.png"), fit: BoxFit.cover,),
             ),
            ),
            new Container(
              height: MediaQuery.of(context).size.height * .45,
              color: Colors.white,
            )
          ],
        ),
        // The card widget with top padding, 
        // incase if you wanted bottom padding to work, 
        // set the `alignment` of container to Alignment.bottomCenter
        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .40,
              right: 20.0,
              left: 20.0),
          child: new Container(

            height: MediaQuery.of(context).size.height * .45,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 4.0,
              child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40.0),

              child: Column(
                children: <Widget>[
                SizedBox(height: MediaQuery.of(context).size.height * .05),
new TextFormField(
                      decoration: new InputDecoration(
                        labelText: "Enter Email",
                        fillColor: Colors.white,
                        border: new OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(10.0),
                          borderSide: new BorderSide(
                            color: Colors.blue
                          ),
                        ),
                        //fillColor: Colors.green
                      ),
                      validator: (val) {
                        if(val.length==0) {
                          return "Email cannot be empty";
                        }else{
                          return null;
                        }
                      },
                      keyboardType: TextInputType.emailAddress,
                      style: new TextStyle(
                        fontFamily: "Poppins",
                      ),
                    ),
SizedBox(height: MediaQuery.of(context).size.height * .05),
new TextFormField(
                      decoration: new InputDecoration(
                        labelText: "Enter Password",
                        fillColor: Colors.white,
                        border: new OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(10.0),
                          borderSide: new BorderSide(
                          ),
                        ),
                        //fillColor: Colors.green
                      ),
                      validator: (val) {
                        if(val.length==0) {
                          return "Password cannot be empty";
                        }else{
                          return null;
                        }
                      },
                      keyboardType: TextInputType.emailAddress,
                      style: new TextStyle(
                        fontFamily: "Poppins",
                      ),
                    ),
                ],
              ),
              )
            ),
          ),
        ),

        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .80,
              right: 50.0,
              left: 50.0),
          child: new FlatButton(
            color: Colors.red,
            child: Text("Press Me"),
            onPressed: () {},
          ),
        ),

        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .90,
              right: 50.0,
              left: 50.0),
          child: new FlatButton(
            color: Colors.red,
            child: Text("Forgot Password ?"),
            onPressed: () {},
          ),
        )   






      ],
    )
      )
    );
  }
}

更改后键盘仍然出现轻微覆盖文本字段。

enter image description here

我可以实现一些吗?

enter image description here

dart flutter flutter-layout
1个回答
1
投票

您应该将所有这些放在ListView中,然后当您打开键盘时,列表将向上滚动。

© www.soinside.com 2019 - 2024. All rights reserved.