Flutter下拉框中Text组件文本溢出问题的技术问询

安全阿岳

2026-8-9

Flutter Web 下拉框文本溢出问题解决方案

问题描述

我在Flutter Web中用以下代码渲染Dropdown组件选项：

Widget _getColorInfo(int color, String text) {
  return Row(
    children: [
      Container(
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: Color(color),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
      const SizedBox(width: 5),
      Text(
          text,
          style: TextStyle(
            color: Color(color),
            overflow: TextOverflow.ellipsis,
            fontWeight: FontWeight.bold,
            fontSize: ShapeStyle.standardFontSize,
          ),
        ),
    ],
  );
}

当前遇到的问题：

不使用Flex/Expanded时，选中项和下拉面板的文本都会溢出，无法自动截断
用Flexible包裹Text后，选中项的溢出问题解决，但下拉面板会报'size属性缺失'错误

由于其他组件是动态扩展的，不能通过屏幕尺寸固定组件宽度，否则会破坏UI对称性。已经试过Flex、Expanded、Wrap、ConstrainedBox以及第三方包，都没解决，现在需要其他控制下拉框文本溢出的方法，或者能区分选中项和下拉面板应用不同布局策略的方案。

附完整ColorSelect组件代码：

class ColorSelect extends StatelessWidget {
  final AgendaFormHandler form;
  final int? defaultColor;
  final Map<String, int> elements = {
    'Team 1': 0xFFFEC000,
    'Team 2': 0xFF65CBFD,
    'Team 3': 0xFFF2B085,
    'Team 4': 0xFF01AE51,
    'USO': 0xFF3764F7,
    'Financiero': 0xFF702FA0,
    'Procesos': 0xFF8FA9DA,
    'TI': 0xFFFF7C81,
    'Alterno 1': 0xFF00F3EB,
    'Alterno 2': 0xFFA46B6B,
    'Alterno 3': 0xFFDCBFB2,
    'Alterno 4': 0xFFEF5CEF,
    'Alterno 5': 0xFFC5D89F,
  };

  ColorSelect({super.key, required this.form, this.defaultColor});
  @override
  Widget build(BuildContext context) {
    return SimpleSelectInput<int>(
      title: 'Color',
      customEmptyText: 'Ninguno',
      activeOption: form.getValue<int?>('color') ?? defaultColor ?? 0xFFFEC000,
      onOptionSelected: (color) {
        form.updateValue('color', color);
      },
      options: List<SelectItem<int>>.from(elements.keys.map((key) {
        return SelectItem(
          value: elements[key]!,
          text: key,
          label: _getColorInfo(elements[key]!, key),
        );
      })),
    );
  }

  Widget _getColorInfo(int color, String text) {
    return Row(
      children: [
        Container(
          width: 10,
          height: 10,
          decoration: BoxDecoration(
            color: Color(color),
            borderRadius: BorderRadius.circular(5),
          ),
        ),
        const SizedBox(width: 5),
        Flexible(
          fit: FlexFit.tight,
          child: Text(
            text,
            style: TextStyle(
              color: Color(color),
              overflow: TextOverflow.ellipsis,
              fontWeight: FontWeight.bold,
              fontSize: ShapeStyle.standardFontSize,
            ),
          ),
        ),
      ],
    );
  }
}

SimpleSelectInput组件代码：

/// 为[SimpleSelectInput]组件创建选项条目，[T]是[value]的数据类型，[String]是[label]类型
class SelectItem<T> {
  final T value;

  /// 该文本仅用于搜索过滤时匹配内容，建议与[label]内容一致
  final String text;
  final Widget? label;

  SelectItem({
    required this.value,
    this.label,
    required this.text,
  });
}

/// 带底部边框和蓝色标题的下拉输入组件，[T]是下拉选项的值类型
class SimpleSelectInput<T> extends StatelessWidget {
  /// 下拉面板显示的选项列表
  final List<SelectItem<T>> options;

  /// 默认选中的条目值
  final T activeOption;
  final Function(T?) onOptionSelected;
  final String Function(T?)? validator;
  final String? title;
  /// 未选中任何选项时显示的文本
  final String? customEmptyText;
  final bool shouldDecorate;
  final bool showSearchBox;

  const SimpleSelectInput({
    super.key,
    required this.options,
    required this.activeOption,
    required this.onOptionSelected,
    this.title,
    this.validator,
    this.shouldDecorate = true,
    this.showSearchBox = false,
    this.customEmptyText = '-- Seleccione --',
  });

  @override
  Widget build(BuildContext context) {
    if (activeOption == null) {
        return Container();
    }

    late final SelectItem<T>? selectedOption;

    try {
      selectedOption = options.firstWhere(
        (SelectItem<T> option) {
          return option.value == activeOption;
        },
      );
    } catch (_) {
      selectedOption = null;
    }

    return DropdownSearch<SelectItem<T>>(
      items: options,
      selectedItem: selectedOption,
      filterFn: (item, filter) {
        return item.text.toLowerCase().contains(filter.toLowerCase());
      },
      dropdownButtonProps: const DropdownButtonProps(
        focusColor: ColorStyle.blue,
        color: Colors.black,
        icon: Icon(
          Icons.arrow_drop_down,
          size: ShapeStyle.standardFontSize * 1.4,
        ),
      ),
      dropdownBuilder: (context, value) {
        return value?.label ??
            Text(
              customEmptyText ?? '-- Seleccione --',
              style: const TextStyle(
                fontSize: ShapeStyle.standardFontSize,
              ),
            );
      },
      validator: (selected) {
        return validator?.call(selected?.value);
      },
      popupProps: PopupPropsMultiSelection.menu(
        showSearchBox: showSearchBox,
        showSelectedItems: true,
        itemBuilder: _itemBuilder,
        searchFieldProps: const TextFieldProps(
          scrollPadding: EdgeInsets.zero,
          style: TextStyle(
            color: ColorStyle.blue,
            fontSize: ShapeStyle.standardFontSize,
          ),
        ),
      ),
      compareFn: (i, s) => i.value == s.value,
      dropdownDecoratorProps: DropDownDecoratorProps(
        dropdownSearchDecoration: InputDecoration(
          fillColor: Colors.black,
          border: shouldDecorate ? null : InputBorder.none,
          labelStyle: const TextStyle(
            color: ColorStyle.blue,
            fontSize: ShapeStyle.standardFontSize * 1.4,
          ),
          label: title != null
              ? Text(
                  title!,
                  style: const TextStyle(
                    fontSize: ShapeStyle.standardFontSize * 1.4,
                  ),
                )
              : null,
        ),
      ),
      onChanged: (x) => onOptionSelected(x?.value),
    );
  }

  Widget _itemBuilder(
      BuildContext context, SelectItem<T> item, bool isSelected) {
    final size = MediaQuery.of(context).size;
    return Container(
      width: size.width,
      padding: const EdgeInsets.symmetric(
        vertical: 12.0,
        horizontal: 8.0,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          item.label ??
              Text(
                item.text,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: ShapeStyle.standardFontSize,
                ),
              ),
          // 选中状态的勾选图标
          if (isSelected)
            const Icon(
              Icons.check,
              color: Colors.green,
              size: ShapeStyle.standardIconSize,
            ),
        ],
      ),
    );
  }
}

