Flutter中TextFormField手动输入内容不显示问题求助

问题详情 #

Flutter应用中所有TextFormField组件手动输入时内容无法显示，但支持粘贴文本或语音输入设置内容，其余功能正常。输入过程控制台无报错，键盘有输入提示但组件内未展示内容。

相关代码 #

控制器初始化：

TextEditingController _description = new TextEditingController();

TextFormField实现：

TextFormField(
  maxLines: 8,
  controller: _description,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.symmetric(
      vertical: AppLayout.getHeight(12),
      horizontal: AppLayout.getWidth(16),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        color: Styles.borderColor,
        width: 1.0,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        color: Styles.borderColor,
        width: 1.0,
      ),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        color: Styles.borderColor,
        width: 1.0,
      ),
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        color: Styles.borderColor,
        width: 1.0,
      ),
    ),
    hintText: 'Агуулга',
    hintStyle: Styles.textStyle1,
  ),
  onSaved: (val) => _description.text = val!,
  validator: (val) {
    if (val!.isEmpty) {
      return 'Та өргөдөл, гомдол үүсгэх агуулгаа оруулна уу!';
    }
    if (val!.length <= 5) {
      return 'Та 5-с дээш үсэг оруулна уу';
    }
    return null;
  },
)

环境信息 #

flutter doctor -v输出：

[✓] Flutter (Channel stable, 3.7.8, on macOS 13.2.1 22D68 darwin-arm64, locale en-MN)
• Flutter version 3.7.8 on channel stable at /Users/starig/development/flutter
• Framework revision 90c64ed42b (2 days ago), 2023-03-21 11:27:08 -0500
• Engine revision 9aa7816315
• Dart version 2.19.5
• DevTools version 2.20.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/starig/Library/Android/sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.12.0

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed
• Dart plugin can be installed
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] VS Code (version 1.75.1)
• VS Code at /Users/starig/Downloads/Visual Studio Code.app/Contents
• Flutter extension version 3.60.0

[✓] Connected device (3 available)
• iPhone 14 Pro (mobile) • E5C78BAD-ED19-49E4-B1AD-F4DC71A86F0A • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
• macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64
• Chrome (web)           • chrome                               • web-javascript • Google Chrome 111.0.5563.110

[✓] HTTP Host Availability
• All required HTTP hosts are available

解决方案 #

1. 显式设置输入文本颜色 #

当前TextFormField未指定输入文本样式，可能Styles.textStyle1的颜色与输入框背景色一致，导致文字不可见。添加style属性指定颜色：

TextFormField(
  // 保留其他属性
  style: TextStyle(color: Colors.black), // 根据主题调整合适颜色
)

2. 排查自定义尺寸计算问题 #

AppLayout.getHeight和AppLayout.getWidth如果实现异常，可能导致输入区域被遮挡。先替换为固定值测试：

contentPadding: EdgeInsets.symmetric(
  vertical: 12,
  horizontal: 16,
),

若问题解决，检查AppLayout的尺寸计算逻辑。

3. 移除冗余的onSaved赋值 #

已绑定控制器的情况下，onSaved中再次赋值属于冗余操作，可能干扰控制器状态。删除该属性：

// 移除此行
onSaved: (val) => _description.text = val!,

4. 升级Flutter版本 #

Flutter 3.7.x部分版本存在输入框渲染异常，升级到最新稳定版：

flutter upgrade

5. 规范控制器生命周期管理 #

确保控制器在State类中正确初始化并释放：

class _YourWidgetState extends State<YourWidget> {
  late TextEditingController _description;

  @override
  void initState() {
    super.initState();
    _description = TextEditingController();
  }

  @override
  void dispose() {
    _description.dispose();
    super.dispose();
  }

  // 其他代码
}

内容的提问来源于stack exchange，提问作者Starkov Ivan