升级Flutter并迁移空安全后InputDecoration的labelText输入时消失
问题原因
你遇到的是Flutter 2.5.0稳定版的安卓端已知原生BUG,该版本对TextField的悬浮标签渲染逻辑做了调整,部分场景下会出现聚焦或输入内容时标签消失的问题,同时代码中将输入文本样式直接绑定标签样式的写法也可能触发样式冲突。
可行解决方案
优先升级Flutter版本
该问题已经被官方修复,升级到2.5.1及以上稳定版即可直接解决绝大多数场景的异常。执行以下命令升级:flutter upgrade临时兼容方案(暂不升级版本时使用)
调整TextField的相关配置,强制悬浮标签正常渲染:
- 移除输入文本样式和标签样式的绑定,单独定义输入文本样式
- 在InputDecoration中手动指定悬浮标签的展示规则和样式
调整后的代码参考:
TextField _buildRestaurantNameTextField() { return TextField( // 移除原来的style绑定,单独定义输入文本样式 style: const TextStyle(fontSize: 16, color: Colors.black), controller: _restaurantNameController, focusNode: _restaurantNameFocusNode, textCapitalization: TextCapitalization.words, cursorColor: Colors.black, decoration: InputDecoration( labelText: 'Restaurant name', errorText: model!.restaurantNameErrorText, enabled: model!.isLoading == false, // 新增悬浮标签配置 floatingLabelBehavior: FloatingLabelBehavior.auto, floatingLabelStyle: TextStyle( color: Theme.of(context).primaryColor, fontSize: 12, ), // 避免标签被裁剪,补充合适的内边距 contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4), ), autocorrect: false, enableSuggestions: false, enableInteractiveSelection: false, keyboardType: TextInputType.text, textInputAction: TextInputAction.next, onChanged: model!.updateRestaurantName, onEditingComplete: () => _restaurantNameEditingComplete(), ); }
效果对比
- 迁移前正常效果:

- 迁移后异常效果:

内容的提问来源于stack exchange,提问作者Ernesto
相关产品推荐
相关产品推荐

