如何在macOS应用的HStack中实现按钮拖拽重排序？

要实现HStack内按钮的左右拖拽重排，核心是利用SwiftUI的onDrag和onDropAPI，结合可绑定的数据源驱动视图更新。具体实现如下：

1. 定义可绑定数据源 #

把按钮标题存储在@State数组中，数组变化时视图会自动刷新：

@State private var buttonTitles = ["1", "2", "3"]

2. 添加拖拽与接收逻辑 #

通过onDrag生成拖拽数据，自定义DropDelegate处理拖拽后的排序逻辑：

完整代码示例 #

import SwiftUI

struct ContentView: View {
    @State private var buttonTitles = ["1", "2", "3"]
    
    var body: some View {
        HStack(spacing: 16) {
            ForEach(buttonTitles, id: \.self) { title in
                Button(title) {
                    // 这里添加按钮点击逻辑
                }
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
                .onDrag {
                    guard let index = buttonTitles.firstIndex(of: title) else {
                        return NSItemProvider()
                    }
                    return NSItemProvider(object: "\(index)" as NSString)
                }
                .onDrop(of: [.text], delegate: DragDropDelegate(currentTitle: title, buttonTitles: $buttonTitles))
            }
        }
        .padding()
    }
}

// 自定义拖拽接收代理
class DragDropDelegate: DropDelegate {
    let currentTitle: String
    @Binding var buttonTitles: [String]
    
    init(currentTitle: String, buttonTitles: Binding<[String]>) {
        self.currentTitle = currentTitle
        self._buttonTitles = buttonTitles
    }
    
    func performDrop(info: DropInfo) -> Bool {
        guard let itemProvider = info.itemProviders(for: [.text]).first else {
            return false
        }
        
        itemProvider.loadObject(ofClass: NSString.self) { [weak self] object, _ in
            guard let self = self,
                  let indexString = object as? String,
                  let sourceIndex = Int(indexString),
                  let targetIndex = self.buttonTitles.firstIndex(of: self.currentTitle),
                  sourceIndex != targetIndex else {
                return
            }
            
            DispatchQueue.main.async {
                self.buttonTitles.swapAt(sourceIndex, targetIndex)
            }
        }
        return true
    }
    
    // 可选：拖拽进入时的视觉反馈
    func dropEntered(info: DropInfo) {
        // 例如：修改按钮背景色
    }
    
    // 可选：拖拽离开时恢复样式
    func dropExited(info: DropInfo) {
        // 例如：恢复按钮原有背景色
    }
}

#Preview {
    ContentView()
}

关键逻辑说明 #

• onDrag：将当前按钮的索引转为字符串作为拖拽数据，用于识别拖拽的源位置。
• DropDelegate：在performDrop中解析拖拽数据，获取源索引和目标索引，调用swapAt交换数组元素完成排序。
• 视觉反馈：可在dropEntered和dropExited中修改按钮样式，提升拖拽交互体验。

注意事项 #

如果按钮标题可能重复，建议定义带唯一ID的数据模型，避免firstIndex(of:)匹配错误：

struct ButtonData: Identifiable {
    let id = UUID()
    let title: String
}

// 使用时：
@State private var buttons = [ButtonData(title: "1"), ButtonData(title: "2"), ButtonData(title: "3")]

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