SwiftUI：无需硬编码数值，动态调整zIndex保持拖拽视图置顶

问题描述 #

在SwiftUI场景中，将上方MyHstackView内的红色矩形拖拽至下方MyHstackView区域时，即便给拖拽视图设置.zIndex(isDragging ? 1.0 : 0.0)，拖拽视图仍会被下方HStack的视图遮挡。需要一种无需硬编码10、100这类大数值的逻辑化方案，确保拖拽视图始终处于顶层。

问题示意图：

问题根源 #

zIndex的作用范围仅局限于当前视图所在的直接容器层级。RectangleView的zIndex只在它所属的MyHstackView内部生效，而两个MyHstackView在ContentView的VStack中是平级关系，因此拖拽视图无法突破父容器的层级限制，自然会被下方的MyHstackView遮挡。

解决方案：全局拖拽状态+父容器层级动态调整 #

通过共享全局拖拽状态，动态调整父容器的zIndex，同时保持拖拽视图在父容器内的最高层级，无需硬编码大数值。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    
    @State private var array1: [CustomType] = [CustomType(value: 1, color: .red), CustomType(value: 2, color: .red), CustomType(value: 3, color: .red)]
    @State private var array2: [CustomType] = [CustomType(value: 4, color: .blue), CustomType(value: 5, color: .blue), CustomType(value: 6, color: .blue)]
    // 全局记录当前拖拽视图的ID
    @State private var draggingItemId: UUID?
    
    var body: some View {
        
        VStack {
            
            Spacer()
            
            MyHstackView(array: $array1, draggingItemId: $draggingItemId)
            
            Spacer()
            
            MyHstackView(array: $array2, draggingItemId: $draggingItemId)
            
            Spacer()
            
        }
        .padding()
        
    }
}

struct MyHstackView: View {
    
    @Binding var array: [CustomType]
    // 接收全局拖拽ID
    @Binding var draggingItemId: UUID?
    
    var body: some View {
        HStack {
            ForEach(array) { item in
                RectangleView(customType: item, draggingItemId: $draggingItemId)
            }
        }
        .padding()
        .background(Rectangle().strokeBorder(.black, lineWidth: 1.0))
        .background(Color.yellow)
        // 动态调整父容器zIndex——如果当前容器内有正在拖拽的项，提升层级
        .zIndex(draggingItemId != nil && array.contains(where: { $0.id == draggingItemId }) ? 1 : 0)
    }
}

struct RectangleView: View {
    
    let customType: CustomType
    // 绑定全局拖拽ID
    @Binding var draggingItemId: UUID?
    
    @State private var currentOffset: CGSize = CGSize()
    @State private var lastOffset: CGSize = CGSize()
    @State private var isDragging: Bool = false
    
    var body: some View {
        Rectangle()
            .fill(customType.color)
            .frame(width: 100.0, height: 100.0)
            .overlay(Text(String(describing: customType.value)).font(.body.bold().monospaced()))
            .overlay(Rectangle().strokeBorder(.black, lineWidth: 1.0))
            // 保持自身在父容器内的最高层级
            .zIndex(isDragging ? 1 : 0)
            .offset(currentOffset)
            .gesture(dragGesture)
        
    }
    
    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: .zero, coordinateSpace: .local)
            .onChanged { gestureValue in
                isDragging = true
                // 更新全局拖拽ID
                draggingItemId = customType.id
                
                currentOffset = CGSize(
                    width: gestureValue.translation.width + lastOffset.width,
                    height: gestureValue.translation.height + lastOffset.height
                )
            }
            .onEnded { gestureValue in
                lastOffset = currentOffset
                isDragging = false
                // 清空全局拖拽ID
                draggingItemId = nil
            }
    }
}

struct CustomType: Identifiable {
    
    init(value: Int, color: Color) {
        self.value = value
        self.color = color
    }
    
    let id: UUID = UUID()
    var value: Int
    var color: Color
}

逻辑说明 #

1. 全局拖拽状态：通过ContentView中的draggingItemId记录当前正在拖拽的视图ID，实现跨容器的状态共享。
2. 父容器层级调整：MyHstackView根据draggingItemId判断自身是否包含正在拖拽的视图，如果包含则将自身zIndex设为1，否则为0，确保拖拽视图所在的父容器层级高于另一个平级容器。
3. 拖拽视图自身层级：RectangleView保持原有的zIndex逻辑，确保在父容器内处于最高层级。

这种方案完全通过逻辑判断动态调整层级，不需要依赖硬编码的大数值，同时保证拖拽视图始终处于顶层。

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