SwiftUI中如何为TabView设置可滚动缩放的导航标题

问题根源 #

你当前把导航标题设置在TabView上，属于全局共享标题，而且BrowseWordsView里嵌套了ScrollView和List，滚动视图不在导航栈的直接上下文里，导致单独给BrowseWordsView加navigationTitle不生效，也触发不了滚动时的标题折叠效果。

修复步骤 #

1. 移除TabView上的全局导航设置
   删掉TabView下的.navigationTitle(selectedTab.rawValue)和.navigationBarTitleDisplayMode(.large)，让每个子视图单独管理导航标题。

2. 调整BrowseWordsView的结构
   去掉外层多余的ScrollView（List本身自带滚动功能，嵌套会干扰导航折叠逻辑），直接把List作为视图根节点，再给它添加导航标题和显示模式。

3. 给BrowseWordsView添加专属导航标题
   只在BrowseWordsView中设置导航标题，其他标签页按需自行配置。

修改后代码示例 #

主视图结构

enum Tabs: String{
    case study
    case browse
    case search
}

NavigationStack {
    TabView(selection: $selectedTab) {
        // 学习标签页
        ContentView()
            .tabItem { Label("Study", systemImage: "pencil.line") }
            .tag(Tabs.study)
        
        // 浏览标签页
        BrowseWordsView(viewModel: SearchedWordsObject(service: ExploreService()))
            .tag(Tabs.browse)
            .tabItem { Label("Browse", systemImage: "book.pages") }

        // 搜索标签页
        SearchView()
            .tag(Tabs.search)
            .tabItem { Label("Search", systemImage: "magnifyingglass") }
    }
    .navigationBarBackButtonHidden()
}

BrowseWordsView代码

struct BrowseWordsView: View {
    let viewModel: SearchedWordsObject
    // 根据实际情况获取uniqueWords数据
    var uniqueWords: [Word] { viewModel.uniqueWords }

    var body: some View {
        List(uniqueWords.sorted()) { unique in
            HStack {
                // 这里放你的列表内容，示例用单词文本
                Text(unique.word)
            }
        }
        .navigationTitle("Browse")
        .navigationBarTitleDisplayMode(.large)
    }
}

效果说明 #

• 切换到Browse标签时，导航栏会显示大标题“Browse”
• 滚动List时，大标题会自动收缩变小并移动到屏幕顶部中央，完全符合你想要的效果
• 其他标签页不受影响，可根据需求自行添加导航标题设置

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