Flutter如何实现Row内文本按需省略且图标自适应位置？

问题核心 #

你当前使用Expanded包裹文本，它会强制文本占据Row的所有剩余空间，导致图标始终固定在右侧。而需求需要两种状态：文本未溢出时图标紧跟文本，溢出时文本显示省略号且图标在最右侧。

解决方案 #

将Expanded替换为Flexible，并移除mainAxisSize: MainAxisSize.min，代码修改如下：

Row(
  children: [
    Flexible(
      child: Text(
        myText,
        style: TextStyle(color: colorScheme.primary),
        overflow: TextOverflow.ellipsis,
      ),
    ),
    const SizedBox(width: 20),
    Icon(
      Icons.featured_play_list_outlined,
      color: colorScheme.primary,
      size: 15,
    ),
  ],
)

原理说明 #

• Flexible默认使用FlexFit.loose适配规则：当Row有足够空间时，文本会按自身内容宽度展示，图标和间距会紧跟在文本右侧；当文本内容过长超出剩余空间时，Flexible会让文本自动收缩，触发TextOverflow.ellipsis显示省略号，同时图标和间距被推到Row的最右侧。
• 移除mainAxisSize: MainAxisSize.min后，Row会默认占满父组件的可用宽度，确保文本溢出时能利用全部剩余空间。

内容的提问来源于stack exchange，提问作者kk-at-cbx