Flutter 在气泡聊天消息上对齐时间戳文本

Question

我的聊天气泡看起来像这样:

我希望它的时间戳保持在右侧，如下所示:

这是我的代码:

   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)),
          ],
        ),
      ),
    );

我该怎么做？

什么不起作用？

使用 Row mainAxisAlignment: MainAxisAlignment.end 或 Align alignment: Alignment.centerRight 导致将所有气泡拉伸(stretch)到最大宽度。

将 crossAxisAlignment: CrossAxisAlignment.end 添加到 Column 会将所有小于时间戳文本的文本对齐到右侧。

Answer 1

像这样用 Align 小部件包裹你的时间戳:

IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              content,
              SizedBox(height: 5),
              Align(
                alignment: Alignment.centerRight,
                child: Text(timeFormat01(timestamp)),
              ),
            ],
          ),
        )