SwiftUI中TabBar页面导航栏标题不显示及视图折叠问题求助

使用包含三个标签页的TabBar展示API接口返回的数据，已配置顶部导航栏及标题相关属性，但导航栏标题无法正常显示，滚动页面时视图还会出现折叠情况。

ContentView 代码 #

import SwiftUI

struct ContentView: View {

    @State private var selection = 0
    @EnvironmentObject private var viewModel: FruitsViewModel

    var body: some View {

        TabView(selection: $selection) {

            NavigationView { TabListView(fruit: viewModel.fruits)}.tabItem {
                Image(systemName: "house.fill")
                Text("List View")
            } .navigationBarTitle("Fruit List ", displayMode: .inline)
                .accentColor(.red)
                .onAppear() {
                    UITabBar.appearance().barTintColor = .white
                }

                .tag(0)


            NavigationView {GridListView(fruit: viewModel.fruits)}.tabItem {
                Image(systemName: "bookmark.circle.fill")
                Text("Collection View")
            }.navigationBarTitle("Fruit List ", displayMode: .inline)
                .accentColor(.red)
                .onAppear() {
                    UITabBar.appearance().barTintColor = .white
                }

                .tag(1)

            NavigationView {WebListView()}.tabItem {
                Image(systemName: "person.crop.circle")
                Text("Web View")
            }.navigationBarTitle("Fruit List ", displayMode: .inline)
                .accentColor(.red)
                .onAppear() {
                    UITabBar.appearance().barTintColor = .white
                }
        }.tag(2)

    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

TabListView 代码 #

import SwiftUI

struct TabListView: View {

    let fruit: [Fruits]
    @EnvironmentObject private var viewModel: FruitsViewModel

    var body: some View {
        VStack {
            List {
                
                ForEach(viewModel.fruits) { fruits in
                    
                    NavigationLink(destination: FruitDetailsView(fruit: fruits)) {
                        FruitsRowList(fruit: fruits)
                    }
                }
            }
        }
        .navigationTitle("Fruit List")
        .onAppear {
            Task {
                await viewModel.getFruits()
            }
        }
    }
}

核心问题点 #

1. 导航栏修饰符位置错误：在ContentView中，将.navigationBarTitle等修饰符加在了NavigationView外部，这些修饰符无法作用到内部的导航栈，导致标题不显示。
2. 布局冗余导致折叠：TabListView中多余的VStack包裹List，会干扰NavigationView和List的布局交互，引发滚动时的视图折叠问题。
3. Tag位置错误：第三个Tab的.tag(2)被错误地放在了TabView外部，导致标签页选中逻辑异常。
4. 重复设置样式：每个Tab项都重复设置UITabBar.appearance()，造成冗余。

修改后的代码 #

ContentView 修正版

import SwiftUI

struct ContentView: View {
    @State private var selection = 0
    @EnvironmentObject private var viewModel: FruitsViewModel

    var body: some View {
        TabView(selection: $selection) {
            // 列表视图标签页
            NavigationView {
                TabListView(fruit: viewModel.fruits)
            }
            .tabItem {
                Image(systemName: "house.fill")
                Text("列表视图")
            }
            .tag(0)

            // 网格视图标签页
            NavigationView {
                GridListView(fruit: viewModel.fruits)
                    .navigationTitle("水果列表")
                    .navigationBarTitleDisplayMode(.inline)
                    .accentColor(.red)
            }
            .tabItem {
                Image(systemName: "bookmark.circle.fill")
                Text("网格视图")
            }
            .tag(1)

            // 网页视图标签页
            NavigationView {
                WebListView()
                    .navigationTitle("网页视图")
                    .navigationBarTitleDisplayMode(.inline)
                    .accentColor(.red)
            }
            .tabItem {
                Image(systemName: "person.crop.circle")
                Text("我的")
            }
            .tag(2)
        }
        .onAppear {
            // 统一设置TabBar样式，避免重复设置
            UITabBar.appearance().barTintColor = .white
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(FruitsViewModel()) // 预览时注入ViewModel
    }
}

TabListView 修正版

import SwiftUI

struct TabListView: View {
    let fruit: [Fruits]
    @EnvironmentObject private var viewModel: FruitsViewModel

    var body: some View {
        List {
            ForEach(viewModel.fruits) { fruit in
                NavigationLink(destination: FruitDetailsView(fruit: fruit)) {
                    FruitsRowList(fruit: fruit)
                }
            }
        }
        .navigationTitle("水果列表")
        .navigationBarTitleDisplayMode(.inline)
        .accentColor(.red)
        .onAppear {
            Task {
                await viewModel.getFruits()
            }
        }
    }
}

修改说明 #

• 将导航栏修饰符（.navigationTitle、.navigationBarTitleDisplayMode）移到NavigationView内部的子视图上，确保标题能正确作用到导航栈。
• 移除TabListView中多余的VStack，直接用List作为NavigationView的子视图，解决滚动折叠问题。
• 把TabBar的样式设置统一放在TabView的onAppear中，避免重复代码。
• 修正第三个Tab的.tag(2)位置，确保标签页选中逻辑正常。
• 预览代码中添加environmentObject，保证预览能正常加载ViewModel数据。

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