在SwiftUI的其他视图上出现覆盖问题.有人有什么想法吗? [英] Having trouble with having an overlay appear over other views in SwiftUI. Does anyone have any ideas?

问题描述

我目前正在尝试在SwiftUI中实现自定义下拉菜单，该菜单显示一个按钮网格(1-16)，并允许您选择其中的一个.我正在使用叠加层在相应按钮下方显示下拉菜单，并且它似乎在视图中所有其他元素下方显示下拉菜单，但工作正常.我发现了另一篇文章关于此问题，他们使用ZStack解决了这个问题，但我一直未能获得同样的成功.有人对如何解决这个问题有任何想法吗?这是我的代码:

I'm currently working on trying to implement a custom dropdown menu in SwiftUI that displays a grid of buttons (1-16) and allows you to select one of them. I am using an overlay to display the dropdown below the corresponding button, and it seems to be functioning properly except it's displaying the dropdown below all of the other elements in the view. I found another post here regarding this issue and they used a ZStack to solve it, but I haven't been able to get the same success. Does anyone have any ideas on how to fix this? Here's my code:

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 适用于相同容器中的视图，因此您需要类似以下内容(或制作具有所有此类按钮处于同一级别的自定义平面布局容器，然后将点击的按钮放在顶部).

The .zIndex works for view in same container, so you need something like the following (or make custom flat layout container with all such buttons at same level, then rise clicked button atop).

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 !!

这篇关于在SwiftUI的其他视图上出现覆盖问题.有人有什么想法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！