Flutter中实现标签Text截断、计时器Text完整显示的布局方法

直接给你可行的代码方案：

Row(
  children: [
    Expanded(
      child: Text(
        'Potentially long text here want to truncate it if there is not enough room',
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      ),
    ),
    SizedBox(width: 8), // 可选：给两个文本之间加个间距，视觉更舒服
    Text('12:34'),
  ],
)

为什么原来的代码无效？ #

原来的写法里，两个Text组件都没有宽度约束，长文本会优先占据Row的全部可用空间，直接把计时器挤出屏幕。

方案说明 #

• 用Expanded包裹标签文本，它会自动占据Row中除计时器之外的所有剩余空间，不会抢占计时器的显示位置。
• 配合maxLines: 1限制文本只显示一行，再加上overflow: TextOverflow.ellipsis，当文本超出可用宽度时自动截断并显示省略号。
• 额外加个SizedBox是为了给两个文本之间留个间距，优化UI美观度，可根据需求调整或移除。

另外注意你原来代码里的小错误：overflow的属性值拼写错了，正确的是TextOverflow.ellipsis（单数形式），不是ellipses。

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