Flutter TextFormField 被键盘隐藏

Question

注意：我使用 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 等等，结果仍然相同 请帮帮我

Answer 1

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

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

和母马反向列表

Answer 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(...

Answer 3

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

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

这对我有用！

Answer 4

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

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

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

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

Answer 5

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

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

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

Answer 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);

Answer 7

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

请注意，resizeToAvoidBottomPadding 将被弃用。

Scaffold( resizeToAvoidBottomInset: false, ...)

Answer 8

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

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

Answer 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(

Answer 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(
                ),
                  ),
                   ),
                    ),
                     )

Answer 11

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

android:windowSoftInputMode="adjustResize"

Answer 12

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

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

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

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

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