Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to eliminate the space above Section in SwiftUI Form?

Tags:

ios

swift

swiftui

I wanna eliminate the space above the first Section in a Form

enter image description here

 var body: some View {
        VStack {
            Text("Text 1")
            Form {
                Section {
                    Text("Text 2")
                }
            }
        }
    }

I tried to set the frame of the Section's header to 0, but it does not work

like image 995
Sorin Lica Avatar asked Sep 09 '19 10:09

Sorin Lica


People also ask

How do I create a section in SwiftUI?

To add a section around some cells, start by placing a Section around it, optionally also adding a header and footer. As an example, we could create a row that holds task data for a reminders app, then create a list view that has two sections: one for important tasks and one for less important tasks.

What is form SwiftUI?

SwiftUI gives us a dedicated view type for this purpose, called Form . Forms are scrolling lists of static controls like text and images, but can also include user interactive controls like text fields, toggle switches, buttons, and more.


2 Answers

The solution is to use a Section with an EmptyView() and place the view you want to be at the top in the header of this Section

 var body: some View {
        VStack {
            Text("Text 1")
            Form {
                Section(header: VStack(alignment: .center, spacing: 0) {
                    Text("Text 2").padding(.all, 16)
                        .frame(width: UIScreen.main.bounds.width, alignment: .leading)
                        .background(Color.white)
                }) {
                    EmptyView()
                }.padding([.top], -6)
            }
        }
    }
like image 100
Sorin Lica Avatar answered Sep 22 '22 19:09

Sorin Lica


I'd supply a dummy header view and set its size to be zero:

Section(header: Color.clear
                .frame(width: 0, height: 0)
                .accessibilityHidden(true)) {
  Text("Text 2")
}
like image 32
Matthew Avatar answered Sep 23 '22 19:09

Matthew