macosswiftuiswiftui-form

How to remove the box surrounding certain views in a .grouped style Form?

I am writing a .grouped-styled Form on macOS. For each section in the form, this form style puts a box/border surrounding it, almost like a .insetGrouped-styled List on iOS.

enter image description here

While this is desirable for most views in my form, I don't want this border around some views in the form. Buttons and images look very ugly being surrounded by the box. For example, suppose I am creating a form for "Account Settings",

Form {
    Section {
        VStack {
            Image(systemName: "person.crop.circle")
                .resizable()
                .frame(width: 100, height: 100)
            Text("John Smith")
                .font(.title)
        }
        .frame(maxWidth: .infinity)
    }
    Section {
        Text("Setting 1")
        Text("Setting 2")
    }
}
.formStyle(.grouped)

This produces:

enter image description here

How can I remove the box surrounding the image and title?

Solution

  • Section headers and footers are not surrounded by boxes. Even though the content doesn't semantically "belong" in the same section, you can still put them in the section header/footer as a way to remove the boxes.

    Form {
    Section {
        Text("Setting 1")
        Text("Setting 2")
    } header: {
        VStack {
            Image(systemName: "person.crop.circle")
                .resizable()
                .frame(width: 100, height: 100)
                .font(.body) // the default font will make the SF Symbol bold!
            Text("John Smith")
                .font(.title)
        }
        .frame(maxWidth: .infinity)
    }
}
.formStyle(.grouped)

    Notably, there are some default styling for these regions. For example, the default font for the section header is a bold font. You might need to override these default styles using additional modifiers, like I have done with .font(.body).