Flutter聊天气泡时间戳靠右对齐实现（避免气泡拉伸与内容错位）

需求说明 #

当前聊天气泡的时间戳与内容左对齐，希望实现时间戳单独靠右对齐，同时满足：

1. 气泡宽度自适应内容，不会被强制拉伸至最大宽度
2. 聊天内容保持左对齐，仅时间戳调整为靠右

现有代码 #

return Align(
  alignment: alignment,
  child: Bubble(
    margin: BubbleEdges.only(
      top: 10,
      left: leftMargin,
      right: rightMargin,
    ),
    color: backgroundColor,
    nip: bubbleNip,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        content,
        const SizedBox(height: 5),
        Text(timeFormat01(timestamp)),
      ],
    ),
  ),
);

已验证的无效方案 #

• 方案1：用Row设置mainAxisAlignment: MainAxisAlignment.end或Align设置alignment: Alignment.centerRight包裹整个Column → 气泡被拉伸至最大宽度，不符合自适应需求
• 方案2：给Column设置crossAxisAlignment: CrossAxisAlignment.end → 所有短文本内容也会靠右对齐，破坏内容排版

正确实现代码 #

return Align(
  alignment: alignment,
  child: Bubble(
    margin: BubbleEdges.only(
      top: 10,
      left: leftMargin,
      right: rightMargin,
    ),
    color: backgroundColor,
    nip: bubbleNip,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        content,
        const SizedBox(height: 5),
        // 用Align包裹时间戳，widthFactor:1确保Align占满Column宽度，实现时间戳靠右
        Align(
          alignment: Alignment.centerRight,
          widthFactor: 1,
          child: Text(timeFormat01(timestamp)),
        ),
      ],
    ),
  ),
);

原理说明 #

widthFactor: 1 会让Align组件的宽度与父容器（Column）一致，而Column的宽度由其中最宽的子元素（聊天内容content）决定，这样既保证了气泡宽度自适应内容，又能让时间戳在该宽度范围内靠右对齐，同时聊天内容保持左对齐，完全满足需求。

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