Row布局中右侧组件文本正确换行及溢出省略实现方法

当前布局如下图：

Widget1 左对齐，Widget2 和文本组件右对齐，需要实现文本长度超出行布局可用空间时自动显示省略号，预期效果如下：

实现方案 #

Flutter中实现该布局的核心是用Flexible/Expanded限制文本组件的最大可用宽度，配合Text组件的溢出属性即可，参考代码如下：

Row(
  children: [
    // 左侧固定的Widget1
    Container(
      width: 80,
      height: 40,
      color: Colors.blue,
      child: const Center(child: Text('Widget1')),
    ),
    // 撑开左侧和右侧区域的空白
    const Spacer(),
    // 用Flexible包裹文本，限制最大宽度为剩余可用空间
    Flexible(
      child: Text(
        '超长文本测试超长文本测试超长文本测试超长文本测试',
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      ),
    ),
    // 文本和Widget2的间距，可根据需求调整
    const SizedBox(width: 12),
    // 右侧固定的Widget2
    Container(
      width: 60,
      height: 30,
      color: Colors.orange,
      child: const Center(child: Text('Widget2')),
    ),
  ],
)

关键说明 #

• Spacer 负责将Widget1和右侧的文本+Widget2区域完全推开，天然实现左对齐Widget1、右对齐另外两个组件的布局要求
• 必须给Text组件外层套Flexible/Expanded，否则Text会按照自身内容计算宽度，超出Row的总宽度就会触发溢出报错，套上后文本的最大宽度会被限制为Row扣除固定元素宽度后的剩余空间
• 给Text设置overflow: TextOverflow.ellipsis和maxLines:1即可实现超出自动显示省略号的效果，如果你需要多行省略，调整maxLines的数值即可。

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