Flutter 最小宽度Column中如何让指定聊天时间组件右对齐不拉伸布局

算力阿峰

2026-10-4

问题原因

Align组件默认会尽可能填充父级可用宽度，直接放在Column子节点中时会将整个Column的宽度拉到父组件的最大宽度，无法保持内容适配的最小宽度。

解决方案

在原有Column外层套一个IntrinsicWidth组件即可，它会强制Column的宽度收缩到内部子元素的最大固有宽度，既不会被Align强行撑开，也可以保留时间组件右对齐的效果。

修改后的完整代码如下：

return Bubble(
  margin: BubbleEdges.only(top: 5, bottom: 5),
  elevation: 0.6,
  alignment: Alignment.topLeft,
  nip: BubbleNip.leftTop,
  radius: Radius.circular(10),
  child: IntrinsicWidth(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        getUserChatTitle(document['userId']),
        Padding(
          padding: const EdgeInsets.only(top: 3, bottom: 5),
          child: SelectableLinkify(
            onOpen: onOpenLink,
            text: "Text Text Text",
            textAlign:
                intl.Bidi.detectRtlDirectionality(document['content'])
                    ? TextAlign.right
                    : TextAlign.left,
            textDirection:
                intl.Bidi.detectRtlDirectionality(document['content'])
                    ? ui.TextDirection.rtl
                    : ui.TextDirection.ltr,
            style: TextStyle(
              fontSize: 16,
              height: 1.35,
              letterSpacing: -0.1,
              fontFamily: 'Arimo',
            ),
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Text(
            formatTimestampToString(document['timestamp']),
            textAlign: TextAlign.left,
            style: TextStyle(
              color: Colors.grey,
              fontSize: 12,
            ),
          ),
        ),
      ],
    ),
  ),
);