SwiftUI：DisclosureGroup展开时避免父HStack下移，实现悬浮覆盖

要实现DisclosureGroup展开时悬浮覆盖下方内容、不改变父HStack高度的效果，核心思路是将DisclosureGroup的内容剥离到overlay中，通过状态绑定控制显示，避免内容撑开父视图布局。

完整代码示例 #

struct ContentView: View {
    @State private var showMyIssues = false
    @State private var isDisclosed = false // 跟踪DisclosureGroup的展开状态
    
    var body: some View {
        VStack {
            HStack {
                // 仅保留DisclosureGroup的标题交互部分，绑定展开状态
                DisclosureGroup("Tail Number / MDS", isExpanded: $isDisclosed) {
                    // 此处留空，内容移至overlay中
                }
                .overlay(alignment: .topLeading) {
                    // 仅在展开状态下显示悬浮内容
                    if isDisclosed {
                        VStack(alignment: .leading) {
                            Text("This is just fake text")
                            Text("This is just fake text")
                            Text("This is just fake text")
                            Text("This is just fake text")
                        }
                        .padding()
                        .background(Color.white)
                        .cornerRadius(8)
                        .shadow(radius: 3)
                        .offset(y: 30) // 偏移至标题下方，避免重叠
                        .zIndex(1) // 确保悬浮内容在最上层
                    }
                }
                
                HStack {
                    Text("My Issues")
                    Toggle("", isOn: $showMyIssues).labelsHidden()
                }
                
                Text("Add Report")
            }
            .padding()
            
            // 下方示例内容，用于验证悬浮效果
            Text("下方的更多视图内容")
                .frame(maxWidth: .infinity, minHeight: 200)
                .background(Color.gray.opacity(0.2))
        }
    }
}

关键实现说明 #

• 状态绑定：用isDisclosed变量绑定DisclosureGroup的展开状态，控制悬浮内容的显示/隐藏
• 剥离内容到Overlay：原DisclosureGroup仅保留标题交互，内容移至overlay后，父HStack的高度不会因内容展开而变化
• 视觉优化：通过background、shadow提升悬浮内容的辨识度，offset调整位置避免与标题重叠，zIndex确保内容不会被下方视图遮挡

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