当键盘出现时，将文本字段滚动到视图中。

Question

我有一个登录页面，当我按下文字栏时，它应该是键盘的顶部，我试过用下面的代码，但它没有工作，我试过用单子视图还是一样，用列表视图也没有工作，我试过用删除堆栈和用容器累，但它是一样的，我有这个代码。

 Size size = MediaQuery.of(context).size;
    return new Scaffold(
      resizeToAvoidBottomInset: false,
      body: new Stack(
        children: <Widget>[
          Center(
            child: new Image.asset(
              'assets/images/splash_bg.png',
              width: size.width,
              height: size.height,
              fit: BoxFit.fill,
            ),
          ),
          Center(
            child: new Image.asset(
              'assets/images/clublogo.png',
              width: 150,
              height: 150,
            ),
          ),
          Center(
            child: Padding(
              padding: EdgeInsets.only(top: 250, left: 10, right: 10),
              child: TextField(
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color: Colors.orangeAccent[200], width: 2.0),
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(20.0),
                    ),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color: Colors.orangeAccent[200], width: 2.0),
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(20.0),
                    ),
                  ),

                  contentPadding: EdgeInsets.all(5),
                  hintText: " Enter Mobile Number",
                  hintStyle: TextStyle(color: Colors.white, fontSize: 15),
                  suffixIcon: Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.orangeAccent[200],
                        ),
                        borderRadius: BorderRadius.all(
                          Radius.circular(20),
                        )),
                    child: FittedBox(
                      alignment: Alignment.center,
                      fit: BoxFit.fitHeight,
                      child: IconButton(
                        icon: Icon(MdiIcons.arrowRight),
                        iconSize: 33.0,
                        color: Colors.orangeAccent[200],
                        onPressed: () {
                          FocusScope.of(context).requestFocus(FocusNode());
                          print("gfgfg");
                        },
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );

Answer 1

更改 resizeToAvoidBottomInset 到 true 来解决这个问题。这使得文本字段在键盘打开时向上移动。

Answer 2

请粘贴以下代码，并根据您的Widgets进行修改。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 80),
                child: FlutterLogo(
                  size: 200,
                ),
              ),
              Container(
                padding: EdgeInsets.all(10),
                margin: EdgeInsets.only(top: 10),
                child: TextField(
                  controller: _emailController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "Email",
                    labelText: "Enter Email",
                  ),
                  keyboardType: TextInputType.emailAddress,
                ),
              ),
              Container(
                padding: EdgeInsets.all(10),
                margin: EdgeInsets.only(top: 10),
                child: TextField(
                  controller: _passwordController,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "Password",
                    labelText: "Enter Password",
                  ),
                  obscureText: true,
                ),
              ),
              InkWell(
                onTap: () {
                  _signIn();
                },
                child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.blueAccent, Colors.blue, Colors.black],
                      ),
                      borderRadius: BorderRadius.circular(8)),
                  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                  margin: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                  width: MediaQuery.of(context).size.width,
                  child: Center(child: Text("Login with Email")),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }