Flutter 3.0.0 中 TextField 隐藏在键盘后面

Question

我不明白CustomScrollView正常工作。

\n

在 flutter 2.13.0-0.2.pre 之前，点击 a 内的 TextFieldsCustomScrollView在打开时自动调整键盘上方的 TextField。

\n

将我的 flutter 版本降级到2.11.0-0.1.pre并在 上运行应用程序时Android version 11，滚动视图按预期工作 - 即使没有Scaffold通过添加来调整小部件resizeToAvoidBottomInset: false- 当用户点击 TextField 时，键盘就会出现，用户可以按预期滚动到底部。

\n

然而升级到 Flutter 3.0.0 后，情况发生了变化。当我点击文本字段并且键盘出现时，我无法滚动到屏幕底部。事实上，滚动根本不起作用。

\n

这是一个非常长的表单示例，包含大约 26 个文本字段。点击第 25 个文本字段将打开覆盖该文本字段的键盘。

\n

@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    backgroundColor: const Color(0xff185C66),\n    resizeToAvoidBottomInset: true,\n    body: CustomScrollView(\n      shrinkWrap: true,\n      clipBehavior: Clip.antiAlias,\n      controller: ScrollController(),\n      scrollDirection: Axis.vertical,\n      slivers: [\n        SliverPadding(\n          padding: EdgeInsets.symmetric(horizontal: App.sidePadding),\n          sliver: SliverList(\n            delegate: SliverChildListDelegate.fixed([\n              SafeArea(\n                bottom: false,\n                child: AdaptiveText(\n                  \'Welcome Back\',\n                  maxLines: 1,\n                  fontSize: 24.sp,\n                  maxFontSize: 25,\n                  fontWeight: FontWeight.w600,\n                  textColor: Colors.white,\n                  textColorDark: Colors.white,\n                ),\n              ),\n              //\n              0.02.verticalh,\n              //\n              SizedBox(\n                width: 0.71.w,\n                child: AdaptiveText(\n                  \'Login with your email and password to continue to your account\',\n                  fontSize: 16.sp,\n                  maxFontSize: 17,\n                  textColor: Colors.white,\n                  textColorDark: Colors.white,\n                ),\n              ),\n              //\n              0.045.verticalh,\n              //\n              TextFormField(keyboardType: TextInputType.name),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.visiblePassword),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.streetAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.datetime),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.datetime),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.datetime),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.datetime),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.phone),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.phone),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.phone),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.phone),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.phone),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.emailAddress),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.text),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.text),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.text),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.text),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.text),\n              const SizedBox(height: 12),\n              TextFormField(keyboardType: TextInputType.text),\n              const SizedBox(height: 12),\n            ]),\n          ),\n        ),\n        //\n        SliverPadding(\n          padding: EdgeInsets.symmetric(horizontal: App.sidePadding),\n          sliver: SliverSafeArea(\n            top: false,\n            sliver: SliverList(\n              delegate: SliverChildListDelegate.fixed([\n                SizedBox(height: 16),\n                //\n                TextButton(\n                  onPressed: () {},\n                  child: Text(\'Login\'),\n                ),\n              ]),\n            ),\n          ),\n        ),\n      ],\n    ),\n  );\n}\n

\n

我用谷歌搜索了这种行为并找到了一些答案，

\n

\n
• 添加resizeToAvoidBottomInset: false到脚手架小部件
\n
• 用CustomScrollViewa 包裹小部件SingleChlidScrollView并将reverse属性设置为true。
\n
• 添加<item name="android:windowFullscreen">true</item>到 styles.xml
\n
• 环境scrollPadding: EdgeInsets.only(bottom:40)[TextField Widget 上的属性]
\n
• 聆听WidgetsBinding.instance?.window.onMetricsChanged和使用setState((){})每当键盘弹出时
\n

\n

还有很多其他的，仅列出一些。

\n

我尝试了上述所有解决方案，但它们要么无法解决问题，要么只是感觉工作量很大。\n在检查 Flutter 3.0.0 变更日志时，我找不到对滚动视图中此更改的任何引用。

\n

我错过了什么吗？\n是否有更改CustomScrollView？\n知道如何解决这个问题吗？

\n

这是结果flutter doctor -v

\n

[\xe2\x9c\x93] Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-x64, locale en-NG)\n    \xe2\x80\xa2 Flutter version 3.0.0 at /Users/brendan/src/flutter\n    \xe2\x80\xa2 Upstream repository https://github.com/flutter/flutter.git\n    \xe2\x80\xa2 Framework revision ee4e09cce0 (2 weeks ago), 2022-05-09 16:45:18 -0700\n    \xe2\x80\xa2 Engine revision d1b9a6938a\n    \xe2\x80\xa2 Dart version 2.17.0\n    \xe2\x80\xa2 DevTools version 2.12.2\n\n[\xe2\x9c\x93] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc2)\n    \xe2\x80\xa2 Android SDK at /Users/brendan/Library/android/sdk\n    \xe2\x80\xa2 Platform android-31, build-tools 33.0.0-rc2\n    \xe2\x80\xa2 ANDROID_HOME = /Users/brendan/Library/android/sdk\n    \xe2\x80\xa2 Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java\n    \xe2\x80\xa2 Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)\n    \xe2\x80\xa2 All Android licenses accepted.\n\n[\xe2\x9c\x93] Xcode - develop for iOS and macOS (Xcode 13.2.1)\n    \xe2\x80\xa2 Xcode at /Applications/Xcode.app/Contents/Developer\n    \xe2\x80\xa2 CocoaPods version 1.11.3\n\n[\xe2\x9c\x93] Chrome - develop for the web\n    \xe2\x80\xa2 Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome\n\n[\xe2\x9c\x93] Android Studio (version 2021.1)\n    \xe2\x80\xa2 Android Studio at /Applications/Android Studio.app/Contents\n    \xe2\x80\xa2 Flutter plugin can be installed from:\n       https://plugins.jetbrains.com/plugin/9212-flutter\n    \xe2\x80\xa2 Dart plugin can be installed from:\n       https://plugins.jetbrains.com/plugin/6351-dart\n    \xe2\x80\xa2 Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)\n\n[\xe2\x9c\x93] VS Code (version 1.67.2)\n    \xe2\x80\xa2 VS Code at /Applications/Visual Studio Code.app/Contents\n    \xe2\x80\xa2 Flutter extension version 3.40.0\n\n[\xe2\x9c\x93] Connected device (3 available)\n    \xe2\x80\xa2 Redmi Note 9S (mobile) \xe2\x80\xa2 702f6413 \xe2\x80\xa2 android-arm64  \xe2\x80\xa2 Android 11 (API 30)\n    \xe2\x80\xa2 macOS (desktop)        \xe2\x80\xa2 macos    \xe2\x80\xa2 darwin-x64     \xe2\x80\xa2 macOS 12.3.1 21E258 darwin-x64\n    \xe2\x80\xa2 Chrome (web)           \xe2\x80\xa2 chrome   \xe2\x80\xa2 web-javascript \xe2\x80\xa2 Google Chrome 101.0.4951.64\n    ! Error: j@mon is not connected. Xcode will continue when j@mon is connected. (code -13)\n\n[\xe2\x9c\x93] HTTP Host Availability\n    \xe2\x80\xa2 All required HTTP hosts are available\n\n\xe2\x80\xa2 No issues found!\n

\n

编辑：此问题影响 Android 和 iOS。

\n

Answer 1

我找到了解决方案。我已经安装了该flutter_screenutil包并将其插入到我的小部件树上方 - MaterialApp 上方，并且我还设置了useInheritedMediaQuery: true. 这阻止了小部件的重建，例如键盘状态更改。

将小部件移动ScreenUtils到 MaterialApp 下面修复了它。