SwiftUI自定义CustomTabBar顶部空白移除方法咨询

这个空白是因为HomeView里的ScrollView默认会保留底部安全区域的内边距，再加上CustomTabBar中VStack里的Spacer，两者叠加就产生了这个无法消除的空白。下面是两种直接有效的解决方法：

方案一：让ScrollView忽略底部安全区域 #

修改HomeView的代码，给垂直滚动的ScrollView添加忽略底部安全区域的修饰符，让它直接紧贴下方的青蓝色线条：

struct HomeView: View {
    var body: some View {
        ScrollView(.vertical) {
            SectionView()
            SectionView()
            SectionView()
            SectionView()
            SectionView()
        }
        .ignoresSafeArea(.container, edges: .bottom)
    }
}

方案二：移除多余的Spacer #

在CustomTabBar的VStack布局中，HomeView下方的Spacer是多余的，移除后就能让青蓝色线条直接贴紧内容区域：

struct CustomTabBar: View {
    @StateObject var viewRouter: ViewRouter
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Spacer()
                switch viewRouter.currentPage {
                case .home:
                    HomeView()
                        .background(Color.green)
                case .liked:
                    Text("Msg")
                case .records:
                    Text("Cal")
                case .user:
                    Text("People")
                }
                // 移除此处的Spacer
                Rectangle()
                    .fill(Color.teal)
                    .frame(height: 2)
                ZStack {
                    HStack {
                        TabBarIcon(viewRouter: viewRouter, assignedPage: .home, width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "house.fill", tabName: "Home")
                        TabBarIcon(viewRouter: viewRouter, assignedPage: .liked, width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "ellipsis.message.fill", tabName: "Msg")
                        Image(systemName: "plus.circle.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .symbolRenderingMode(.palette)
                            .foregroundStyle(Color.yellow, Color.teal)
                            .offset(y: -geometry.size.height / 13.5)
                            .onTapGesture {
                                print("Plus Button Tapped")
                            }
                        TabBarIcon(viewRouter: viewRouter, assignedPage: .records, width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "calendar", tabName: "Cal")
                        TabBarIcon(viewRouter: viewRouter, assignedPage: .user, width: geometry.size.width/5, height: geometry.size.height/28, systemIconName: "person", tabName: "People")
                    }
                    .frame(width: geometry.size.width, height: geometry.size.height/8)
                }
            }
            .edgesIgnoringSafeArea(.bottom)
        }
    }
}

可选优化 #

如果不需要SectionView之间的默认间距，可以把HomeView里的直接堆叠改成LazyVStack并设置间距为0：

struct HomeView: View {
    var body: some View {
        ScrollView(.vertical) {
            LazyVStack(spacing: 0) {
                SectionView()
                SectionView()
                SectionView()
                SectionView()
                SectionView()
            }
        }
        .ignoresSafeArea(.container, edges: .bottom)
    }
}

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