InputDecoration 小部件上的颤振 labelText 在字段输入期间和之后消失答案

【问题标题】：Flutter labelText on an InputDecoration widget disappears during and after field inputInputDecoration 小部件上的颤振 labelText 在字段输入期间和之后消失
【发布时间】：2021-09-17 10:11:11
【问题描述】：

我最近将 Dart、Flutter、插件升级到最新版本，并迁移了我的应用程序以符合 null-safety。现在，当我将光标放在输入字段上并输入数据时，输入字段上的标签就会消失。我的输入字段定义没有任何变化，如下所示：

  TextField _buildRestaurantNameTextField() {
    return TextField(
      style: Theme.of(context).inputDecorationTheme.labelStyle,
      controller: _restaurantNameController,
      focusNode: _restaurantNameFocusNode,
      textCapitalization: TextCapitalization.words,
      cursorColor: Colors.black,
      decoration: InputDecoration(
        labelText: 'Restaurant name',
        errorText: model!.restaurantNameErrorText,
        enabled: model!.isLoading == false,
      ),
      autocorrect: false,
      enableSuggestions: false,
      enableInteractiveSelection: false,
      keyboardType: TextInputType.text,
      textInputAction: TextInputAction.next,
      onChanged: model!.updateRestaurantName,
      onEditingComplete: () => _restaurantNameEditingComplete(),
    );
  }

这是 Flutter 医生的输出：

[✓] Flutter (Channel stable, 2.5.0, on macOS 11.5.2 20G95 darwin-arm, locale en-GB)
    • Flutter version 2.5.0 at /Users/ernestocuesy/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4cc385b4b8 (9 days ago), 2021-09-07 23:01:49 -0700
    • Engine revision f0826da7ef
    • Dart version 2.14.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/ernestocuesy/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      ???? https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      ???? https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.60.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (1 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 11 (API 30) (emulator)

• No issues found!

我附上迁移前后的屏幕截图。从评论样式属性到尝试floatingLabelStyle、字体大小、间距和标签总是消失，我已经尝试了很多东西。该问题发生在 Android 模拟器和物理 Android 设备中。我没有尝试过 iOS，因为我需要解决 CocoaPods 问题。

感谢您的帮助

【问题讨论】：

textField的父widget是什么？我认为是因为没有空间显示标签。
@zeiasoroush - 它是一个列，迁移前后的代码完全相同。我将制作一个仅包含几个字段的简单应用程序来尝试您的理论。感谢您的评论。
高兴，我可以建议的另一个技巧是用扩展包装你的文本字段。请记住，扩展仅适用于列和行。我将您的代码放在我的项目中，但没关系。

标签： flutter dart input label textfield

【解决方案1】：

该问题与ThemeData 类中的floatingLabelBehaviour 有关。该值始终为FloatingLabelBehavior.never，这意味着根据文档标签将始终位于内容内或隐藏。所以，这似乎是正确的行为。但由于某种原因，这种行为只发生在我升级之后。今后的解决方案是更改为FloatingLabelBehavior.auto 或FloatingLabelBehavior.always。

【讨论】：