ios - SwiftUI:无缘无故在我的 View 上方填充？

Question

我正在尝试使用 SwiftUI 创建一个类似 Instagram 的用户界面，但由于我无法调整 TabView 中选项卡元素的大小，我决定编写一个简单的 CustomTabView 代替。但我最终在它的顶部有一个填充，我不明白为什么。这是代码:

struct ContentView: View {
    @State private var selectedIndex: Int = 0
    
    var body: some View {
        VStack {
            switch selectedIndex {
            case 0:
                Color.blue
            case 1:
                Color.yellow
            case 2:
                Color.red
            case 3:
                Color.orange
            default:
                Color.green
            }
            CustomTabView(selectedIndex: $selectedIndex)
        }
    }
}

struct CustomTabView: View {
    @Binding var selectedIndex: Int
    
    var body: some View {
        VStack {
            Divider()
            HStack {
                Button(action: {
                    selectedIndex = 0
                }, label: {
                    Image("HomeIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 1
                }, label: {
                    Image("PlayIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 2
                }, label: {
                    Image("AddIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 3
                }, label: {
                    Image("HeartIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                })
                Spacer()
                Button(action: {
                    selectedIndex = 4
                }, label: {
                    Image("ProfileIcon")
                        .resizable()
                        .frame(width: 30, height: 30, alignment: .center)
                        .cornerRadius(15)
                })
            }
            .padding(.horizontal, 24)
            .padding(.top, 4)
        }
        .background(Color.white)
    }
}

我得到的结果:

我做错了什么？

谢谢你的帮助

Answer 1

如果问题是蓝色框和分隔线之间的间隙，请尝试将 VStack 的间距设置为 0:

VStack(spacing: 0) {
    ...
}