Flutter 键盘使文本字段隐藏答案

【问题标题】：Flutter Keyboard makes textfield hideFlutter 键盘使文本字段隐藏
【发布时间】：2018-12-22 10:42:51
【问题描述】：

我是新来的颤振。我添加了一个带有文本字段的表单，当我单击文本字段并且键盘出现时，文本字段会上升。

这是我的代码：

Widget build(BuildContext context) {

MediaQueryData mediaQuery = MediaQuery.of(context);
return new Scaffold(
  body:  new Container(
      color: Colors.purple,
      constraints: new BoxConstraints.expand(),
      padding: EdgeInsets.only(top: 10.0,left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom, ),
      child: SingleChildScrollView(
        child: Container(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 12.0),
                  Text(
                    'What is your Business Name?',
                    style: TextStyle(fontSize: 24.0),
                  ),
                  AppForm(),
                ],
              ),
            padding: EdgeInsets.only(left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(30.0)),
              color: Colors.white,
                ),
              )
          )
      ),
    );
  }

这是不打开键盘的结果： Image without keyboard

这是打开键盘后的图像： Image after opening the keyboard

这是我的颤振医生输出。

Doctor summary (to see all details, run flutter doctor -v): [√] Flutter 
(Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale 
en-US) [√] Android toolchain - develop for Android devices (Android SDK 
28.0.0) [√] Android Studio (version 3.1) [!] VS Code, 64-bit edition (version 
1.25.1) [!] Connected devices ! No devices available ! Doctor found issues in 
2 categories.

知道如何解决这个问题吗？

【问题讨论】：

你有最新版的flutter吗？ flutter doctor 说什么？
这是我的颤振医生输出。医生摘要（要查看所有详细信息，请运行 flutter doctor -v）：[√] Flutter（Channel beta，v0.5.1，在 Microsoft Windows [版本 10.0.17134.165]，语言环境 en-US）[√] Android 工具链 - 为Android 设备 (Android SDK 28.0.0) [√] Android Studio (version 3.1) [!] VS Code, 64-bit edition (version 1.25.1) [!] Connected devices !没有可用的设备！医生发现了 2 类问题。
我建议你去频道颤振大师flutter channel master，目前在v5.7，并用flutter clean和Invalidate caches and restart清理你的项目
看到这个？？ didierboelens.com/2018/04/…

标签： android ios mobile flutter

【解决方案1】：

 new Scaffold(
      appBar: new AppBar(
          ...
      resizeToAvoidBottomInset: true,
      ....

修复了文本字段被键盘隐藏的问题

【讨论】：

【解决方案2】：

此答案并非针对上述问题，但对于那些仍然遇到覆盖所选文本字段的键盘问题的人可能有用，无论他们做什么。我在尝试解决此类问题时访问了此页面。

在出现问题之前，我一直在进行一些更改，以尝试改进应用启动时的启动画面。根据某人的建议，我在 android/app/src/main/res/values 文件夹中的 styles.xml 文件的 <resources><style> 部分中包含以下行

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

这会在显示键盘时停止在主应用程序中向上滚动的任何字段，这产生了意想不到的效果。这对某些人来说可能很明显，但对我来说不是。

希望此信息对某人有所帮助。

【讨论】：

谢谢你，帮助了
谢谢。我花了很多时间搜索这个问题，但没有任何效果。但我不明白为什么全屏真的会导致这个错误。
非常感谢，我用小部件尝试了所有技巧，但没有任何效果。
非常感谢你。我只是做了所有必要的修复它，并意识到它在启动屏幕实施之前就可以工作。
这解决了我在整个应用程序中的问题

【解决方案3】：

我就是这种情况。您肯定将一个脚手架包裹在另一个脚手架内。 Flutter 应用程序中应该只有一个脚手架小部件，即主布局。简单地移除你拥有的所有祖先脚手架，只保留一个脚手架。不要将脚手架包裹到另一个脚手架中。尽管如此，您可以将脚手架包裹在容器内。

确保在你的 main.dart 文件中你没有这样做：-

✖✖

return Scaffold(
body : YourNewFileName(),
);

尽管有上述代码，请执行以下操作：- ✔✔

return YourNewFileName();

【讨论】：

@Nirodya Gamage 你能发布 main.dart 文件，以便我检查错误在哪里吗？？
很抱歉你是对的！我在背景上找到了另一个脚手架。我删除了一个，它可以工作。非常感谢！
太棒了。因为同样的事情发生在我身上，这就是我解决它的方法。
我在脚手架里面有脚手架。我需要添加 Tabbarview。有什么解决办法。
标签栏也可以通过单个脚手架添加@dominic_torreto。到目前为止，脚手架内的脚手架会给你一些像这样的错误。所以你应该改变你设计应用程序的结构。

【解决方案4】：

resizeToAvoidBottomPadding 已弃用改用resizeToAvoidBottomInset: true

【讨论】：

这很棒。为 Scaffold 设置 resizeToAvoidBottomInset: true 会将视图调整到键盘上方的区域内。
resizeToAvoidBottomInset 默认为真。不需要添加那个

【解决方案5】：

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

从上面的行中删除

android/app/src/main/res/values/styles.xml

将我的应用程序固定为输入字段自动向上滚动以在键盘打开时显示

感谢@GrahamD

【讨论】：

我也有这个问题。由于使用了 flutter_native_splash 包，所以添加了这一行。不要以为我会发现。谢谢。
谢谢。由于flutter_native_splash，我遇到了同样的问题
这解决了这个问题，但如果您有顶部横幅，则会带来其他问题。状态栏正在显示（这是一个），它在横幅顶部显示

【解决方案6】：

只需在此剪切并粘贴您的正文代码 -

SingleChildScrollView(
        child: Stack(
          children: <Widget>[
              // your body code 
           ],
         ),
       ),

有同样的问题得到了答案here

【讨论】：

【解决方案7】：

您可以简单地将您不想被键盘隐藏的小部件包装在填充内，如下所示：

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

【讨论】：

【解决方案8】：

如果您使用Scaffold，则使用SingleChildScrollView 包裹主体

例如：

...
return Scaffold(
body: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        TextField(),
        TextField(),
        TextField(),
      ],
    ),
  ),
);
...

