Question

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

这是我的代码：

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 Bussiness 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.

知道如何解决此问题吗？

Answer 1

/[===[\s\S]*?===[.]*/g

从以下行中删除

UriComponentsBuilder.fromHttpUrl(url).build().toString()

使固定在输入字段上的我的应用程序自动向上滚动以显示在键盘上能够打开的视图

感谢@GrahamD

Answer 2

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

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

✖✖

return Scaffold(
body : YourNewFileName(),
);

尽管上面的代码执行此操作：- ✔✔

return YourNewFileName();

Answer 3

只需在此剪切并粘贴您的身体代码-

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

同一问题得到了答案here

Answer 4

如果您使用Scaffold，而不是用SingleChildScrollView包裹身体

例如这样的示例：

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

对我来说，这真的是一个救命稻草。现在脚手架将变为可滚动。

Answer 5

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

固定的问题文本字段已被键盘隐藏

Answer 6

对我而言，此修复方法类似于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团队合作，因为应该可以使用全屏主题并具有正常的聊天应用程序行为。

Answer 7

我通过添加Stack()作为Scaffold()的正文来解决了上述问题，这使TextField()对象可以向上滑动到软键盘上方。最初，我使用SingleChildScrollView()作为正文，导致TextField()对象被软键盘遮盖。

对我有用的解决方案：

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

Answer 8

resizeToAvoidBottomInset 默认为 true。

返回脚手架( resizeToAvoidBottomInset: false,

我将其设置为 false 并且运行良好

Answer 9

不建议使用

resizeToAvoidBottomPadding 改用resizeToAvoidBottomInset：true

Answer 10

此答案不是以上问题的具体内容，但对于无论选择做什么都仍无法解决覆盖所选文本字段的键盘的用户可能有用。我在尝试解决此类问题时进入了此页面。

在出现问题之前，我一直在进行一些更改，以尝试在应用启动时改善我的启动画面。根据某人的建议，我在android / app / src / main / res / values文件夹

的styles.xml文件的<resources><style>部分添加了以下行

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

当显示键盘时，这会产生意想不到的效果，即阻止主应用程序中的所有字段向上滚动。这对某些人可能是显而易见的，但对我而言并非如此。

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

Answer 11

如果有人寻找键盘显示和隐藏事件并需要键盘高度，请检查此软件包。它适用于android和ios平台。

keyboard_utils

Answer 12

您应该将SingleChildScroolView添加到您的支架中，并添加 reverse：true 到您的SingleChildScroolView中

getchar()

Answer 13

根据 flutter updates(2021)，“resizeToAvoidBottomInset:true”在键盘出现时会出现黄黑色条错误。

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

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

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

      ],

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

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

      ],

Answer 15

我也遇到了同样的问题，我也使用了 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. 
             ]
          )

Flutter Keyboard使文本字段隐藏

15 个答案: