CODEWITHSUNDEEP
swiftuiswiftui-list
Sam
Sam

Reputation: 2565

SwiftUI, remove space between views in a VStack?

Why is there so much space between the three blue rectangles and the list? How can I remove the space so that all views within the VStack stack at the top? I tried using a Spacer() directly after the List, but nothing changed.

spacing

struct ContentView: View {
    
    init() { UITableView.appearance().backgroundColor = UIColor.clear }
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.red
                    .ignoresSafeArea()
                VStack {
                    HStack {
                        Text("Faux Title")
                            .font(.system(.largeTitle, design: .rounded))
                            .fontWeight(.heavy)
                        Spacer()
                        Button(action: {
                            // settings
                        }, label: {
                            Image(systemName: "gearshape.fill")
                                .font(.system(.title2))
                        })
                    }
                    .padding()
                    
                    GeometryReader { geometry in
                        HStack() {
                            Text("1")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                            Spacer()
                            Text("2")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                            Spacer()
                            Text("3")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                        }
                    }
                    .padding()
                    
                    List {
                        Text("One")
                        Text("Two")
                        Text("Three")
                        Text("Four")
                        Text("Five")
                        Text("Six")
                    }
                    .listStyle(InsetGroupedListStyle())
                }
            }
            .navigationBarHidden(true)
        }
    }
}

Bonus question: In web development, you can open your browser's Web Inspector and use the element selector to click on elements which highlights their borders. Useful for something like this where you're trying to figure out which element the offending spacing belongs to. Is there something like that in Xcode?

Upvotes: 1

Views: 4564

Answers (2)

jnpdx
jnpdx

Reputation: 52615

Since you know that your HStack with the blue rectangles is going to be a height of 150, you should constrain it to that using .frame(height: 150):

GeometryReader { geometry in
    ...
}
.padding()
.frame(height: 150) //Here

Otherwise, the GeometryReader will occupy all available vertical space.

Re: your web dev comparison, check out the Xcode view hierarchy inspector. It's not exactly the same, but it's in the same vein: https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html

Upvotes: 1

Matthaus Woolard
Matthaus Woolard

Reputation: 2408

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

to your question you can in Xcode use the view inspector. https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html

Upvotes: 5

Related Questions