SwiftUI List/Form Header Alignment on iOS 15?

Question

UberJason OP

Created Jul ’21

Replies 2

Boosts 0

Views 7.1k

Participants 2

Hi there,

With the following code on iOS 15, the header text is aligned with the text within the List or Form:

Form {
    Section {
        Text("Hello, world!")
    } header: {
        Text("Section Header").sectionHeaderStyle()
    }
}
.listStyle(InsetGroupedListStyle())

//...

public extension Text {
    func sectionHeaderStyle() -> some View {
        self
            .font(.system(.title3))
            .fontWeight(.bold)
            .foregroundColor(.primary)
            .textCase(nil)
    }
}

iOS 15.png

However, back on iOS 14, the analogous code aligns the header with the List Section itself:

Form {
    Section(header: Text("Section Header").sectionHeaderStyle()) {
        Text("Hello, world!")
    }
}
.listStyle(InsetGroupedListStyle())

iOS 14.png

Does anyone know how to get the iOS 14 behavior of aligning the section header with the List Section itself, and not aligning with the text within the Section?

Boost

Answer 1

UberJason OP

Jul ’21

Filed as FB9426716

0

Answer 2

BabyJ OP

Jul ’21

Accepted Answer

I believe the section headers in a list should be aligned with the content in the list rows. This has been updated in iOS 15 for SwiftUI to match how UITableView section headers were being aligned previously.

If you still want the other style of header then, as of iOS 15 beta 4, you can apply the headerProminence modifier to a Section.

Section("Section Header") {
  Text("Hello, World!")
}
.headerProminence(.increased)

This will align the header text will the edge of the list.

Note: section headers modified in this way may be changed in future betas to be correctly aligned.

2