Flutter自定义Dropdown实现浮动标签（Floating Label）效果求助

我在Flutter项目中实现了一个自定义Dropdown组件，但遇到了标签显示的问题。希望该Dropdown的标签在获取焦点时，能像TextField一样实现floatingLabelBehavior.auto的浮动效果。尝试使用DropdownButtonFormField2替代DropdownButton2，但会破坏已有的自定义样式。请问是否有不借助TextField实现该效果的可行方案？

组件代码片段：

class CustomDropdownCl extends StatefulWidget {
  const CustomDropdownCl({
    required this.items,
    required this.hint,
    required this.isRequired,
    this.onChanged,
    required this.textEditingController, // Yeni eklendi
    super.key,
  });

  final List<String> items;
  final String hint;
  final bool isRequired;
  final ValueChanged<String?>? onChanged;
  final TextEditingController textEditingController; // Yeni eklendi

  @override
  State<CustomDropdownCl> createState() => _CustomDropdownClState();
}

class _CustomDropdownClState extends State<CustomDropdownCl> {
  final focusNode = FocusNode();
  String? _selectedItem;

  @override
  void initState() {
    super.initState();
    _selectedItem = widget.textEditingController.text.isEmpty
        ? null
        : widget.textEditingController.text;
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 60,
      padding: EdgeInsets.zero,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(16)),
        color: AppColors.RegisterPageTextFieldColor,
      ),
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(16)),
          color: AppColors.RegisterPageTextFieldColor,
        ),
        child: ListenableBuilder(
          listenable: focusNode,
          builder: (_, __) {
            return DropdownButtonHideUnderline(
              child: DropdownButton2<String>(
                focusNode: focusNode,
                value: _selectedItem,
                style: const TextStyle(
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.w400,
                  color: AppColors.black,
                ),
                hint: RichText(
                  text: TextSpan(
                    text: widget.hint,
                    style: TextStyle(
                      color: AppColors.darkGray,
                    ),
                    children: [
                      if (widget.isRequired)
                        const TextSpan(
                          text: ' * ',
                          style: TextStyle(
                            color: AppColors.darkMagenta,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                    ],
                  ),
                ),
                isExpanded: true,
                items:
                    widget.items.map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: RichText(
                      textAlign: TextAlign.center,
                      text: TextSpan(
                        text: value,
                        style: const TextStyle(
                          color: AppColors.darkGray,
                          fontSize: 13,
                          fontFamily: 'Poppins',
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                  );
                }).toList(),
                onChanged: (newValue) {
                  setState(() {
                    _selectedItem = newValue;
                    widget.textEditingController.text = newValue ?? '';
                  });

                  widget.onChanged?.call(newValue);
                },
                dropdownStyleData: DropdownStyleData(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: AppColors.RegisterPageTextFieldColor,
                  ),
                  offset: const Offset(0, -2.3),
                ),
                menuItemStyleData: const MenuItemStyleData(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                ),
                buttonStyleData: ButtonStyleData(
                  padding: const EdgeInsets.only(right: 10, left: 2),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: const Color(0xFFf6f7fa),
                    border: focusNode.hasFocus
                        ? Border.all(color: const Color(0xFFa7a7a8), width: 2)
                        : null,
                  ),
                ),
                iconStyleData: const IconStyleData(
                  icon: Icon(
                    Icons.keyboard_arrow_down,
                    color: AppColors.darkMagenta,
                  ),
                  iconSize: 25,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

可以通过自定义浮动标签组件+监听焦点/选中状态实现，完全保留现有DropdownButton2的自定义样式，核心思路是用Stack叠加标签和Dropdown，通过动画控制标签的位置与样式变化。

修改后的完整代码 #

class CustomDropdownCl extends StatefulWidget {
  const CustomDropdownCl({
    required this.items,
    required this.hint,
    required this.isRequired,
    this.onChanged,
    required this.textEditingController,
    super.key,
  });

  final List<String> items;
  final String hint;
  final bool isRequired;
  final ValueChanged<String?>? onChanged;
  final TextEditingController textEditingController;

  @override
  State<CustomDropdownCl> createState() => _CustomDropdownClState();
}

class _CustomDropdownClState extends State<CustomDropdownCl> {
  final focusNode = FocusNode();
  String? _selectedItem;

  @override
  void initState() {
    super.initState();
    _selectedItem = widget.textEditingController.text.isEmpty
        ? null
        : widget.textEditingController.text;
    // 监听焦点变化触发UI更新
    focusNode.addListener(() => setState(() {}));
  }

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

  // 判断是否触发浮动标签：获取焦点 或 已有选中项
  bool get _shouldFloatLabel => focusNode.hasFocus || _selectedItem != null;

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none, // 允许标签超出容器范围显示
      children: [
        // 原Dropdown容器，调整margin给浮动标签留空间
        Container(
          width: double.infinity,
          height: 60,
          margin: const EdgeInsets.only(top: 12),
          padding: EdgeInsets.zero,
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(16)),
            color: AppColors.RegisterPageTextFieldColor,
          ),
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(16)),
              color: AppColors.RegisterPageTextFieldColor,
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton2<String>(
                focusNode: focusNode,
                value: _selectedItem,
                style: const TextStyle(
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.w400,
                  color: AppColors.black,
                ),
                hint: const SizedBox.shrink(), // 移除原hint，用浮动标签替代
                isExpanded: true,
                items: widget.items.map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: RichText(
                      textAlign: TextAlign.center,
                      text: TextSpan(
                        text: value,
                        style: const TextStyle(
                          color: AppColors.darkGray,
                          fontSize: 13,
                          fontFamily: 'Poppins',
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                  );
                }).toList(),
                onChanged: (newValue) {
                  setState(() {
                    _selectedItem = newValue;
                    widget.textEditingController.text = newValue ?? '';
                  });
                  widget.onChanged?.call(newValue);
                },
                dropdownStyleData: DropdownStyleData(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: AppColors.RegisterPageTextFieldColor,
                  ),
                  offset: const Offset(0, -2.3),
                ),
                menuItemStyleData: const MenuItemStyleData(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                ),
                buttonStyleData: ButtonStyleData(
                  padding: const EdgeInsets.only(right: 10, left: 16), // 调整内边距避免和标签重叠
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: const Color(0xFFf6f7fa),
                    border: focusNode.hasFocus
                        ? Border.all(color: const Color(0xFFa7a7a8), width: 2)
                        : null,
                  ),
                ),
                iconStyleData: const IconStyleData(
                  icon: Icon(
                    Icons.keyboard_arrow_down,
                    color: AppColors.darkMagenta,
                  ),
                  iconSize: 25,
                ),
              ),
            ),
          ),
        ),
        // 自定义浮动标签，带平滑动画
        AnimatedPositioned(
          duration: const Duration(milliseconds: 200),
          left: 16,
          top: _shouldFloatLabel ? -8 : 20, // 浮动时上移到容器外
          child: AnimatedDefaultTextStyle(
            duration: const Duration(milliseconds: 200),
            style: TextStyle(
              fontFamily: 'Poppins',
              fontWeight: _shouldFloatLabel ? FontWeight.w500 : FontWeight.w400,
              color: _shouldFloatLabel ? AppColors.darkMagenta : AppColors.darkGray,
              fontSize: _shouldFloatLabel ? 12 : 14,
            ),
            child: RichText(
              text: TextSpan(
                text: widget.hint,
                children: [
                  if (widget.isRequired)
                    const TextSpan(
                      text: ' * ',
                      style: TextStyle(
                        color: AppColors.darkMagenta,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

关键修改说明 #

• 用Stack将浮动标签与Dropdown叠加，clipBehavior: Clip.none允许标签超出容器显示
• 新增_shouldFloatLabel变量判断触发条件：获取焦点或已有选中项时启动浮动
• 通过AnimatedPositioned控制标签垂直位置，AnimatedDefaultTextStyle实现文字大小、颜色的平滑过渡
• 移除原Dropdown的hint，调整内边距避免与浮动标签重叠
• 添加焦点监听器，确保焦点变化时实时更新UI

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