SwiftUI: padding above my view, for no reason?

user_12107647 0
Viewed 640

I am trying to create an Instagram-like UI with SwiftUI, and since I wasn't able to resize the tab elements in the TabView, I decided to write a simple CustomTabView instead. But I end up with a padding at the top of it and I don't understand why. Here is the code:

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)
    }
}

The result I'm getting:

enter image description here

What am I doing wrong?

Thank you for your help

swiftui ios
3 Answers

Top Space

That is the safe area. You can ignore it with this modifier:

.ignoresSafeArea()

Apply it to the view you want it to extend beyond the safe area, for example:

Color.blue
    .ignoresSafeArea(.container, edges: .top)

Bottom Space

That is the spacing of the VStack. Get rid of it by setting that to 0:

VStack(spacing: 0) {
    ,,,
}
user_56230350

If the problem is the gap between the blue box and the divider, try setting the spacing of the VStack to 0:

VStack(spacing: 0) {
    ...
}
user_775670

try this

Image("background").resizable()
                   .scaledToFill()
                   .clipped()
                   .edgesIgnoringSafeArea([.top])
user_151049380
Related