iPadOS 26与Xcode 26中SwiftUI侧边栏顶边对齐问题解决

升级至Xcode 26和iPadOS 26后，原本始终顶边对齐的SplitView导航侧边栏出现内边距偏移，但相同代码在iPadOS 18（使用Xcode 26编译）中运行正常。可复现该问题的代码如下：

import SwiftUI

struct Topic: Identifiable, Hashable {
  let id = UUID()
  let name: String
}
// Demo data
let demoTopics: [Topic] = [
  Topic(name: "Weather"),
  Topic(name: "Sports"),
  Topic(name: "Technology"),
  Topic(name: "Technology"),
  Topic(name: "Food"),
]

// MARK: - Root view with Split View

struct ContentView: View {
  @State private var columnVisibility: NavigationSplitViewVisibility = .all
  
  // Sidebar selection drives middle column
  @State private var selectedTopic: Topic? = demoTopics.first
  
  // Simple search across sidebar items
  @State private var sidebarQuery = ""
  
  var body: some View {
    NavigationSplitView(columnVisibility: $columnVisibility) {
      // SIDEBAR
      SidebarView(
        topics: demoTopics,
        selectedTopic: $selectedTopic,
        query: $sidebarQuery
      )
      .background(.yellow.opacity(0.25))
    } content: {
      Text("Hello, world!")
    } detail: {
      // DETAIL (right)
      Text("How are you?")
    }
    .navigationSplitViewStyle(.balanced) // nice default widths
    .navigationTitle("Split View Sample")
  }
}

// MARK: - Sidebar

struct SidebarView: View {
  let topics: [Topic]
  @Binding var selectedTopic: Topic?
  @Binding var query: String
  
  private var filteredTopics: [Topic] {
      guard !query.isEmpty else { return topics }
      return topics.filter { $0.name.localizedCaseInsensitiveContains(query) }
  }

  var body: some View {
    List(filteredTopics, selection: $selectedTopic) { topic in
        // Selecting a row sets `selectedTopic`, which updates middle column
        Text(topic.name)
            .tag(topic)
    }
    .listStyle(.sidebar)
    .navigationTitle("Topics")
    .searchable(text: $query, placement: .sidebar)
  }
}

// MARK: - App entry point

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

修复方法 #

iPadOS 26中，NavigationSplitView的侧边栏默认新增了顶部内边距，可通过以下两种方式恢复顶边对齐：

方法1：移除系统默认顶部内边距

在SidebarView的最外层添加隐藏导航栏和忽略顶部安全区域的修饰符，彻底消除内边距：

struct SidebarView: View {
  // 原有代码保持不变
  
  var body: some View {
    List(filteredTopics, selection: $selectedTopic) { topic in
        Text(topic.name)
            .tag(topic)
    }
    .listStyle(.sidebar)
    .navigationTitle("Topics")
    .searchable(text: $query, placement: .sidebar)
    // 添加以下两行代码
    .toolbar(.hidden, for: .navigationBar)
    .edgesIgnoringSafeArea(.top)
  }
}

方法2：强制布局顶对齐

如果需要保留导航栏，可给侧边栏视图添加frame修饰符，强制内容顶对齐：

// 在ContentView的侧边栏部分修改
NavigationSplitView(columnVisibility: $columnVisibility) {
  // SIDEBAR
  SidebarView(
    topics: demoTopics,
    selectedTopic: $selectedTopic,
    query: $sidebarQuery
  )
  .background(.yellow.opacity(0.25))
  .frame(maxHeight: .infinity, alignment: .top) // 添加此行
} content: {
  // 原有内容不变
}

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