Flutter固定宽DropdownButtonFormField文本溢出问题求助

我帮你分析下这个问题：你已经给DropdownButtonFormField套了固定宽度的SizedBox，下拉项的文本也通过TextOneLine实现了单行省略，但点击下拉按钮前（显示hint或选中项时）出现溢出错误，核心原因是DropdownButtonFormField在未展开状态下，内部的选中项/hint文本组件没有继承到父级的宽度约束，导致长文本可以无限延伸触发溢出。而下拉菜单里的选项正常，是因为下拉菜单容器会自动给DropdownMenuItem提供合适的宽度限制。

下面是具体的解决方法：

步骤1：给DropdownMenuItem的child添加宽度约束 #

给每个DropdownMenuItem的child外层套一个Container，设置width: double.infinity，强制文本组件填充DropdownMenuItem的可用宽度，这样TextOneLine的maxLines:1和overflow: TextOverflow.ellipsis就能生效：

DropdownMenuItem<int>(
  value: 0,
  child: Container(
    width: double.infinity,
    child: TextOneLine(
      "mooooorrrrreeee character",
    ),
  ),
)

步骤2：处理hint文本的宽度约束 #

同样，为了避免hint文本过长时溢出，把hint的Text也套进带宽度约束的Container里：

hint: Container(
  width: double.infinity,
  child: TextOneLine("hintText"),
),

完整修改后的代码示例 #

SizedBox(
  width: 136.0,
  child: DropdownButtonFormField<int>(
    hint: Container(
      width: double.infinity,
      child: TextOneLine("hintText"),
    ),
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.all(0.0),
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.white),
      ),
      isDense: true,
    ),
    items: [
      DropdownMenuItem<int>(
        value: 0,
        child: Container(
          width: double.infinity,
          child: TextOneLine(
            "less character",
          ),
        ),
      ),
      DropdownMenuItem<int>(
        value: 1,
        child: Container(
          width: double.infinity,
          child: TextOneLine(
            "mooooorrrrreeee character",
          ),
        ),
      )
    ],
    onChanged: (value) {}, // 必须添加该回调，否则按钮会处于禁用状态
  ),
);

class TextOneLine extends StatelessWidget {
  final String data;
  final TextStyle style;
  final TextAlign textAlign;
  final bool autoSize;

  TextOneLine(
    String data, {
    Key key,
    this.style,
    this.textAlign,
    this.autoSize = false,
  })  : this.data = data,
        assert(data != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      data,
      style: style,
      textAlign: textAlign,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    );
  }
}

额外提示 #

一定要给DropdownButtonFormField添加onChanged回调，否则按钮会处于禁用状态，无法触发下拉菜单。

这样修改后，不管是hint还是选中的长文本，都会被限制在136px的宽度内，超出部分显示省略号，同时不会再触发溢出错误。

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