Flutter文本溢出问题求助：已尝试方案仍未解决

核心问题分析 #

你的布局存在两个关键溢出诱因：

1. 外层Row中，右侧文本容器无宽度约束，长文本会直接超出父组件边界
2. subtitle内的图标+文本小Row未给文本预留收缩空间，长文本会溢出容器

针对性解决方案 #

1. 修复右侧文本溢出 #

将右侧容器用Expanded包裹，约束其在Row内占据剩余可用空间，同时确保文本组件的省略号配置生效：

Row(
  children: <Widget>[
    Expanded(
      child: ListTile(
        // 原ListTile代码保持不变
      ),
    ),
    // 用Expanded包裹右侧容器，限制宽度
    Expanded(
      child: Container(
        margin: const EdgeInsets.only(bottom: 16, right: 16),
        child: Text(
          "#" + userNumber.toString().toUpperCase(),
          style: TextStyle(
              fontSize: 14,
              fontFamily: 'quicksand_bold',
              fontWeight: FontWeight.w600,
              color: AppColor.inactiveText
          ),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    )
  ],
);

注：若无特殊格式需求，原生Text即可满足省略号效果，无需依赖ExtendedText

2. 修复subtitle内的文本溢出 #

先给commonText组件添加maxLines可选参数，再给每个图标+文本组内的文本添加Expanded，让文本可在剩余空间内收缩：

修改commonText组件：

Widget commonText(
    {required String text, 
    double? size, 
    FontWeight? fontWeight, 
    Color? color,
    int maxLines = 1}) { // 添加maxLines参数
  return Text(text,
    maxLines: maxLines,
    style: TextStyle(
      fontSize: size,
      color: color ?? const Color(0xFF828282),
      fontWeight: fontWeight ?? FontWeight.bold,
      overflow: TextOverflow.ellipsis
  ),);
}

修改subtitle布局：

subtitle: Row(
  children: [
    // 第一个图标+文本组
    Flexible( // 避免挤压其他组件
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          const Padding(
            padding: EdgeInsets.only(right: 2.0),
            child: ImageIcon(
                AssetImage('assets/images/hashtag.png'),
                size: 12,
                color: Color(0xFF828282)),
          ),
          Expanded( // 让文本可收缩
            child: commonText(text: uRoomNumber.toString(), size: 12),
          ),
        ],
      ),
    ),
    const SizedBox(width: 10,),
    // 第二个图标+文本组
    Flexible(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(right: 2.0),
            child: const ImageIcon(
                AssetImage('assets/images/location.png'),
                size: 12, color: Color(0xFF828282)),
          ),
          Expanded(
            child: commonText(text: uLocation.toString(), size: 12),
          ),
        ],
      ),
    ),
  ],
)

关键原理说明 #

• Expanded/Flexible会告知父组件（Row/Column）子组件可占据剩余空间或收缩，避免无约束组件溢出
• 文本组件必须同时设置maxLines:1和overflow:TextOverflow.ellipsis才能触发省略号效果，缺一不可

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