How to remove extra margin above a Form

Question

I want part of my view to be wrapped inside a Form, but not the whole thing. I don't want the Form to take up that much space, so I've shrunken it using .frame(). Although there is still a lot of margin on top of the Form. Here's my code.

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    Form {
                        Text("Some text in a form")
                    }
                        .frame(width: 400, height: 90) // shrinks Form size, but doesn't remove margin
         
                    Text("Some more text")
               }
            }
        }
    }
}

The .frame() height doesn't seem to remove that extra space at the top of the Form (light grey area).

I've also tried adding .listRowInsets(EdgeInsets()) to the first Text view, but that doesn't remove the top margin. Any ideas?

Balenciaga

I'am afraid this is not possible. You could consider developing your completely own solution, instead of using the built-in Form. A pro of that is that it gives you all flexibility, but a con is that it may take some time and maybe you can't get the same look as the rest of iOS. – Aerobe

Answer 1

Form doesn't have a direct property to hide the header. For this, you need to use Section like below -

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                     Form {
                        Section(header: VStack(alignment: .center, spacing: 0) {
                           Text("Some text in a form").foregroundColor(Color.black).padding(.all, 6)
                        }) {
                            EmptyView()
                        }
                     }
                     .frame(width: 400.0, height: 40.0)
         
                    Text("Some more text")
               }
            }
        }
    }
}

Auriol