Question

基本上，我有一个登录页面，首先我将其细分为2个容器，其中一个覆盖了55％和45％的屏幕。然后，在这2个容器的顶部，再添加一个容器，其顶部占屏幕大小的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: () {},
          ),
        )   






      ],
    )
      )
    );
  }
}

更改后，键盘仍会稍微覆盖文本字段。

我能实现一些目标吗

Answer 1

您应该将所有内容都放在ListView中，然后在打开键盘时列表会向上滚动。

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

1 个答案: