You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI 3新增Table组件如何自定义调整TableRow的行高?

SwiftUI 3 Table 自定义行高解决方案

SwiftUI 3 暂未提供直接对 TableRow 设置行高的专属修饰符,可通过以下两种方案实现自定义行高需求:

  • 方案一:自定义列内容视图(全平台通用,支持不同行设置不同高度)
    TableRow 的行高默认会自动适配内部内容的高度,修改 TableColumn 的内容视图尺寸即可间接控制行高,示例代码如下:
struct ContentView: View {
    @State private var items: [ItemModel] = Array(0...100).map { ItemModel(title: "item \($0)") }
    @State private var selection = Set<ItemModel.ID>()

    var body: some View {
        Table(selection: $selection) {
            // 替换原快捷构造语法,自定义列内视图
            TableColumn("title") { item in
                Text(item.title)
                    // 方式1:通过垂直 padding 调整行高
                    .padding(.vertical, 15)
                    // 方式2:直接固定内容高度,按需二选一即可
                    // .frame(height: 50)
            }
        } rows: {
            ForEach(items) { item in
                TableRow(item)
            }
        }
    }
}

struct ItemModel: Identifiable {
    let id = UUID()
    let title: String
}
  • 方案二:全局统一设置行高(macOS 平台专属)
    如果是 macOS 平台开发,可直接使用系统提供的修饰符统一设置所有行的高度,示例代码如下:
Table(selection: $selection) {
    TableColumn("title", value: \.title)
} rows: {
    ForEach(items) { item in
        TableRow(item)
    }
}
// macOS 12+ 可用,直接指定全局行高
.tableRowHeight(50)

内容的提问来源于stack exchange,提问作者Yakuhzi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.29 20:54:04