SwiftUI Table中如何实现Transferable协议的拖拽功能

问题背景 #

使用SwiftUI开发macOS应用，定义了focusArticle结构体并填充到Table组件中，希望实现Table行的拖拽功能（拖到同类Table），但遇到以下错误：

1. 实现Transferable协议时，出现Static method 'buildBlock' requires that 'String' conform to 'TransferRepresentation'
2. 给Table添加.draggable时，提示Instance method 'draggable' requires that '[focusArticle]' conform to 'Transferable'
3. 尝试让结构体同时遵守Codable和Transferable后，出现Type 'UTType' has no member 'focusArticle'

原结构体及Table代码：

struct focusArticle: Identifiable {
    let category: String
    let headline: String
    let body: String
    let publishedDate: String
    let source: String
    var id = UUID()
}

struct ArticleView: View {
    @State private var selectedArticles = Set<focusArticle.ID>()

    var body: some View {
        Table(articles, selection: $selectedArticles) {
            TableColumn("Category", value: \.category)
                .width(70)
            TableColumn("Headline", value: \.headline)
                .width(350)
            TableColumn("Published", value: \.publishedDate)
        }
        .frame(width: 600, height: 200)
    }
}

错误原因 #

1. TransferRepresentation实现错误：早期尝试使用了不符合要求的类型（如直接返回String），TransferRepresentation需要使用CodableRepresentation、DataRepresentation等标准实现类型。
2. 拖拽目标类型不匹配：直接传递数组给.draggable，但数组默认未遵守Transferable协议，需明确处理单个元素或批量选中元素的拖拽数据。
3. 未定义自定义UTType：.focusArticle不是系统内置的统一类型标识符，必须自行扩展UTType定义。

分步解决方案 #

1. 定义自定义UTType #

首先扩展UTType，添加自定义的类型标识符（替换com.yourdomain.focusArticle为你的应用域名）：

import UniformTypeIdentifiers

extension UTType {
    static let focusArticle = UTType(exportedAs: "com.yourdomain.focusArticle")
}

2. 修正结构体，正确遵守Transferable和Codable #

遵循Swift命名规范（大驼峰），并正确实现TransferRepresentation：

struct FocusArticle: Identifiable, Codable, Transferable {
    let category: String
    let headline: String
    let body: String
    let publishedDate: String
    let source: String
    var id = UUID()
    
    static var transferRepresentation: some TransferRepresentation {
        CodableRepresentation(contentType: .focusArticle)
    }
}

3. 给Table添加正确的拖拽逻辑 #

方案A：单行拖拽（每一行独立可拖拽）

通过rowContent为每一行添加拖拽能力：

struct ArticleView: View {
    @State private var selectedArticles = Set<FocusArticle.ID>()
    let articles: [FocusArticle] // 确保articles是传入的数据源数组

    var body: some View {
        Table(articles, selection: $selectedArticles) {
            TableColumn("Category", value: \.category)
                .width(70)
            TableColumn("Headline", value: \.headline)
                .width(350)
            TableColumn("Published", value: \.publishedDate)
        } rowContent: { article in
            TableRow(article)
                .draggable(article)
        }
        .frame(width: 600, height: 200)
    }
}

方案B：批量拖拽（拖拽选中的多行）

基于选中的元素生成拖拽数据，同时提供拖拽预览：

struct ArticleView: View {
    @State private var selectedArticles = Set<FocusArticle.ID>()
    let articles: [FocusArticle]

    var body: some View {
        Table(articles, selection: $selectedArticles) {
            TableColumn("Category", value: \.category)
                .width(70)
            TableColumn("Headline", value: \.headline)
                .width(350)
            TableColumn("Published", value: \.publishedDate)
        }
        .frame(width: 600, height: 200)
        .draggable(selectedArticles.isEmpty ? nil : articles.filter { selectedArticles.contains($0.id) }) {
            Text("\(selectedArticles.count) article(s)")
        }
    }
}

// 扩展数组，使其遵守Transferable（用于批量拖拽）
extension Array: Transferable where Element == FocusArticle {
    public static var transferRepresentation: some TransferRepresentation {
        CodableRepresentation(contentType: .focusArticle)
    }
}

接收拖拽的目标Table实现 #

在目标Table所在的视图中添加.dropDestination修饰符，处理拖拽的数据：

struct TargetArticleView: View {
    @State private var targetArticles: [FocusArticle] = []

    var body: some View {
        Table(targetArticles) {
            TableColumn("Category", value: \.category)
                .width(70)
            TableColumn("Headline", value: \.headline)
                .width(350)
            TableColumn("Published", value: \.publishedDate)
        }
        .frame(width: 600, height: 200)
        .dropDestination(for: FocusArticle.self) { items, location in
            targetArticles.append(contentsOf: items)
            return true
        }
        // 如果支持批量拖拽，也可以接收数组类型
        .dropDestination(for: [FocusArticle].self) { items, location in
            targetArticles.append(contentsOf: items.flatMap { $0 })
            return true
        }
    }
}

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