SwiftUI嵌套ScrollView无法滚动到底的问题排查与解决

问题场景 #

在Xcode中用Swift开发App时，HomePage页面的ScrollView单独预览时可正常滚动到底部（显示全部151只宝可梦），但将HomePage嵌入到ContentView的TabView+NavigationView结构后，仅能滚动到第90只，剩余内容被截断。尝试给HomePage添加.frame(maxHeight: .infinity)无效。

ContentView代码 #

var body: some View {
        ZStack {
            BackgroundColorView()
            TabView {
                NavigationView {
                    HomePage()
                }.tabItem {
                    Image("pokeball") .renderingMode(.template)
                    Text("Pokemon").bold()
                }
            }
        }
    }

HomePage代码 #

var body: some View {
        ZStack {
            BackgroundColorView()
            ScrollView {
                PokemonGridView(searchInput: searchInput, favourite: false)
                    .environmentObject(detailStore)
                    .environmentObject(favourites)
                    .environmentObject(evolutionStore)
                    .environmentObject(pokemonStore)
            }
        }
    }

问题原因 #

1. NavigationView布局冲突：默认NavigationView会适配安全区域与导航栏，但嵌套在TabView中时，布局优先级紊乱，导致内部ScrollView的可用高度计算错误，无法获取完整屏幕空间。
2. 容器尺寸约束缺失：HomePage的ZStack无明确尺寸约束，嵌入NavigationView后，ScrollView的父容器未被拉伸至全屏，滚动区域被限制在部分高度内。
3. 之前的.frame修饰符无效：直接给HomePage添加.frame(maxHeight: .infinity)，但该约束未传递给内部ScrollView，ScrollView仍未获得足够高度。

解决方法 #

1. 修正NavigationView布局样式 #

给NavigationView添加.navigationViewStyle(.stack)（iOS 16及以上可改用.navigationStack），避免默认双列布局带来的高度问题：

NavigationView {
    HomePage()
}
.navigationViewStyle(.stack) // 添加该行
.tabItem {
    Image("pokeball") .renderingMode(.template)
    Text("Pokemon").bold()
}

2. 给HomePage的ScrollView添加全屏约束 #

修改HomePage代码，确保ScrollView填充可用空间：

var body: some View {
    ZStack {
        BackgroundColorView()
        ScrollView {
            PokemonGridView(searchInput: searchInput, favourite: false)
                .environmentObject(detailStore)
                .environmentObject(favourites)
                .environmentObject(evolutionStore)
                .environmentObject(pokemonStore)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 让ScrollView占满父容器
    }
    .ignoresSafeArea(.container, edges: .bottom) // 可选：若底部被TabBar遮挡，忽略底部安全区域
}

3. 确保TabView占满全屏 #

给ContentView中的TabView添加尺寸约束，保证其填充整个屏幕：

var body: some View {
    ZStack {
        BackgroundColorView()
        TabView {
            // ... 现有NavigationView代码 ...
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) // 添加该行
    }
}

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