SwiftUI自定义TabBar周围黑白边距去除方法求助

我是Swift编程新手，跟着教程做了自定义TabBar，但在项目里实现后，TabBar周围出现了随明暗模式变化的黑白区域。我想让TabBar悬浮在滚动内容上方，尝试设置CustomTabBar里的VStack背景为透明但没用。以下是我的代码和问题截图：

自定义TabBar代码 #

import SwiftUI

enum Tab: String, CaseIterable {
    case house
    case person
}

struct CustomTabBar: View {
    @Binding var selectedTab: Tab
    private var fillImage: String {
        selectedTab.rawValue + ".fill"
    }
    
    private var tabColor: Color {
        switch selectedTab {
        case .house:
            return .blue
        case .person:
            return .indigo
        }
    }
    
    var body: some View {
        VStack {
            HStack {
                ForEach(Tab.allCases, id: \.rawValue) { tab in
                    Spacer()
                    Image(systemName: selectedTab == tab ? fillImage : tab.rawValue)
                        .scaleEffect(selectedTab == tab ? 1.25 : 1.0)
                        .foregroundStyle(selectedTab == tab ? tabColor : .gray)
                        .font(.system(size: 22))
                        .onTapGesture {
                            withAnimation(.easeIn(duration:0.1)) {
                                selectedTab = tab
                            }
                        }
                    Spacer()
                }
            }
            .frame(width: nil, height: 60)
            .background(.thinMaterial)
            .cornerRadius(10)
            .padding()
        }
        .background(Color.clear)
    }
}

#Preview {
    CustomTabBar(selectedTab: .constant(.house))
}

MainView代码 #

struct MainView: View {
    @StateObject var viewModel = MainViewViewModel()
    @State private var selectedTab: Tab = .house
    
    init() {
        UITabBar.appearance().isHidden = true
    }
    
    var body: some View {
        if viewModel.isSignedIn, !viewModel.currentUserId.isEmpty {
            NavigationView {
                VStack {
                    switch selectedTab {
                    case .house:
                        ToDoListView(userId: viewModel.currentUserId)
                    case .person:
                        ProfileView()
                    }
                    
                    Spacer()
                    
                    CustomTabBar(selectedTab: $selectedTab)
                }
            }
        } else {
            LoginView()
        }
    }
}

问题截图 #

解决方法 #

1. 移除冗余布局容器，消除异常背景 #

外层VStack是导致额外背景区域的原因，直接将HStack作为CustomTabBar的根视图，同时调整padding避免上下多余空间：

struct CustomTabBar: View {
    @Binding var selectedTab: Tab
    private var fillImage: String {
        selectedTab.rawValue + ".fill"
    }
    
    private var tabColor: Color {
        switch selectedTab {
        case .house:
            return .blue
        case .person:
            return .indigo
        }
    }
    
    var body: some View {
        HStack {
            ForEach(Tab.allCases, id: \.rawValue) { tab in
                Spacer()
                Image(systemName: selectedTab == tab ? fillImage : tab.rawValue)
                    .scaleEffect(selectedTab == tab ? 1.25 : 1.0)
                    .foregroundStyle(selectedTab == tab ? tabColor : .gray)
                    .font(.system(size: 22))
                    .onTapGesture {
                        withAnimation(.easeIn(duration:0.1)) {
                            selectedTab = tab
                        }
                    }
                Spacer()
            }
        }
        .frame(height: 60)
        .background(.thinMaterial)
        .cornerRadius(10)
        .padding(.horizontal) // 仅保留水平内边距
    }
}

2. 实现TabBar悬浮效果 #

将MainView中的VStack替换为ZStack，让TabBar固定在底部，滚动内容可从其下方穿过：

struct MainView: View {
    @StateObject var viewModel = MainViewViewModel()
    @State private var selectedTab: Tab = .house
    
    var body: some View {
        if viewModel.isSignedIn, !viewModel.currentUserId.isEmpty {
            NavigationView {
                ZStack(alignment: .bottom) {
                    switch selectedTab {
                    case .house:
                        ToDoListView(userId: viewModel.currentUserId)
                            .padding(.bottom, 80) // 避免内容被TabBar遮挡
                    case .person:
                        ProfileView()
                            .padding(.bottom, 80)
                    }
                    
                    CustomTabBar(selectedTab: $selectedTab)
                        .padding(.bottom) // 避免贴紧屏幕底部
                }
            }
        } else {
            LoginView()
        }
    }
}

额外优化 #

• 删除UITabBar.appearance().isHidden = true，因为你没有使用原生TabView，这条代码完全多余。

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