SwiftUI推送含ScrollView的视图时导航栏大标题跳变问题求助

当推送至包含ScrollView（示例中为List）且设置了navigationTitle的视图时，导航栏会从LargeTitle模式生硬地切换为Inline模式；若不设置navigationTitle，切换动画则流畅。

复现代码 #

import SwiftUI
import CoreData

enum Detail: Hashable {
    case pushedView
}

struct ContentView: View {
    
    @State private var selection: Detail?
    
    @State private var columnVisibility = NavigationSplitViewVisibility.all
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List(selection: $selection) {
                NavigationLink(value: Detail.pushedView) {
                    Text("Push View")
                }
            }
            .listStyle(.insetGrouped)
            .navigationTitle("Home")
        } detail: {
            switch self.selection {
            case .pushedView:
                PushedView()
            default:
                EmptyView()
            }
        }
        .navigationSplitViewStyle(.balanced)
    }
}

struct PushedView: View {
    
    var body: some View {
        List {
            ForEach((1...30), id: \.self) {n in
                Text("\(n)")
            }
        }
        .navigationTitle("Pushed View")
    }
}

问题演示 #

这个问题源于SwiftUI在推送带滚动视图的页面时，标题模式自动切换逻辑与导航动画产生冲突。以下是几种实用解决方法：

方法一：强制目标页面使用LargeTitle模式 #

直接指定标题显示模式为.large，避免自动切换到Inline：

struct PushedView: View {
    var body: some View {
        List {
            ForEach((1...30), id: \.self) {n in
                Text("\(n)")
            }
        }
        .navigationTitle("Pushed View")
        .navigationBarTitleDisplayMode(.large) // 强制保持LargeTitle
    }
}

如果需要在用户滚动时切换为Inline，可以结合滚动监听手动控制，避免推送过程中的生硬跳转。

方法二：延迟加载目标页面标题 #

等推送动画完成后再显示标题，避免动画冲突：

struct PushedView: View {
    @State private var showTitle = false
    
    var body: some View {
        List {
            ForEach((1...30), id: \.self) {n in
                Text("\(n)")
            }
        }
        .navigationTitle(showTitle ? "Pushed View" : "")
        .onAppear {
            // 延迟时间可根据实际动画调整
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                showTitle = true
            }
        }
    }
}

方法三：通过UIKit桥接禁用自动调整 #

利用UIKit的全局设置，临时禁用滚动视图对导航栏的自动调整，动画完成后恢复：

struct PushedView: View {
    var body: some View {
        List {
            ForEach((1...30), id: \.self) {n in
                Text("\(n)")
            }
        }
        .navigationTitle("Pushed View")
        .onAppear {
            // 禁用TableView自动调整，避免触发标题模式切换
            UITableView.appearance().automaticallyAdjustsScrollIndicatorInsets = false
            // 强制导航栏保持LargeTitle
            UINavigationBar.appearance().largeTitleDisplayMode = .always
        }
        .onDisappear {
            // 恢复全局设置，不影响其他页面
            UITableView.appearance().automaticallyAdjustsScrollIndicatorInsets = true
            UINavigationBar.appearance().largeTitleDisplayMode = .automatic
        }
    }
}

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