Flutter嵌套Row时Text组件overflow属性失效的解决方法

解决方案 #

问题出在两个核心点：

1. Text的overflow属性必须配合maxLines（指定行数）才会生效，默认Text会自动换行，不会触发截断
2. 内层Column没有宽度限制，即使外层加了Flexible，Column仍会占用文本所需的全部宽度，导致Text不会溢出

修正后的代码：

@override
Widget build(BuildContext context) {
  return Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        // 外层用Flexible限制左侧整体宽度，避免挤压右侧按钮
        Flexible(
          child: Row(
            children: [
              CircleAvatar(),
              // 用Expanded包裹Column，让Column在剩余空间内填充，限制其宽度
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 必须设置maxLines:1，配合overflow实现单行截断
                    Text(
                      title,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                    Text(part),
                  ],
                ),
              ),
            ],
          ),
        ),
        ElevatedButton(onPressed: () {}, child: Text('btn')),
      ],
    ),
  );
}

原理说明：

• 外层Flexible确保左侧内容不会超出Row的可用空间，同时保留右侧按钮的固定宽度
• 内层Expanded强制Column只能使用左侧Row的剩余空间（扣除CircleAvatar的宽度），限制了文本的可用宽度
• Text的maxLines:1强制文本单行显示，配合overflow: TextOverflow.ellipsis实现截断并显示省略号

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