SwiftUI自定义Toolbar与ScrollView间灰色空白块问题求助

你遇到的灰色空白核心原因是：隐藏系统TabBar后，TabView仍默认保留了原系统TabBar的占位高度，再叠加内部页面NavigationStack的底部安全区域适配逻辑，最终导致了这块不明空白。

解决方案1：让TabView忽略底部安全区域 #

修改ContentView中的TabView配置，添加底部安全区域忽略设置，让TabView不再预留系统TabBar的空间：

var body: some View {
    VStack(spacing: 0) {
        TabView(selection: $selectedSelection) {
            MarketView()
                .tag(TabSelection.market)
            InterestView()
                .tag(TabSelection.interest)
            WalletView()
                .tag(TabSelection.wallet)
        }
        .toolbar(.hidden, for: .tabBar)
        .ignoresSafeArea(.container, edges: .bottom) // 关键：移除底部预留空间
        .border(.blue)
        
        TabBarView(selectedSelection: $selectedSelection)
    }
}

解决方案2：调整内部页面的ScrollView适配 #

如果内部页面（比如SearchView）的ScrollView被底部安全区域挤压，需要同步调整：

struct SearchView: View {
    
    @State private var searchInterest: String = ""
    @EnvironmentObject private var interestAggr: InterestAggr
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                ScrollView {
                    VStack {
                        ForEach(interestAggr.interests.indices, id: \.self) { index in
                            InterestSelectionItem(model: $interestAggr.interests[index])
                            Divider()
                        }.padding(.vertical, 5)
                    }.padding(.horizontal)
                }
                .ignoresSafeArea(.container, edges: .bottom) // 让ScrollView延伸至底部边界
            }
            .navigationTitle("search")
            .searchable(text: $searchInterest, placement: .navigationBarDrawer(displayMode: .always), prompt: "enter your interest")
        }
    }
}

额外检查点 #

• 确认自定义TabBarView自身没有设置多余的顶部内边距或间距
• 排查是否在页面中误使用了safeAreaInset添加了不必要的底部占位

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