Flutter中Column嵌套Stack布局失效，求可行替代实现方案

问题原因 #

Stack在Column中默认会占据可用的最大宽度，而你的文本容器（Row + mainAxisSize: MainAxisSize.min）宽度仅为文本实际宽度，导致Positioned的right:0是相对于整个Stack的右边界（而非文本容器的右边界），最终状态文本跑到了屏幕右下角，看起来像是在文本下方居中。

修复方案 #

方案1：用IntrinsicWidth约束Stack宽度

给Stack套一层IntrinsicWidth，让Stack的宽度匹配内部最宽子组件的宽度，这样Positioned的定位就会基于文本容器的范围：

return MessageBallon(
  directory: message.direction,
  childElement: Column(
    children: [
      message.hasMedia
          ? Container(
              padding: EdgeInsets.only(bottom: height * .05),
              child: CustomMedia(
                src: message.media,
              ),
            )
          : const SizedBox(),
      // 用IntrinsicWidth约束Stack宽度与文本容器一致
      IntrinsicWidth(
        child: Stack(
          children: [
            Container(
              padding: const EdgeInsets.only(
                bottom: 13,
                top: 18,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    constraints: BoxConstraints(maxWidth: width * .53),
                    child: Text(
                      message.content,
                      style: TextStyles.normalTextBlack,
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 10),
                    child: Text(
                      message.messageDate,
                      style: TextStyles.detailText,
                    ),
                  ),
                  message.direction == SmsDirection.incoming
                      ? messageStatus
                      : const SizedBox(),
                ],
              ),
            )
          ],
        ),
      )
    ],
  ),
);

方案2：调整Stack对齐方式（无需文本居中场景）

如果不需要文本居中显示，可移除Row的mainAxisAlignment: MainAxisAlignment.center，同时给Stack设置alignment: Alignment.topLeft，让Stack贴合文本容器的宽度：

return MessageBallon(
  directory: message.direction,
  childElement: Column(
    children: [
      message.hasMedia
          ? Container(
              padding: EdgeInsets.only(bottom: height * .05),
              child: CustomMedia(
                src: message.media,
              ),
            )
          : const SizedBox(),
      Stack(
        alignment: Alignment.topLeft, // 设置对齐方式
        children: [
          Container(
            padding: const EdgeInsets.only(
              bottom: 13,
              top: 18,
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              // 移除mainAxisAlignment: MainAxisAlignment.center
              children: [
                Container(
                  constraints: BoxConstraints(maxWidth: width * .53),
                  child: Text(
                    message.content,
                    style: TextStyles.normalTextBlack,
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Padding(
                  padding: const EdgeInsets.only(right: 10),
                  child: Text(
                    message.messageDate,
                    style: TextStyles.detailText,
                  ),
                ),
                message.direction == SmsDirection.incoming
                    ? messageStatus
                    : const SizedBox(),
              ],
            ),
          )
        ],
      )
    ],
  ),
);

注意事项 #

• 两种方案都能保证状态文本定位在文本容器右下角，且不会覆盖文本（文本容器已预留bottom:13的padding）。
• 无论文本、图片尺寸如何变化，方案都能自适应匹配宽度，满足“尺寸不固定”的约束。

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