BLACK FRIDAY SALE: Save 50% on all my Swift books and bundles! >>

SOLVED: How to create space between sections inside a form?

Forums > 100 Days of SwiftUI

Hello everyone.

            Form {
                Section {
                    NavigationLink {
                        AddMealData()
                    } label: {
                        Text("Enter meal data")
                    }

                    NavigationLink {
                        AddExerciseData()
                    } label: {
                        Text("Enter training data")
                    }
                } header: {
                    Text("Please enter the calory data")
                }
                Section {
                    NavigationLink {
                        ShowDataView()
                    } label: {
                        Text("Data history")
                    }
                } header: {
                    Text("See history of your data")
                }
                AsyncImage(url: URL(string: "https://www.macworld.com/wp-content/uploads/2023/01/how-to-use-apple-health-main2.png?w=1024")) { image in
                    image
                        .resizable()
                        .scaledToFit()
                        .clipShape(RoundedRectangle(cornerRadius: 30))
                        .overlay(
                            RoundedRectangle(cornerRadius: 30)
                                .stroke(.white.opacity(0.5))
                        )
                } placeholder: {
                    ProgressView()
                }
                .frame(width: 450, height: 210)
            }

So how to do it?

   

One way would be to add padding. What kind of result do you want?

Section {
      NavigationLink {
             Text("Add")
      } label: {
             Text("Data history")
      }
} header: {
      Text("See history of your data")
           .padding(.top, 50)
}

EDIT: Moved the padding inside the header closure.

   

@magnas35 thank you for the reply! I just want to create more space between each section. Padding only makes the section itself strech but i want it to stay the same but there is more space between the sections.

                LazyVStack(alignment: .leading, spacing: 30) {
                    Text("Total calories taken in: ")
                    Text("Exercises done: ")
                    Text("Total time trained: ")
                }

Something like this for example I want. But I cant put spacing on a Form

   

Sorry, I placed the padding in the wrong place. By attaching it to the header text there is now space between the "Enter" section and the "History" section. Or do you mean extra spacing inside each section?

   

Thanky you both.

   

Hacking with Swift is sponsored by Guardsquare

SPONSORED AppSweep by Guardsquare helps developers automate the mobile app security testing process with fast, free scans. By using AppSweep’s actionable recommendations, developers can improve the security posture of their apps in accordance with security standards like OWASP.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.