如何让带边框的FormBuilderDropdown选中值时仍在顶部显示标签
解决方法
FormBuilderDropdown选中值后无法显示顶部悬浮标签,是因为InputDecoration默认的浮动标签行为不匹配下拉组件的状态判定逻辑,按如下修改即可实现目标效果:
- 在
InputDecoration配置中新增floatingLabelBehavior: FloatingLabelBehavior.always参数,强制标签始终悬浮在边框顶部,和上方普通输入框的表现完全一致。
修改后的完整代码:
FormBuilderDropdown( name: widget.name, initialValue: "USA", decoration: InputDecoration( labelText: widget.label, // 新增下面这行配置 floatingLabelBehavior: FloatingLabelBehavior.always, labelStyle: TextStyle( color: widget.enabled ? Colors.black54 : Theme.of(context).disabledColor), contentPadding: EdgeInsets.all(16), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Theme.of(context).primaryColor), ), border: OutlineInputBorder(borderSide: BorderSide()), ), allowClear: widget.allowClear, hint: Text(widget.hint), validator: widget.validator, enabled: widget.enabled, items: countries .map((country) => DropdownMenuItem( value: country['alpha_2_code'], child: Text(country['en_short_name']), )) .toList(), )
如果需要仅在组件聚焦或者存在选中值时才显示悬浮标签,也可以将参数值设置为FloatingLabelBehavior.auto,部分旧版本flutter_form_builder库对auto状态的判定存在兼容问题,升级到3.0以上版本即可正常生效。
内容的提问来源于stack exchange,提问作者Chatura Dilan
相关产品推荐
相关产品推荐

