CODEWITHSUNDEEP
swiftswiftui
rapidcat2711
rapidcat2711

Reputation: 17

How can I remove the spacing between the main content view and the tab bar in SwiftUI?

I am currently having trouble working out how to eliminate the spacing between the content view (VStack) and the Tab Bar View. There is a border created by either the VStack or the Tab Bar which I would like removed or the spacing brought to 0 to create a more fluid appearance

Currently, it looks like this: https://i.sstatic.net/xbGiS.png

My code: 

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 10) {
                    Button(action: {
                        print("Tapped!")
                    }) {
                        HStack(spacing: 10) {
                            Image(systemName: "clock.fill")
                                .foregroundColor(.white)
                            Text("Bus Times")
                        }
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    }

                    Button(action: {
                        print("Tapped!")
                    }) {
                        HStack {
                            Image(systemName: "waveform.path.ecg")
                            Text("Services")
                        }
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    }

                    Button(action: {
                        print("Tapped!")
                    }) {
                        HStack {
                            Image(systemName: "location.north.fill")
                            Text("Find me")
                        }
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    }

                    Button(action: {
                        print("Tapped!")
                    }) {
                        HStack {
                            Image(systemName: "magnifyingglass")
                            Text("Search")
                        }
                        .padding(7.5)
                        .foregroundColor(.white)
                        .background(Color.init(red: 235/255, green: 100/255, blue: 30/255))
                        .cornerRadius(40)
                    }

                }
            }
            Text("Latest news & events").font(.headline).bold()
            PostRow(categoryName: "news", posts: postData)
        }
        .padding()
        .navigationBarTitle("Royal Holloway")
        .font(.subheadline)
    }

Upvotes: 1

Views: 1300

Answers (1)

Asperi
Asperi

Reputation: 257663

The border is introduced by the padding

    }
    .padding() // << this one
    .navigationBarTitle("Royal Holloway")
    .font(.subheadline)
}

In every place where you use .padding(value) the value is applied for all edges.

If you need to remove it at bottom you can specify, for example

.padding([.horizontal, .top])

or other explicit parameters, that can be set for every edge, or remove it at all.

Upvotes: 1

Related Questions