SwiftUI NavigationSplitView iPad侧边栏大标题初始显示异常问题

在iPad设备上使用SwiftUI的NavigationSplitView时，侧边栏出现标题显示异常：已设置.navigationBarTitleDisplayMode(.large)，但应用首次启动时标题以inline样式显示，只有下拉列表（向上滚动）后才切换为大标题。视觉上列表完全可见，却仿佛初始处于上滚状态。

示例代码 #

NavigationSplitView {
    VStack {
        List(folders, id: \.self, selection: $selectedFolder) { folder in
            NavigationLink(folder.title, value: folder)
        }
        .navigationTitle("Test Title")
        .navigationBarTitleDisplayMode(.large)
        
        Spacer()
        
        Button {
            // 创建新列表
            newListModalShown = true
        } label: {
            Text("New List")
        }
    }
} detail: {
    if let selectedFolder {
        ItemsListView(folder: selectedFolder)
    } else {
        Text("Select a list")
            .navigationTitle("")
            .navigationBarTitleDisplayMode(.inline)
    }
}

已尝试的排查步骤（未解决） #

• 将List内容替换为Text，标题仍无法正常显示大标题；
• 使用ScrollView可正常显示大标题，但希望保留List组件；
• 调整.navigationBarTitleDisplayMode修饰器的位置，无变化。

解决方案 #

这是SwiftUI的已知布局Bug，以下两种方案均有效，方案1更贴合需求：

方案1：调整导航栏配置的作用范围 #

将.navigationTitle和.navigationBarTitleDisplayMode从List移至外层VStack，确保配置作用于整个侧边栏容器：

NavigationSplitView {
    VStack {
        List(folders, id: \.self, selection: $selectedFolder) { folder in
            NavigationLink(folder.title, value: folder)
        }
        
        Spacer()
        
        Button {
            newListModalShown = true
        } label: {
            Text("New List")
        }
    }
    .navigationTitle("Test Title")
    .navigationBarTitleDisplayMode(.large)
} detail: {
    if let selectedFolder {
        ItemsListView(folder: selectedFolder)
    } else {
        Text("Select a list")
            .navigationTitle("")
            .navigationBarTitleDisplayMode(.inline)
    }
}

方案2：强制List初始滚动到顶部 #

通过scrollPosition绑定，强制List初始滚动到第一个元素，触发大标题显示：

@State private var scrollPosition: String? = nil // 根据folder的id类型调整

NavigationSplitView {
    VStack {
        List(folders, id: \.self, selection: $selectedFolder, scrollPosition: $scrollPosition) { folder in
            NavigationLink(folder.title, value: folder)
        }
        .navigationTitle("Test Title")
        .navigationBarTitleDisplayMode(.large)
        .onAppear {
            scrollPosition = folders.first?.id
        }
        
        Spacer()
        
        Button {
            newListModalShown = true
        } label: {
            Text("New List")
        }
    }
} detail: {
    if let selectedFolder {
        ItemsListView(folder: selectedFolder)
    } else {
        Text("Select a list")
            .navigationTitle("")
            .navigationBarTitleDisplayMode(.inline)
    }
}

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