键盘隐藏的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

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

您可以阅读此内容以获得更好的解决方案：。

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

您也可以将 TextWidget 换成 SingleChildScrollView()。这将允许您在显示键盘时滚动。

Answer 2

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

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

和母马反向列表

Answer 3

这对我有用...

先加这个

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 参考 'bottom'..

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

Answer 4

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

请注意，resizeToAvoidBottomPadding 将被弃用。

Scaffold( resizeToAvoidBottomInset: false, ...)

Answer 5

对我有用的是将文档与此处的提示相结合。它使用 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 6

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

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

从 android 文件夹中的 styles.xml 文件中，解决问题。

Answer 7

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

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

Answer 8

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

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

这对我有用！

Answer 9

在我的例子中，重要的是只使用小的填充，否则打开键盘时会弄得一团糟。

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 10

太添加到这里普遍接受的答案是

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 11

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

android:windowSoftInputMode="adjustResize"

Answer 12

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

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

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

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

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

Answer 13

为了让构建方法的内容居中，我添加了这个：

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

和return这个：

return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          fit: StackFit.expand,
          children: [
            ///Content
            Align(
              alignment: Alignment.center,
              child: SingleChildScrollView(
                reverse: true,
                child: Padding(
                  padding: EdgeInsets.only(bottom: bottom),
                  child: Column(
                    children: [
                      MyContent()
                    ],
                  ),
                ),
              ),
            ),
            ///Button
            Align(
              alignment: Alignment.bottomCenter,
              child: MyBottomButton()
            )
          ],
        ),
      ),
    );

而且它与键盘流配合得很好

键盘隐藏的Flutter TextFormField

Flutter TextFormField hidden by keyboard

dart

flutter

flutter-layout