如何在fixedSize()修饰的VStack中实现多行文本（适配聊天气泡）

要实现自适应宽度（最大280）且包含通栏Divider的聊天气泡，调整布局结构即可，核心是让外层容器限制最大宽度，同时内部元素自动适配：

VStack(alignment: .leading, spacing: 8) {
    Text("I Want to create bubble chat like whatsapp where the bubble will shrink based on its content.")
        .padding(.horizontal, 12)
        .padding(.vertical, 8)
    Divider()
    HStack {
        Spacer()
        Text(Date().formatted(date: .omitted, time: .shortened)) // 替换为你的TimeChatOverlay组件
            .font(.caption)
            .padding(.horizontal, 12)
            .padding(.bottom, 8)
    }
}
.frame(maxWidth: 280, alignment: .leading)
.background(Color.red.opacity(0.1))
.cornerRadius(16)

关键调整说明： #

• 外层使用frame(maxWidth: 280, alignment: .leading)：既限制气泡最大宽度为280，又让短文本时气泡宽度自动收缩到内容宽度。
• 移除fixedSize修饰符：这个修饰符会强制容器保持内容的原始尺寸，导致长文本无法自动换行或背景尺寸异常。
• 给文本和时间组件添加内边距：模拟WhatsApp气泡的内边距，提升视觉效果。
• Divider会自动占满外层容器的宽度，因为它默认宽度为.infinity，刚好符合通栏需求。

之前方案失败的原因： #

1. 第一个方案中，fixedSize(horizontal: true)强制容器不换行，再加上maxWidth:280的限制，长文本无法换行只能被截断。
2. 第二个方案中，Text单独设置maxWidth:280可以换行，但外层的fixedSize(horizontal: true)会让VStack的宽度被Divider拉满（因为Divider宽度无限），导致短文本时背景也撑满280，不符合自适应需求。

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