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

@TheFuentes5551

Apr '23

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?

@magnas35 HWS+

Apr '23

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.

@TheFuentes5551

Apr '23

@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

@magnas35 HWS+

Apr '23

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?

@TheFuentes5551

Apr '23

Thanky you both.

Reply to this topic…