在SwiftUI中，覆盖显示在其他视图上有问题。有人有什么想法吗？

我目前正在努力在SwiftUI中实现一个自定义下拉菜单，它显示一个按钮网格（1-16），并允许您选择其中一个按钮。我正在使用一个覆盖图来显示相应按钮下方的下拉列表，它似乎运行正常，除了在视图中所有其他元素下方显示下拉列表。我在这里发现了这个问题，他们使用ZStack解决了这个问题，但我还没有获得同样的成功。有人对如何解决这个问题有什么想法吗？这是我的密码：

struct ContentView: View { 
   @State var showDropdown = false
   @State var selected = 0
        
    var body: some View {
        ZStack {
            HStack(spacing: 30) {
                VStack(alignment: .leading, spacing: 10) {
                    HStack {
                        Text("Some Text")
                            .lineLimit(1)
                        
                        Spacer()
                        
                        Button(action: { showDropdown.toggle() }) {
                            Text(selected == 0 ? "Omni" : String(selected))
                                .frame(width: 80, height: 36)
                        }
                        .zIndex(1)
                        .overlay(
                            VStack(spacing: 0) {
                                if self.showDropdown {
                                    Spacer(minLength: 26)
                                    DropdownMenu(selection: self.$selected)
                                } else {
                                    EmptyView()
                                }
                            }, alignment: .topLeading
                        )
                    }
                    
                    HStack {
                        Text("Some Text")
                            .lineLimit(1)
                        
                        Spacer()
                        
                        Button(action: { }) {
                            Text("Omni")
                                .frame(width: 80, height: 36)
                        }
                    }
                }
                
                VStack(alignment: .leading, spacing: 10) {
                    HStack {
                        Text("Some Text")
                            .lineLimit(1)
                        
                        Spacer()
                        
                        Button(action: { }) {
                            Text("Omni")
                                .frame(width: 80, height: 36)
                        }
                    }
                    
                    HStack {
                        Text("Some Text")
                            .lineLimit(1)
                        
                        Spacer()
                        
                        Button(action: { }) {
                            Text("Omni")
                                .frame(width: 80, height: 36)
                        }
                    }
                }
            }
        }
        .padding()
        .frame(maxHeight: .infinity)
        .buttonStyle(PlainButtonStyle())
    }
}

下面是一些结果的图像：

---

提前谢谢你

zIndex适用于同一容器中的视图，因此您需要以下内容（或者制作自定义平面布局容器，使所有此类按钮处于同一级别，然后在顶部单击按钮）

VStack（对齐：。前导，间距：10）{
HStack{
文本（“某些文本”）
.lineLimit（1）
垫片（）
按钮（操作：{showDropdown.toggle（）}）{
文本（选定==0？“全向”：字符串（选定））
.框架（宽：80，高：36）
}
.zIndex（1）
.覆盖(
VStack（间距：0）{
如果自我摊牌{
垫片（最小长度：26）
下拉菜单（选择：self.$selected）
}
}，对齐方式：。顶部前导
)
}.zIndex（showDropdown？1:0）//其他按钮是否也有下拉列表，或者这是唯一的一个？其他按钮也会有，是的。在示例图像中，您看到的所有内容都是“Omni”。
VStack(alignment: .leading, spacing: 10) {
    HStack {
        Text("Some Text")
            .lineLimit(1)
        
        Spacer()
        
        Button(action: { showDropdown.toggle() }) {
            Text(selected == 0 ? "Omni" : String(selected))
                .frame(width: 80, height: 36)
        }
        .zIndex(1)
        .overlay(
            VStack(spacing: 0) {
                if self.showDropdown {
                    Spacer(minLength: 26)
                    DropdownMenu(selection: self.$selected)
                }
            }, alignment: .topLeading
        )
    }.zIndex(showDropdown ? 1 : 0)      // << this !!
    
    HStack {
        Text("Some Text")
            .lineLimit(1)
        
        Spacer()
        
        Button(action: { }) {
            Text("Omni")
                .frame(width: 80, height: 36)
        }
    }
}.zIndex(showDropdown ? 1 : 0)        // << and this !!