这对我来说真的是救命稻草。现在脚手架可以滚动了。

【讨论】：

【解决方案9】：

您应该将 SingleChildScroolView 添加到您的 Scaffold 中，并将 reverse: true 添加到您的 SingleChildScroolView 中

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

【讨论】：

【解决方案10】：

resizeToAvoidBottomInset 默认为 true。

return Scaffold(
      resizeToAvoidBottomInset: false,
   );

我将它设置为 false 并且效果很好

【讨论】：

【解决方案11】：

我的解决方法类似于 GrahamD 的回答。

我使用具有 .Fullscreen 的父级声明我自己的主题，例如：

<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar.Fullscreen">
    <item name="android:windowBackground">@android:color/white</item>
</style>

I've raised an issue 与 Flutter 团队合作，因为它应该可以使用全屏主题并具有正常的聊天应用程序行为。

【讨论】：

【解决方案12】：

我通过添加Stack() 作为我的Scaffold() 的主体解决了上述问题，这允许TextField() 对象在软键盘上方向上滑动。最初我使用SingleChildScrollView() 作为主体，导致TextField() 对象被软键盘遮挡。

对我有用的解决方案：

child: Scaffold(
          resizeToAvoidBottomInset: true,
          body: Stack(
            children: <Widget>[]

【讨论】：

【解决方案13】：

根据颤振更新（2021），“resizeToAvoidBottomInset:true”在出现键盘时会出现黄黑条错误。

这就是我解决上述问题的方法：

在 build() 方法中，检查键盘是否打开，bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
在脚手架内设置 resizeToAvoidBottomInset:true
用 SizedBox() 包裹小部件并设置高度，如下所示：height:keyboardIsOpen ? MediaQuery.of(context).size.height * 0.2 : MediaQuery.of(context).size.width * 0.6,

【讨论】：

【解决方案14】：

在 Flutter 中，为了防止这个问题 - Flutter 键盘使 TextField 隐藏 - 我们可以做一个简单的工作。我们必须将TextFields 与SingleChildScrollView 包装起来，作为Scaffold 中body 参数的小部件。只在那个地方使用SingleChildScrollView。如果您不这样做，它将无法正常工作。例如：

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: SingleChildScrollView(
    child: Column(
      // mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: double.infinity,
          child: Card(
            color: Colors.blue,
            elevation: 5,
            child: Text()
          ),
        ),
        TextField(),
        TextField(),

      ],

此外，还有另一种方法可以做到这一点。在上面的代码中，您可以将 Column 替换为 ListView Widget，如下面的代码：

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: Container(
    height: 300,
    child: ListView(
      children: [
        Container(
          width: double.infinity,
          child: Card(
            color: Colors.blue,
            elevation: 5,
            child: Text(),
          ),
        ),
        TextField(),
        TextField(),

      ],

【讨论】：

【解决方案15】：

只需将 reverse=true 放入 SingleChildScrollView 就足够了。

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: SingleChildScrollView(
        reverse: true,
        child: Container(
          ........
          ........

【讨论】：

【解决方案16】：

这是一个动态更新填充的完整示例：

import 'dart:ui';
import 'package:flutter/material.dart';

class KeyboardPaddingTest extends StatefulWidget {
  const KeyboardPaddingTest({Key? key}) : super(key: key);

  @override
  _KeyboardPaddingTestState createState() => _KeyboardPaddingTestState();
}

class _KeyboardPaddingTestState extends State<KeyboardPaddingTest> {
  EdgeInsets _viewInsets = EdgeInsets.zero;
  SingletonFlutterWindow? window;
  final _textFieldController = TextEditingController();

  @override
  void initState() {
    super.initState();
    window = WidgetsBinding.instance?.window;
    window?.onMetricsChanged = () {
      setState(() {
        final window = this.window;
        if (window != null) {
          _viewInsets = EdgeInsets.fromWindowPadding(
            window.viewInsets,
            window.devicePixelRatio,
          ).add(EdgeInsets.fromWindowPadding(
            window.padding,
            window.devicePixelRatio,
          )) as EdgeInsets;
        }
      });
    };
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.greenAccent[100],
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: EdgeInsets.only(bottom: _viewInsets.bottom),
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: Container(
                  width: 200.0,
                  color: Colors.lightBlueAccent[100],
                  child: TextField(
                    controller: _textFieldController,
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: 'Tap to show keyboard',
                    ),
                  ),
                ),
              ),
            ),
            const Text(
              'Testing Keyboard',
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案17】：

我也遇到了同样的问题，我也使用了SingleChildScrollView，但这并没有解决我的问题。

我的问题出现在这段代码中。

   Stack(
      childern:[
           SingleChildScrollView(),// In scollView i have textFeild when keyboard opens doneButton hide the textFeild.
           doneButtonWidget()//this button align with the bottom of the screen. 
   ]
)

为了解决这个问题，我遵循这个，它解决了我的问题。

    Column(
       childern:[
            Expaned(  
                child:SingleChildScrollView(),// In scollView i have textFeild when keyboard opens doneButton hide the textFeild.
               flex:1
              ),
              doneButtonWidget()//this button align with the bottom of the screen. 
             ]
          )

【讨论】：