SwiftUI List/Form Header Alignment on iOS 15?

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)
    }
}

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())

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?

Answered by BabyJ in 683295022

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.

Filed as FB9426716

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.

SwiftUI List/Form Header Alignment on iOS 15?
 
 
Q