SwiftUI中按钮拖拽跨区域不可见问题求助

拖拽过程中按钮无法跨区域正常显示，核心原因是视图层级冲突：

• 句子区和按钮区的FlowLayout分别设置了zIndex(0)和zIndex(1)，拖拽中的按钮虽设置了动态zIndex，但父容器的层级限制了它的显示范围，导致拖拽时被另一区域遮挡。
• 拖拽时按钮的偏移基于父容器（FlowLayout）坐标系，而父容器有固定高度和背景，进一步限制了按钮的可视范围。

1. 移除容器层级限制 #

删除句子区和按钮区FlowLayout的.zIndex()修饰符，让容器层级由默认布局顺序决定，避免人为限制视图层级。

2. 提升拖拽中按钮的层级 #

修改DraggableButtonNew的zIndex数值，确保拖拽时按钮处于所有视图的最上层：

.zIndex(offset == .zero ? 0 : 100) // 用更高数值保证层级优先级

完整修复后的关键代码 #

SwiftUIDraggableButtonView的body部分：

var body: some View {
    VStack(spacing: 20) {
        // 句子区域
        FlowLayout(spacing: 5, items: sentenceButtons) { button in
            DraggableButtonNew(
                model: button,
                isInSentence: true
            ) { action in
                handleButtonAction(action, button: button)
            }
            .transition(.move(edge: .bottom))
        }
        .padding()
        .frame(height: 200)
        .background(Color.gray)

        // 默认按钮区域
        FlowLayout(spacing: 10, items: buttons) { button in
            DraggableButtonNew(
                model: button,
                isInSentence: false
            ) { action in
                handleButtonAction(action, button: button)
            }
            .allowsHitTesting(!button.isDisabled)
            .transition(.move(edge: .top))
        }
        .frame(height: 200)
        Spacer()
    }
    .padding()
}

DraggableButtonNew的zIndex修改：

Text(model.text)
    .padding(8)
    .background(isInSentence ? Color.orange : model.isDisabled ? Color.gray : Color.orange)
    .foregroundColor(Color.white)
    .offset(offset)
    .zIndex(offset == .zero ? 0 : 100) // 修改此处zIndex数值
    .gesture(
        DragGesture()
            .onChanged { value in
                offset = value.translation
            }
            .onEnded { _ in
                actionHandler(.drag)
                offset = .zero
            }
    )
    .onTapGesture {
        actionHandler(.tap)
    }

修复后，拖拽按钮时会显示在所有视图最上层，可在句子区和按钮区之间正常移动，拖拽完成后按钮定位保持正常，其他功能不受影响。

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