SwiftUI中contextMenu预览视图的尺寸适配问题

你的问题核心在于SwiftUI默认给ContextMenu的预览视图设置了固定尺寸范围，导致短文本场景下预览过度拉伸，长文本场景下内容被截断。通过以下调整可让预览视图完全匹配内容：

具体修改方案 #

1. 给预览根容器添加尺寸自适应约束，允许垂直方向随内容高度调整，水平方向支持文本换行；
2. 限制预览最大宽度，避免短文本时视图过宽；
3. 移除文本行数限制，确保长文本可自动换行展示。

修改后的预览视图代码 #

将原preview闭包内的代码替换为：

HStack(spacing: 10) {
    Image("Person1")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 120) // 直接固定头像宽度，简化约束
    VStack(alignment: .leading, spacing: 8) { // 显式设置对齐方式，优化排版
        Text("“\(message.text)”")
            .lineLimit(.none) // 允许文本自动换行
        Text(" – Person1")
            .italic()
            .frame(maxWidth: .infinity, alignment: .trailing) // 让署名靠右对齐
    }
}
.padding(8)
.background(Color("Person1"))
.fixedSize(horizontal: false, vertical: true) // 垂直方向自适应高度，水平方向允许换行
.frame(maxWidth: 400) // 限制预览最大宽度，避免短文本场景过度拉伸

原理说明 #

• fixedSize(horizontal: false, vertical: true)：告诉SwiftUI不要强制水平方向填充父容器，允许文本换行；同时垂直方向根据内容高度自动调整，避免长文本被截断。
• frame(maxWidth: 400)：给预览设置合理的最大宽度，平衡短文本场景的紧凑性和长文本的可读性。
• lineLimit(.none)：移除文本行数限制，确保长内容能完整展示。

完整修改后的ContentView代码 #

import SwiftUI

struct Message: Identifiable {
    var id: UUID
    var title: String
    let text: String

    init(_ title: String, text: String) {
        self.id = UUID()
        self.title = title
        self.text = text
    }
}

struct ContentView: View {
    @State var presenting: Bool = false

    let messages = [
        Message("Short", text: "Is this thing even on?"),
        Message("Medium", text: "Can you hear me? I can’t hear you. Give me a minute to set up my headphones."),
        Message("Long", text: "Can you hear me? I can’t hear you. Give me a minute to set up my headphones. I still can't hear you.")
    ]
    var body: some View {
        VStack(spacing: 10) {
            Text("Hold down on text to show context menu.")
            ForEach(messages) { message in
                Button {
                    presenting = true
                } label: {
                    Text(message.title)
                }
                .contextMenu {
                    Button {
                        // nothing to do
                    } label: {
                        Label("View Profile", systemImage: "person.circle")
                    }
                } preview: {
                    // 修改后的预览视图
                    HStack(spacing: 10) {
                        Image("Person1")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 120)
                        VStack(alignment: .leading, spacing: 8) {
                            Text("“\(message.text)”")
                                .lineLimit(.none)
                            Text(" – Person1")
                                .italic()
                                .frame(maxWidth: .infinity, alignment: .trailing)
                        }
                    }
                    .padding(8)
                    .background(Color("Person1"))
                    .fixedSize(horizontal: false, vertical: true)
                    .frame(maxWidth: 400)
                }
            }
        }
        .padding()
        .alert("Hold down instead of tapping.", isPresented: $presenting) {
            Button("OK", role: .cancel) {
                // alert closes automatically
            }
        }
    }
}

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