【问题标题】:Flutter: TextFormField Hidden by KeyboardFlutter:键盘隐藏的TextFormField
【发布时间】:2020-12-30 16:55:20
【问题描述】:

我有一个这样的身份验证屏幕:

  @override
  Widget build(BuildContext context) {
    final bottom = MediaQuery.of(context).viewInsets.bottom;

    return Scaffold(
      resizeToAvoidBottomInset: false,
      resizeToAvoidBottomPadding: false,
      body: SingleChildScrollView(
        reverse: true,
        child: Padding(
          padding: EdgeInsets.only(bottom: bottom),
          child: Column(
            children: <Widget>[
              SizedBox(height: 48),
              Image.asset(
                "assets/images/logo.png",
                width: 132,
              ),
              SizedBox(height: 48),
              Form(
                child: Column(
                  children: <Widget>[
                    AuthTextFormField(
                      icon: Icons.email_outlined,
                      labelText: 'Email',
                      keyboardType: TextInputType.emailAddress,
                    ),
                    AuthTextFormField(
                      icon: Icons.lock_outline,
                      labelText: 'Password',
                      obscureText: true,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

我已经关注了这个answer,但它仍然对我不起作用。键盘仍然覆盖了文本字段。有什么想法吗?

谢谢。

[更新] 我使用上面答案中编写的代码(Jay Jay)。而且,这是屏幕截图:

它的覆盖是这样的:

【问题讨论】:

  • 你能显示该文件的完整代码,以及你的屏幕输出吗?
  • @Mukul 这就是文件,它只是没有任何逻辑的无状态小部件。我已经更新了截图
  • 请检查我的代码,我对您的代码做了一些小改动,对我来说效果很好。
  • 我已经复制粘贴了你的代码,但它仍然不适合我
  • 尝试删除 resizeToAvoidBottomInset: false, resizeToAvoidBottomPadding: false,这些行并反过来注释:SingleChildScrollView 的 true

标签: flutter keyboard textformfield


【解决方案1】:

这个Code 对我来说很好用,我删除了image 并在其位置添加了一个Container 和一些height

我也对你的代码做了一些修改,

Scaffold(
      resizeToAvoidBottomPadding: true,
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(bottom: bottom),
          child: Column(
            children: <Widget>[
              SizedBox(height: 48),
              Container(
                color: Colors.blue,
                height: 500,
              ),
              SizedBox(height: 48),
              Form(
                child: Column(
                  children: <Widget>[
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.lock_outline),
                          labelText: 'Password'),
                      obscureText: true,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                          icon: Icon(Icons.email), labelText: 'Email'),
                      keyboardType: TextInputType.emailAddress,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

【讨论】:

    【解决方案2】:

    尝试后,我认为您应该为 image.asset 添加一个高度,或者更好地使用容器并在其装饰属性中指定图像并给容器一个固定的高度。它应该都能正常工作。

    这是我的有效代码:

    return Scaffold(
      resizeToAvoidBottomInset: false,
      resizeToAvoidBottomPadding: false,
      body: SingleChildScrollView(
        reverse: true,
        child: Padding(
          padding: EdgeInsets.only(bottom: bottom),
          child: Column(
            children: <Widget>[
              SizedBox(height: 48),
              Container(
                height: 300,
                color: Colors.red,
              ),
              SizedBox(height: 48),
              Form(
                child: Column(
                  children: <Widget>[
                    TextFormField(
                      decoration: InputDecoration(
                        icon:Icon(Icons.email),
                        labelText: 'Email'
                      ),
                      keyboardType: TextInputType.emailAddress,
                    ),
                    TextFormField(
                      decoration: InputDecoration(
                        icon: Icon(Icons.lock_outline),
                        labelText: 'Password'
                      ),
                      obscureText: true,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
    

    【讨论】:

    • 嗨,感谢您的回答。不幸的是,在复制粘贴您的代码后,它仍然对我不起作用。
    猜你喜欢
    • 2020-04-28
    • 2019-05-04
    • 2019-08-12
    • 1970-01-01
    • 1970-01-01
    • 2021-08-25
    • 2020-10-15
    • 2021-10-06
    • 1970-01-01
    相关资源
    最近更新 更多