Flutter中如何解决Column内Text组件的文本溢出问题？

问题说明 #

在嵌套于Row的Column布局里，歌曲名称对应的Text组件出现文本溢出：文本超出布局范围被截断，无法按预期收缩显示。期望实现文本过长时自动截断并显示省略号的效果。

原问题代码 #

body: Padding(
  padding: const EdgeInsets.all(20),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                widget.songModel.displayNameWOExt, // 出现问题的文本
              ),
              Text(
                widget.songModel.artist.toString(),
                overflow: TextOverflow.fade,
              ),
            ],
          ),  
        ],
      ),
    ),
  ),
);

解决方案 #

核心是给文本添加溢出控制属性，同时约束Column在Row中的宽度，避免无限制扩张。

修改后的代码 #

body: Padding(
  padding: const EdgeInsets.all(20),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  widget.songModel.displayNameWOExt,
                  overflow: TextOverflow.ellipsis, // 溢出显示省略号
                  maxLines: 1, // 限制单行显示
                ),
                Text(
                  widget.songModel.artist.toString(),
                  overflow: TextOverflow.fade,
                ),
              ],
            ),
          ),  
        ],
      ),
    ),
  ),
);

关键改动说明 #

• Expanded包裹Column：让Column在Row中占据可用的剩余宽度，约束文本的显示范围，避免文本无限扩张超出父布局。
• overflow: TextOverflow.ellipsis：设置文本溢出时显示省略号，匹配期望效果。
• maxLines: 1：固定文本为单行显示，配合溢出属性生效；若需多行溢出，可调整此值（如设为2）。

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