使用.inline模式时，如何消除SwiftUI导航栏标题与Form首项间距

我需要实现类似苹果提醒App的Sheet表单布局：将包含数据输入项的表单以Sheet展示，导航标题使用.inline显示模式，但当前导航栏标题与Form首个项目之间存在较大间距，无法达到苹果提醒App的紧凑效果。

苹果提醒App效果：

我的应用效果：

测试代码 #

@main
struct Test1App: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State private var isSheetShown = false
    
    var body: some View {
        Button("Show Sheet") {
            isSheetShown = true
        }
        .sheet(isPresented: $isSheetShown) {
            SheetView()
        }
    }
}

struct SheetView: View {
    @State private var title = ""
    
    var body: some View {
        NavigationStack {
            Form {
                TextField("Title", text: $title)
            }
            .navigationTitle("New Reminder")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel", role: .cancel) {}
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Save") {}
                }
            }
        }
    }
}

开发环境 #

• Xcode 15.4（15F31d）
• iOS 17.5

已尝试的解决方案 #

• 添加无标题Section

  Form {
      Section(header: Text("")) {
          TextField("Title", text: $title)
      }
  }
  

  结果：无效，反而小幅增加了间距

• 设置.listSectionSpacing

  Form {
      Section(header: Text("")) {
          TextField("Title", text: $title)
      }
  }
  .listSectionSpacing(80)
  

  结果：无效，该属性仅影响Section之间的间距

可行解决方法 #

方法1：调整Section头部内边距（推荐） #

利用iOS 17+新增的listSectionHeaderPadding(_:)属性，配合EmptyView消除Section默认的头部间距：

struct SheetView: View {
    @State private var title = ""
    
    var body: some View {
        NavigationStack {
            Form {
                Section(header: EmptyView()) {
                    TextField("Title", text: $title)
                }
                .listSectionHeaderPadding(.zero)
            }
            .navigationTitle("New Reminder")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel", role: .cancel) {}
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Save") {}
                }
            }
        }
    }
}

方法2：替换Form为List（更贴近原生样式） #

苹果提醒App的表单实际基于List实现，直接使用List并设置.insetGrouped样式，可自然获得紧凑的布局：

struct SheetView: View {
    @State private var title = ""
    
    var body: some View {
        NavigationStack {
            List {
                TextField("Title", text: $title)
            }
            .listStyle(.insetGrouped)
            .navigationTitle("New Reminder")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel", role: .cancel) {}
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Save") {}
                }
            }
        }
    }
}

方法3：全局调整表单顶部间距（不推荐） #

通过修改UITableView的全局外观来调整间距，此方法会影响所有使用TableView的组件（Form、List），需谨慎使用：

@main
struct Test1App: App {
    init() {
        UITableView.appearance().contentInset.top = -30
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

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