iPadOS中TableColumn使用Label导致表头渲染异常问题求助

问题现象 #

在iPadOS的SwiftUI Table组件中，为TableColumn自定义Label单元格视图后，表头出现重复渲染的异常；但使用默认Text组件或不自定义视图时，表头显示正常。

重现代码 #

struct Computer: Identifiable {
    let id: UUID
    let name: String
    
    init(_ name: String) {
        id = UUID()
        self.name = name
    }
}

struct ContentView: View {
    private var computers = [Computer("iMac"), Computer("MacBook"), Computer("Mac mini")]
    
    @State private var selectedComputers = Set<Computer.ID>()
    @State private var sortOrder = [KeyPathComparator(\Computer.name)]
    
    var body: some View {
        Table(computers, selection: $selectedComputers, sortOrder: $sortOrder) {
            // Header rendered incorrectly
            TableColumn("Name", value: \.name) { computer in
                Label(computer.name, systemImage: "desktopcomputer")
            }
            
            // This works:
            // TableColumn("Name", value: \.name)
        }
    }
}

原因分析 #

这是iPadOS SwiftUI框架的渲染Bug（部分早期版本如iPadOS 16/17存在该问题）。当同时使用带value参数的TableColumn初始化器，又提供自定义单元格闭包时，系统的表头渲染逻辑出现冲突，导致重复显示。

解决方案 #

通过调整TableColumn的初始化方式即可规避，两种可选方案：

方案1：移除value参数，手动添加排序支持 #

完全自定义单元格视图，同时通过.sortable修饰符保留排序功能：

Table(computers, selection: $selectedComputers, sortOrder: $sortOrder) {
    TableColumn("Name") { computer in
        Label(computer.name, systemImage: "desktopcomputer")
    }
    .sortable(\.name) // 手动添加排序支持
}

方案2：自定义表头视图（适配复杂表头需求） #

如果需要自定义表头样式，可显式指定表头内容，避免系统自动生成的重复元素：

Table(computers, selection: $selectedComputers, sortOrder: $sortOrder) {
    TableColumn("", value: \.name) { computer in
        Label(computer.name, systemImage: "desktopcomputer")
    }
    .headerContent {
        Text("Name") // 手动定义表头文本
    }
}

结论 #

这并非操作错误，属于框架的版本兼容Bug，通过上述调整即可正常显示表头和自定义单元格。

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