SwiftUI View creates huge gap at the top

Question

Created May ’23

Replies 4

Boosts 0

Views 1.5k

Participants 3

display simple view with two text fields inside a vStack/HStack combination. It leaves huge gap at the top as shown on the attached image. I tried vStack, it has .leading and .trailing which justifies left or right. How can set specific spacing at the top? code:

@Environment(\.managedObjectContext) private var viewContext
@Environment(\.dismiss) var dismiss
@Environment(\.presentationMode) var presentationMode

@Binding  var chosenPlan: ProviderApiCaller.ProviderData


@State var state: String?
@State var zip: String?

func onAdd(plan: ProviderApiCaller.ProviderData ) {
    
}
var body: some View {
    NavigationView {
        VStack {
            HStack {
                Text(chosenPlan.name!)
            }
            HStack {
                Text(chosenPlan.plans.first!.planUrl)
            }
        }
    }
    .navigationTitle("Plan Details")
    .toolbar {
        &#x2F;&#x2F; Back button
        ToolbarItem(placement: .navigationBarLeading) {
            Button(action: {  presentationMode.wrappedValue.dismiss() }, label: {
                HStack(spacing: 2) {
                    Image(systemName: "chevron.backward")
                        .foregroundColor(.black)
                    
                    Button("Back", action: {
                        self.presentationMode.wrappedValue.dismiss()
                    } )
                    .foregroundColor(.black)
                }
            })
        }
        ToolbarItem(placement: .confirmationAction) {
           &#x2F;&#x2F; Button("Save", action: { Task { try? await rI?(nameInput, phoneInput) } })
            Button("Save", action: { onAdd(plan: chosenPlan)
               
            } )
            
                .foregroundColor(.blue)
                
        }
    }
    .navigationViewStyle(StackNavigationViewStyle())
    .navigationBarBackButtonHidden(true)
}
![]("https:&#x2F;&#x2F;developer.apple.com&#x2F;forums&#x2F;content&#x2F;attachment&#x2F;7510538e-c8b1-42d2-a68a-94d5aeaac186" "title=Screenshot 2023-05-26 at 4.11.30 PM.png;width=429;height=881")

Answered by swiftuiforever in 754201022

Add a Spacer() after the 2 HStacks.

Boost

Answer 1

swiftuiforever OP

May ’23

Accepted Answer

Add a Spacer() after the 2 HStacks.

0

Answer 2

Claude31 OP

May ’23

What @ swiftuiforever said, plus you can also:

define a frame and position for the VStack {
or set a position for each HStack

If you define nothing, SwiftUI uses all the available space, so you have to tell him what you want.

PS: we do not see the image… Probably you did not attach as an image.

0

Answer 3

vihrao OP

Jun ’23

Look at the code below, the first time, it displays Contact Section and contained data at some position. Next time when I update the view with location Section and contained data, it pushes the Contact Section and so the whole thing keeps moving up and up as I keep adding more information dynamically to the screen. I want to pin each section as I keep adding. So How can I use frame and position to make it work like a layout with fixed positioning of Section and contained data? var body: some View { NavigationStack { VStack (alignment: .leading) {

                Section(header: Text("**Contact**")){ &#x2F;&#x2F;  section text bold with ** before and after text
                    ContactLabelView(myContact: $contact)
                        &#x2F;&#x2F;.ignoresSafeArea(edges: .top)
                    Text(contact?.firstName ?? "")
                     .frame(height: 22)
                     .background(.gray.opacity(0.2))
                     .frame(height:22)
                }
               
                if $contact.wrappedValue != nil {
                    Section(header: Text("**Location**")){ &#x2F;&#x2F;  section text bold with ** before and after text
                        LocationLabelView(location: $location, contact: $contact)
                        if $location.wrappedValue != nil {
                            let details = self.getLocationString(location: location!)
                            Text(details)
                                .frame(height: 22)
                                .background(.gray.opacity(0.2))
                                .frame(height:22)
                        }
                    }
                }
                                                                            
            }
            Spacer()   
    }
}

0

Answer 4

vihrao OP

Jun ’23

I accepted the answer but I would really like to know how to position with frame and pos

0