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
相关产品推荐
相关产品推荐

