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

发布于11月20日

我的聊天泡泡是这样的:

我希望它的时间戳为stick to the right side，如下所示:

以下是我的代码:

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

我该怎么做？

What doesn't work?

使用行mainAxisAlignment: MainAxisAlignment.end或对齐alignment: Alignment.centerRight可将所有气泡拉伸至最大宽度.

将crossAxisAlignment: CrossAxisAlignment.end添加到该列将使所有小于时间戳文本的文本与右侧对齐.

推荐答案

用IntrinsicWidth和Align解决了我的问题.

结果如下:

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

阅读有关IntrinsicWidth、use cases和documentation的更多信息.

注: