【问题标题】:Scroll text fields into view when keyboard comes up Flutter键盘出现时将文本字段滚动到视图中 Flutter
【发布时间】:2020-08-15 16:34:54
【问题描述】:

我有这个登录页面,当我按下文本字段时它应该是键盘的顶部,我尝试使用以下代码,但它没有锻炼,我尝试使用 singlechildview 仍然相同,listview 也没有工作 我尝试删除堆栈并厌倦了容器,但它是一样的,现在我有这个代码,

 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");
                        },
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );

【问题讨论】:

    标签: flutter flutter-layout


    【解决方案1】:

    resizeToAvoidBottomInset 更改为true 以解决问题。这会使文本字段在键盘打开时向上移动。

    【讨论】:

    • 就这么简单,我有那个代码,但它被设置为false,但感谢@Darshan指出它
    【解决方案2】:

    请粘贴下面的代码并根据您的小部件进行更改..

    @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")),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    

    【讨论】:

    • 它正在工作,但我需要在我的代码中使用,但在我的代码中更改了一行,它现在正在工作,感谢 Darshan 在上面指出,但比你的努力@Jaimil Patel
    猜你喜欢
    • 1970-01-01
    • 2014-01-21
    • 1970-01-01
    • 1970-01-01
    • 2020-05-21
    • 2018-12-26
    • 1970-01-01
    • 2012-06-29
    • 1970-01-01
    相关资源
    最近更新 更多