解决方案

方案1：区分选中项与下拉面板的布局逻辑

问题核心在于_getColorInfo中的Flexible在下拉面板的无约束布局环境下报错，因此可以针对选中项和下拉面板分别设计布局：

步骤1：拆分颜色标签组件

在ColorSelect中新增两个方法，分别处理选中项和下拉面板的标签布局：

// 选中项专用布局：用Flexible处理文本溢出
Widget _getSelectedColorInfo(int color, String text) {
  return Row(
    children: [
      Container(
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: Color(color),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
      const SizedBox(width: 5),
      Flexible(
        child: Text(
          text,
          style: TextStyle(
            color: Color(color),
            overflow: TextOverflow.ellipsis,
            fontWeight: FontWeight.bold,
            fontSize: ShapeStyle.standardFontSize,
          ),
        ),
      ),
    ],
  );
}

// 下拉面板专用布局：用ConstrainedBox限制文本宽度，避免溢出
Widget _getDropdownColorInfo(int color, String text) {
  return Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: Color(color),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
      const SizedBox(width: 5),
      ConstrainedBox(
        constraints: BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width - 80, // 减去图标和内边距宽度
        ),
        child: Text(
          text,
          style: TextStyle(
            color: Color(color),
            overflow: TextOverflow.ellipsis,
            fontWeight: FontWeight.bold,
            fontSize: ShapeStyle.standardFontSize,
          ),
        ),
      ),
    ],
  );
}

步骤2：修改SimpleSelectInput的布局逻辑

在SimpleSelectInput中，分别在dropdownBuilder和_itemBuilder中调用对应的布局方法：

修改dropdownBuilder（选中项显示）：

dropdownBuilder: (context, value) {
  if (value == null) {
    return Text(
      customEmptyText ?? '-- Seleccione --',
      style: const TextStyle(
        fontSize: ShapeStyle.standardFontSize,
      ),
    );
  }
  int color = value.value as int;
  return _getSelectedColorInfo(color, value.text);
},

修改_itemBuilder（下拉面板选项）：

Widget _itemBuilder(
    BuildContext context, SelectItem<T> item, bool isSelected) {
  int color = item.value as int;
  return Container(
    padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        _getDropdownColorInfo(color, item.text),
        if (isSelected)
          const Icon(
            Icons.check,
            color: Colors.green,
            size: ShapeStyle.standardIconSize,
          ),
      ],
    ),
  );
}

最后，去掉ColorSelect中SelectItem的label赋值，避免冲突。

方案2：修复Flexible在下拉面板中的报错

下拉面板报错是因为布局环境未提供足够约束，将_getColorInfo中的Flexible替换为Expanded，同时在_itemBuilder中给标签外层包裹Expanded：

步骤1：修改颜色标签组件

Widget _getColorInfo(int color, String text) {
  return Row(
    children: [
      Container(
        width: 10,
        height: 10,
        decoration: BoxDecoration(
          color: Color(color),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
      const SizedBox(width: 5),
      Expanded(
        child: Text(
          text,
          style: TextStyle(
            color: Color(color),
            overflow: TextOverflow.ellipsis,
            fontWeight: FontWeight.bold,
            fontSize: ShapeStyle.standardFontSize,
          ),
        ),
      ),
    ],
  );
}

步骤2：修改_itemBuilder

Widget _itemBuilder(
    BuildContext context, SelectItem<T> item, bool isSelected) {
  return Container(
    padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: item.label ??
              Text(
                item.text,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: ShapeStyle.standardFontSize,
                ),
              ),
        ),
        if (isSelected)
          const Icon(
            Icons.check,
            color: Colors.green,
            size: ShapeStyle.standardIconSize,
          ),
      ],
    ),
  );
}

这样既保证选中项文本能自动截断，下拉面板中的Expanded也能获取到父容器的宽度约束，不会出现size缺失错误。

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

Flutter下拉框中Text组件文本溢出问题的技术问询

问题描述 #

解决方案 #

方案1：区分选中项与下拉面板的布局逻辑 #