SwiftUI中使用InsetGroupedListStyle时如何移除或缩小Section头部空间？

问题场景 #

我用SwiftUI实现了如下列表视图，使用insetGrouped样式时，Section头部存在多余空白，想移除这些空白并放置静态导航链接。之前用全局UIKit设置UITableView.appearance().sectionFooterHeight = 0，既无法完全消除空白，还会影响所有列表，仅需当前列表生效。

原代码：

struct ContentView: View {
  var body: some View {
    List {
      Section("How do I get rid of this space") {
        Text("Static content")
      }
      
      Section("How do I get rid of this space") {
        Text("Static content")
      }
      
      Section("How do I get rid of this space") {
        Text("Dynamic content")
        Text("Dynamic content")
        Text("Dynamic content")
      }
    }
  }
}

可行解决方案 #

1. 自定义Section头部（推荐，纯SwiftUI实现） #

直接隐藏默认Section头部，自定义无多余间距的导航链接头部，完全控制布局：

struct ContentView: View {
  var body: some View {
    List {
      // 自定义头部的Section
      Section {
        Text("Static content")
      } header: {
        NavigationLink(destination: YourTargetView()) {
          Text("导航链接头部")
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.vertical, 8) // 自定义内边距，完全消除空白
        }
      }
      
      // 其他Section同理
      Section {
        Text("Static content")
      } header: {
        NavigationLink(destination: AnotherTargetView()) {
          Text("另一个导航头部")
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.vertical, 8)
        }
      }
      
      Section {
        Text("Dynamic content")
        Text("Dynamic content")
        Text("Dynamic content")
      } header: {
        NavigationLink(destination: DynamicContentTargetView()) {
          Text("动态内容头部")
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.vertical, 8)
        }
      }
    }
    .listStyle(.insetGrouped)
  }
}

这种方式完全基于SwiftUI原生API，不会影响全局，头部布局和间距可以精准调整。

2. 局部修改UIKit属性（兼容低版本） #

通过UIViewRepresentable给当前列表单独配置UITableView的间距参数，避免全局污染：

// 定义一个仅作用于当前列表的间距修复视图
struct LocalListSpacingFix: UIViewRepresentable {
  func makeUIView(context: Context) -> UIView {
    let placeholderView = UIView()
    // 延迟获取父视图中的UITableView，避免初始化时找不到
    DispatchQueue.main.async {
      guard let tableView = placeholderView.superview?.superview as? UITableView else { return }
      tableView.sectionHeaderHeight = .leastNonzeroMagnitude // 最小化头部高度
      tableView.sectionFooterHeight = .leastNonzeroMagnitude // 最小化尾部高度
      // iOS15+需要额外设置头部顶部内边距
      if #available(iOS 15.0, *) {
        tableView.sectionHeaderTopPadding = 0
      }
    }
    return placeholderView
  }
  
  func updateUIView(_ uiView: UIView, context: Context) {}
}

// 在ContentView中使用
struct ContentView: View {
  var body: some View {
    List {
      // 原有Section内容不变
      Section("How do I get rid of this space") {
        Text("Static content")
      }
      
      Section("How do I get rid of this space") {
        Text("Static content")
      }
      
      Section("How do I get rid of this space") {
        Text("Dynamic content")
        Text("Dynamic content")
        Text("Dynamic content")
      }
    }
    .listStyle(.insetGrouped)
    .background(LocalListSpacingFix()) // 仅当前列表应用修复
  }
}

通过background将修复视图附加到列表上，只会修改当前列表的UITableView属性，其他列表不受影响。

3. iOS16+快速调整：headerProminence修饰符 #

如果项目支持iOS16及以上，可以用headerProminence快速减少头部空白：

Section("你的头部标题") {
  Text("Static content")
}
.headerProminence(.minimal) // 最小化头部突出效果，减少空白

这种方法操作简单，但空白控制精度不如前两种，适合快速调整场景。

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