SwiftUI中.contextMenu在头像与气泡间生成多余背景色问题

我用头像和消息气泡做了一个Message View，想要点击气泡时弹出.contextMenu，同时高亮气泡和头像。但现在的问题是，.contextMenu在头像和气泡之间加了白色背景，我需要这个区域保持透明。

• 当前效果：头像与气泡之间的区域显示白色背景，破坏了整体的透明感
• 预期效果：头像与气泡之间的区域保持透明，仅高亮气泡和头像本身

原代码 #

struct MessageCellView: View {

@ObservedObject var viewModel: MessageCellViewModel

var body: some View {
    HStack {
            HStack(alignment: .bottom) {
                avatar("avatar")
                bubble()
                    .cornerRadius(17, corners: [.topLeft, .topRight, .bottomRight])
                    .cornerRadius(5, corners: [.bottomLeft])
            }
            .contextMenu {
                Button {
                    // Do somethind
                } label: {
                    if viewModel.isUserMuted {
                        Label("Unmute User", systemImage: "person.fill.checkmark")
                    } else {
                        Label("Mute User", systemImage: "person.fill.xmark")
                    }
                }
            Spacer()
        }
    }
}

private func bubble() -> some View {
    VStack(alignment: .leading) {
        Text(" name ")
            .foregroundStyle(Color.grey900)
            .font(.system(size: 13, weight: .semibold))
        Text(" Text ")
            .font(.system(size: 15, weight: .regular))
        Text("9m")
            .foregroundStyle(Color.grey700)
            .font(.system(size: 12, weight: .regular))
    }
    .frame(maxWidth: 250, alignment: .leading)
    .padding(.horizontal, 10)
    .padding(.vertical, 6)
    .background(Color.grey100)
}

private func avatar(_ image: String) -> some View {
    AsyncImage(url: URL(string: image)) { phase in
        switch phase {
        case .empty:
            ProgressView()
                .padding()
        case .success(let image):
            image.resizable()
                .aspectRatio(contentMode: .fit)
                .frame(maxWidth: 40, maxHeight: 40)
                .clipShape(Circle())
        case .failure:
            ProgressView()
                .padding()
        @unknown default:
            ProgressView()
                .padding()
        }
    }
}

这个问题是因为默认的contextMenu会给整个包含的HStack填充不透明背景，只需两步就能修复：

1. 强制内层HStack背景透明
   在包裹头像和气泡的HStack(alignment: .bottom)上添加.background(Color.clear)，覆盖系统默认的白色背景填充。

2. 优化交互区域（可选）
   给头像和气泡分别添加.contentShape(Rectangle())，让系统识别的可交互区域精准贴合视图本身，避免高亮范围超出控件。

修改后的完整代码 #

struct MessageCellView: View {
    @ObservedObject var viewModel: MessageCellViewModel

    var body: some View {
        HStack {
            HStack(alignment: .bottom) {
                avatar("avatar")
                    .contentShape(Rectangle()) // 让头像的交互区域更精准
                bubble()
                    .cornerRadius(17, corners: [.topLeft, .topRight, .bottomRight])
                    .cornerRadius(5, corners: [.bottomLeft])
                    .contentShape(Rectangle()) // 让气泡的交互区域更精准
            }
            .background(Color.clear) // 强制背景透明
            .contextMenu {
                Button {
                    // 执行操作
                } label: {
                    if viewModel.isUserMuted {
                        Label("取消静音", systemImage: "person.fill.checkmark")
                    } else {
                        Label("静音用户", systemImage: "person.fill.xmark")
                    }
                }
            }
        }
    }

    private func bubble() -> some View {
        VStack(alignment: .leading) {
            Text(" name ")
                .foregroundStyle(Color.grey900)
                .font(.system(size: 13, weight: .semibold))
            Text(" Text ")
                .font(.system(size: 15, weight: .regular))
            Text("9m")
                .foregroundStyle(Color.grey700)
                .font(.system(size: 12, weight: .regular))
        }
        .frame(maxWidth: 250, alignment: .leading)
        .padding(.horizontal, 10)
        .padding(.vertical, 6)
        .background(Color.grey100)
    }

    private func avatar(_ image: String) -> some View {
        AsyncImage(url: URL(string: image)) { phase in
            switch phase {
            case .empty:
                ProgressView()
                    .padding()
            case .success(let image):
                image.resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth: 40, maxHeight: 40)
                    .clipShape(Circle())
            case .failure:
                ProgressView()
                    .padding()
            @unknown default:
                ProgressView()
                    .padding()
            }
        }
    }
}

另外，原代码里放在contextMenu内的Spacer()是无效的，直接移除即可，不影响菜单布局。

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