.zIndex() 仅适用于 VStack 内部的同级视图，不适用于外部视图

Question

这是我的布局：

VStack {
 Image()
 
 HStack { 
   
   Image()

   VStack {
     CustomDropdown() //expands views till bottom of screen
       .zIndex(1)
 
     AnotherView()
   }

 }

 MyButton()

}

如您所见，我需要CustomDropdown重叠屏幕上其下方的所有视图，因此我将其设置zIndex为 1。

问题：

仅CustomDropdown与其下方共享相同 的同级视图重叠VStack。然而，它能够重叠底部，MyButton因为它们不共享相同的VStack.

我尝试将MyButtons 索引设置为 0，但这当然没有影响。

我是新手SwiftUI，我确信我缺少一个简单的解决方案来完成这项任务。

提前致谢。

编辑：

我的目标是找到一种方法，使下拉视图能够处理 Z 逻辑，而无需周围视图的帮助，IE 设置屏幕中其他视图的 Z 索引

Answer 1

您当前的视图层次结构有 3 个“顶级”元素：

Image
HStack
MyButton

因此，要使 中包含的任何内容HStack成为“顶部” MyButton（或任何其他后续元素），您必须提高HStack的 z-index 。

这是一个简单的示例 - 点击绿色矩形将在 80 和 300 之间切换其高度：

struct ExpandableView: View {
    @State var expanded = false

    var body: some View {
        VStack {

            // Red view
            Rectangle()
                .fill(Color.red)
                .frame(width: 300, height: 80, alignment: .top)
            
            HStack {
                
                // Green view (your CustomDropdown)
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: expanded ? 300 : 80, alignment: .top)
                    .onTapGesture {
                        expanded.toggle()
                    }
                
            }
            .frame(width: 300, height: 120, alignment: .top)
            
            // Blue view (your MyButton)
            Rectangle()
                .fill(Color.blue)
                .frame(width: 200, height: 100, alignment: .top)
            
        }
        
    }

}

正如您所经历的，这就是结果：

你对绿色视图的 z-index 做什么并不重要......它只会影响它在HStack.

但是，如果我们修改HStack的 z-index ：

struct ExpandableView: View {
    @State var expanded = false

    var body: some View {
        VStack {

            // Red view
            Rectangle()
                .fill(Color.red)
                .frame(width: 300, height: 80, alignment: .top)
            
            HStack {
                
                // Green view (your CustomDropdown)
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: expanded ? 300 : 80, alignment: .top)
                    .onTapGesture {
                        expanded.toggle()
                    }
                
            }
            .frame(width: 300, height: 120, alignment: .top)
            // bring HStack above following elements (Blue Rectangle)
            .zIndex(1)
            
            // Blue view (your MyButton)
            Rectangle()
                .fill(Color.blue)
                .frame(width: 200, height: 100, alignment: .top)
            
        }
        
    }

}

我们得到这个：