Flutter TextFormField 被键盘隐藏

Posted 2023-02-23

【中文标题】Flutter TextFormField 被键盘隐藏

【英文标题】：Flutter TextFormField hidden by keyboard

【发布时间】：2019-05-04 08:12:37

【问题描述】：

注意：我使用 Navigator.of(context).push 来推送 ModalRoute，

您好，我在正文中有 ModalRoute 和 TextFormField 的页面，但是当键盘显示时，输入被键盘隐藏，如何解决这个问题？

return Container(
      child: ListView(
          children: <Widget>[
            //other widget
            SizedBox(height: _qtyAnimation.value),
            Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    "Jumlah",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
                SizedBox(
                  width: 145.0,
                  child: TextFormField(
                    focusNode: _qtyFocusNode,
                    controller: qty,
                    keyboardType: TextInputType.number,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(0.0),
                      prefixIcon: IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: () ,
                      ),
                      border: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.grey, width: 0.1),
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () ,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
    );

这就是我的代码，我尝试使用 focusnode 等等，结果仍然相同 请帮帮我

【问题讨论】：

您可以使用 FocusNode 来做到这一点：***.com/questions/50736571/…

How to hide on screen keyboard?的可能重复

它对我不起作用，已经测试了那个链接，

我的解决方案here at this thread 解决了这个问题。它非常简短，不需要动画。

【参考方案1】：

感谢使用文本字段底部的填充解决了我的问题

    Padding(
             padding: EdgeInsets.only(
             bottom: MediaQuery.of(context).viewInsets.bottom));

和母马反向列表

【讨论】：

很好的解决方案！ :)

确实很棒的解决方案！谢谢。

【参考方案2】：

这对我有用...

先添加这个

final bottom = MediaQuery.of(context).viewInsets.bottom;

然后使用 SingleChildScrollView() 像这样围绕主小部件（无论您使用什么，例如 Column、ListView 等）...

你需要 "reverse: true"

Widget build
return Scaffold(
body: SingleChildScrollView(
reverse: true;
child: Container(...

Scaffold 也需要这两行代码..

return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(...

最后，为您的 EdgeInsets 引用“底部”..

body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Container(...

【讨论】：

padding: EdgeInsets.only(bottom: bottom) 抛出一个错误：bottom 必须是一个常量...你如何解决这个问题？

法比奥你在Widget _body(WriteReviewModel model) 之后添加'final bottom = MediaQuery.of(context).viewInsets.bottom;

在使用 ConstrainedBox 和 SingleChildScrollView 在列的底部编写扩展的多行文本字段时，这是唯一对我有用的方法。

【参考方案3】：

您需要将所有内容包装在 SingleChildScrollView 中，并将 reverse 设置为 true。

SingleChildScrollView(
   reverse: true,
   child: Container(),
);

这对我有用！

【讨论】：

如果您的内容默认不滚动（没有显示键盘），这是最简单的解决方案。事实上，如果您的内容大于屏幕高度，即使没有键盘，它也会一直滚动到底部。这可能不是你想要的。

【参考方案4】：

这方面的方法很少（截至 2018 年 12 月 3 日^rd）：

您可以阅读这篇文章以获得更好的解决方案：When i select a Textfield the keyboard moves over it。

在Scaffold() 内添加：resizeToAvoidBottomPadding: false,。

您也可以用SingleChildScrollView() 包裹您的TextWidget。这将允许您在显示键盘时滚动。

【讨论】：

对我不起作用，我的文本字段在行和大小框内

didierboelens.com/2018/04/…

【参考方案5】：

我遇到了类似的问题。我尝试了所有解决方案，但没有奏效。 最后我删除了

<item name="android:windowFullscreen">true</item>

从我的android文件夹中的styles.xml文件中，修复问题。

【讨论】：

对我来说，这是在调试版本中工作，但在发布版本中键盘刚刚出现并立即隐藏，请确认是否有人这样？

没问题，它在调试和发布时都可以正常工作。您必须有另一个导致此问题的附加配置。在干净的项目中尝试。

【参考方案6】：

这里也加入了普遍接受的答案

body: SingleChildScrollView(
          reverse: true,
          child: Container(
              child: Padding(
            padding: EdgeInsets.only(bottom: bottom),
            child: Stack(
              fit: StackFit.loose,
              children: <Widget>[

我在底部插图中添加了一个东西，以防止它太高。

    var bottom = MediaQuery.of(context).viewInsets.bottom;
bottom = max(min(bottom, 80), 0);

【参考方案7】：

在您的 Scaffold 小部件中将 resizeToAvoidBottomInset 设置为 false。

请注意，resizeToAvoidBottomPadding 将被弃用。

Scaffold( resizeToAvoidBottomInset: false, ...)

【讨论】：

我花了很长时间才了解resizeToAvoidBottomInset。每次我使用 flex 布局时，我的键盘都会坏掉。太可怕了。

【参考方案8】：

我在 modal_bottom_sheet 插件中使用表单元素。我通过将以下代码添加到 SingleChildScrollView 来解决它。

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)

【讨论】：

这并没有改变我的问题

【参考方案9】：

对我有用的是将文档与此处的提示结合起来。它使用 LayoutBuilder、SingleChildScrollView、Padding（带有底部 hack），最后是 ConstrainedBox（使用 Expanded）。通过将这些结合起来，它可以与 Columns 内的 Expanded 小部件一起使用。

文档（来自 LayoutBuilder 的来源）： https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

结构

 return Scaffold(
      resizeToAvoidBottomInset: false,
      resizeToAvoidBottomPadding: false,`

body: SafeArea(
        child: Container(
          child: LayoutBuilder(builder:
              (BuildContext context, BoxConstraints viewportConstraints) 
            return SingleChildScrollView(
              reverse: true,
              child: Padding(
                padding: EdgeInsets.only(bottom: bottom),
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                      minHeight: viewportConstraints.maxHeight,
                      maxHeight: viewportConstraints.maxHeight),
                  child: Column(

【讨论】：

嗯，这个案例对我来说在 beta 频道上开箱即用

【参考方案10】：

在我的情况下，只使用小填充很重要，否则打开键盘时会弄得一团糟。

Padding(padding: EdgeInsets.only(bottom: 20)

检查我的解决方案：

child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
    body: Container(
      color: Colors.black,
       child: SingleChildScrollView(
         reverse: true,
          child: Padding(
           padding: EdgeInsets.only(bottom: 20),
            child: Container(
              child: ReservationCard(
                ),
                  ),
                   ),
                    ),
                     )

【参考方案11】：

对于 Android，请检查 windowSoftInputMode。 (AndroidManifest.xml)

android:windowSoftInputMode="adjustResize"

【参考方案12】：

当 resizeToAvoidBottomInset 设置为 true 时，SingleChildScrollView 确实解决了该问题，而将其设置为 false 将是不推荐的解决方案。让我解释一下原因：

当用户按下 TextField 时，通常会弹出一个虚拟键盘并占据屏幕底部的大部分空间。在这种情况下，就会出现问题，如果 TextField 靠近所述底部，它将被键盘覆盖（resizeToAvoid... 设置为 false），用户将无法看到他们输入的内容；如果 TextField 下方还有其他小部件（当 resizeToAvoid 为 true 时，例如与 TextField 在同一列中的按钮），则会出现溢出，因为剩余的视口上没有空间让它们显示。

从用户的角度来说，我们想要的是：

获得焦点的TextField始终可见。 没有底部溢出和错误的图形。

但是，这样的描述不是技术性的，它并没有告诉我们具体如何实现它。我们真正想要的是，让整个布局可滚动，并允许 Scaffold 调整大小。当视口调整大小时，焦点 TextField 下方的任何内容都会滚动到不可见的底部，并且 TextField 本身会捕捉到键盘。这就是我们想要 SingleChildScrollView + resize = true 的原因。