如何去除macOS SwiftUI Table单元格的默认内边距？

问题描述 #

开发仅支持macOS的SwiftUI应用，使用Table展示目录内容时，发现单元格存在默认内边距/间隙，无法让红色背景填满整个单元格。已尝试在视图各处设置padding(.all, 0)但无效，不想切换到AppKit实现。

当前列代码：

TableColumn("name", value: \.name) { item in
    HStack {
        if item.type == .directory {
            Image(systemName: "folder")
                .frame(width: 14)
        } else {
            Text("")
                .frame(width: 14)
        }
        Text(item.name)
        Spacer()
    }
    .contentShape(Rectangle())
    .gesture(TapGesture(count: 2).onEnded {
        print(item)
        doubleClick(path: item.path)
    }).simultaneousGesture(TapGesture().onEnded {
        self.selectedFileItem = item.id
    })
    .background(.red)
    .padding(.all, 0)
}

使用的表格样式：

.tableStyle(.bordered(alternatesRowBackgrounds: true))

解决方案 #

SwiftUI的Table单元格默认内边距来自列布局和行容器的默认设置，仅设置padding(0)无法覆盖，需要从三个维度调整：

1. 让内容视图撑满整个单元格
   在你的HStack外层添加frame(maxWidth: .infinity, maxHeight: .infinity)，强制内容填充单元格的所有可用空间：

   HStack {
       // 原有内容...
   }
   .frame(maxWidth: .infinity, maxHeight: .infinity) // 新增：撑满单元格
   .contentShape(Rectangle())
   // 后续手势、背景等设置...
   

2. 移除列之间的间隙
   给整个Table添加.tableColumnSpacing(0)修饰符，消除列与列之间的默认间距：

   Table(/* 数据源与配置 */) {
       // 各列定义...
   }
   .tableStyle(.bordered(alternatesRowBackgrounds: true))
   .tableColumnSpacing(0) // 新增：移除列间隙
   

3. 清除行容器的默认内边距
   在内容视图（HStack）的修饰符中添加.listRowInsets(EdgeInsets())，彻底移除单元格的默认内边距：

   HStack {
       // 原有内容...
   }
   .frame(maxWidth: .infinity, maxHeight: .infinity)
   .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) // 新增：清除行内边距
   .contentShape(Rectangle())
   // 后续手势、背景等设置...
   

完整修改后的列代码示例 #

TableColumn("name", value: \.name) { item in
    HStack {
        if item.type == .directory {
            Image(systemName: "folder")
                .frame(width: 14)
        } else {
            Text("")
                .frame(width: 14)
        }
        Text(item.name)
        Spacer()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
    .contentShape(Rectangle())
    .gesture(TapGesture(count: 2).onEnded {
        print(item)
        doubleClick(path: item.path)
    }).simultaneousGesture(TapGesture().onEnded {
        self.selectedFileItem = item.id
    })
    .background(.red)
    .padding(.all, 0)
}

注意事项 #

• 该方案适用于macOS 13+（SwiftUI 4及以上版本），当前Table实现本身依赖SwiftUI 4的API。
• 如果仍存在细微间隙，可尝试给Table添加.environment(\.defaultMinListRowHeight, 0)，但通常前三个步骤已足够解决问题。

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