SwiftUI TabItem不显示求助：底部Tab栏有空间但无Tab项内容

为什么看不到TabItem内容？ #

核心问题是**tabItem修饰符的层级放错了**：TabView只会识别直接挂载在其直接子视图上的tabItem和tag修饰符。你把这两个修饰符加在了VStack内部的ShopView上，TabView无法感知到这些配置，所以只会显示Tab栏的占位区域，却看不到TabItem的文本内容。

另外你提到不加VStack就显示不了ShopView，大概率是因为ShopView自身布局没有占满可用空间，正确的解决方式不是套多余的VStack，而是给ShopView添加自适应空间的约束（比如.frame(maxWidth: .infinity, maxHeight: .infinity)）。

修复后的代码示例 #

方案1：移除多余VStack，将修饰符直接加在ShopView上

struct HomepageView: View {
    var body: some View {
        VStack(spacing: 0) {
            TopBar()
            MainView()
        }
        .ignoresSafeArea(.all, edges: .bottom)
    }
}

struct MainView: View {
    @State private var selectedTab: Tabs = .shop
    @StateObject private var categoriesListViewModel = CategoriesListViewModel(categories: SampleCategories().categoriesList)

    var body: some View {
        TabView(selection: $selectedTab) {
            ShopView(model: categoriesListViewModel)
                .tabItem {
                    Text("Shop")
                }
                .tag(Tabs.shop)
                // 若ShopView布局未占满空间，添加此约束
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

方案2：保留VStack（如果确实需要），将修饰符移到VStack上

如果你的业务逻辑必须在TabView子视图里嵌套VStack，只需把tabItem和tag移到VStack层级即可：

struct MainView: View {
    @State private var selectedTab: Tabs = .shop
    @StateObject private var categoriesListViewModel = CategoriesListViewModel(categories: SampleCategories().categoriesList)

    var body: some View {
        TabView(selection: $selectedTab) {
            VStack {
                ShopView(model: categoriesListViewModel)
            }
            .tabItem {
                Text("Shop")
            }
            .tag(Tabs.shop)
        }
    }
}

内容的提问来源于stack exchange，提问作者jane-bun