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

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

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

这对我有用！

Answer 2

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

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

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

Answer 3

这对我有用...

首先添加此

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

然后使用SingleChildScrollView（）环绕主窗口小部件（无论您使用的是什么，例如Column，ListView等）……

您需要“ reverse：true”

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

您还需要脚手架的这两行代码。.

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

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

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

Answer 4

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

请注意，resizeToAvoidBottomPadding将被弃用。

Scaffold( resizeToAvoidBottomInset: false, ...)

Answer 5

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

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

和母马反向列表

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

（现在）有几种方法：

您可以阅读以下内容以获得更好的解决方案：When i select a Textfield the keyboard moves over it

在Scafold()内添加：resizeToAvoidBottomPadding: false,

也可以，

用SingleChildScrollView()包装TextWidget。这将使您可以灵活地在键盘出现时进行滚动。

Answer 8

对我有用的是将文档与此处的提示结合在一起。它使用LayoutBuilder，SingleChildScrollView，填充（带有底部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 9

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

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

Answer 10

就我而言，仅使用小填充很重要，否则打开键盘时会弄得一团糟。

  buildTabBarContent() {
    return TabBar(
      isScrollable: true,
      labelColor: Colors.black,
      indicator: DotIndicator(
        color: Colors.black,
        distanceFromCenter: 16,
        radius: 3,
        paintingStyle: PaintingStyle.fill,
      ),
      tabs: [
        Tab(
          text: "All",
        ),
        Tab(text: "Football"),
        Tab(
          text: "Tennis",
        ),
        Tab(text: "Basketball"),
        Tab(text: "Cricket"),
        Tab(text: "Cricket"),
        Tab(text: "Cricket"),
      ],
    );
  }

检查我的解决方案：

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

Flutter TextFormField被键盘隐藏

10 个答案: