拖拽元素时zIndex设置不生效，无法置于组内顶层问题求助

你遇到的zIndex不生效的核心问题是：Draggable modifier内部的zIndex仅作用于当前元素自身的视图上下文，无法突破LazyHGrid中每个子项的独立容器层级。LazyHGrid的每个ForEach生成的元素都是独立的视图节点，内部的zIndex只能调整该节点内部视图的层级，无法让整个元素在Grid的全局层级中置顶。

要解决这个问题，需要将zIndex的控制权提升到LazyHGrid的父视图层面，统一管理所有元素的层级：

• 在父视图中维护一个状态变量，记录当前正在被拖拽的元素ID
• 每个元素根据这个ID判断自己是否需要设置最高层级
• 修改拖拽修饰器，在拖拽开始/结束时更新父视图的状态变量

父视图 DragShapesView #

struct DragShapesView: View {
    // 记录当前正在拖拽的元素ID
    @State private var activeDragId: Int? = nil
    
    var body: some View {
        let layout = [GridItem(), GridItem()]
        
        LazyHGrid(rows: layout, spacing: 15) {
            ForEach(1..<5) { i in
                Circle()
                    .frame(width: 50, height: 50)
                    .overlay {
                        Text(String(i))
                            .font(.evolventaBold(25))
                            .foregroundColor(.white)
                    }
                    // 在这里根据激活ID设置全局zIndex
                    .zIndex(activeDragId == i ? Double.infinity : 0)
                    .draggable(
                        itemId: i,
                        activeDragId: $activeDragId,
                        onChanged: { location in
                            
                        },
                        onEnded: {
                            
                        }
                    )
            }
        }
    }
}

拖拽修饰器 Draggable #

struct Draggable: ViewModifier {
    let itemId: Int
    @Binding var activeDragId: Int?
    
    @State private var offset: CGSize = .zero
    
    var onChanged: ((CGPoint) -> Void)?
    var onEnded: (() -> Void)?
    
    func body(content: Content) -> some View {
        content
            .offset(offset)
            .gesture(
                DragGesture(coordinateSpace: .global)
                    .onChanged { value in
                        // 拖拽开始时通知父视图激活当前元素ID
                        activeDragId = itemId
                        offset = value.translation
                        onChanged?(value.location)
                    }
                    .onEnded { _ in
                        // 拖拽结束时重置激活状态
                        activeDragId = nil
                        offset = .zero
                        onEnded?()
                    }
            )
    }
}

extension View {
    func draggable(
        itemId: Int,
        activeDragId: Binding<Int?>,
        onChanged: ((CGPoint) -> Void)? = nil,
        onEnded: (() -> Void)? = nil
    ) -> some View {
        self.modifier(
            Draggable(
                itemId: itemId,
                activeDragId: activeDragId,
                onChanged: onChanged,
                onEnded: onEnded
            )
        )
    }
}

1. 原代码中的offset直接使用value.translation会导致每次拖拽都从原点开始，如果你需要元素从当前位置拖拽，可以改为累计偏移量（比如用@State private var totalOffset: CGSize = .zero，onChanged里设置totalOffset = CGSize(width: totalOffset.width + value.translation.width, height: totalOffset.height + value.translation.height)，同时配合DragGesture的updating方法重置临时偏移）。
2. zIndex设置为Double.infinity可以确保被拖拽元素处于所有其他元素的顶层，也可以使用固定的大数值（比如1000）来替代。

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