Left- or Center-Justifying Multiline Section Header for List in SwiftUI

Question

Here is my code:

struct ContentView: View {

    var body: some View {
        Form {
            Section(header:
                VStack {
                    Text("Header line 1")
                    Text("This is header line 2")
            }) {
                List {
                    Text("Item 1")
                    Text("Item 2")
                    Text("Item 3")
                    Text("Item 4")
                }
            }
        }
    }
}

The issue is that I can't get both lines of the section header to justify or align in the same way. I'd prefer them both to be left-justified, but I would settle for them both to be centered to the screen as well. As it is, the alignment is strange, as shown below:

Any suggestions would be greatly appreciated.

score 3 · Accepted Answer · answered Jan 13 '21 at 14:54

3

Add VStack alignment

Section(header:
    VStack(alignment: .leading) { //<< here alignment
        Text("Header line 1")
        Text("This is header line 2")
})

answered Jan 13 '21 at 14:54

davidev

7,694
5
21
56

score 3 · Answer 2 · answered Dec 11 '21 at 05:58

For anyone looking for how to have it centered, this worked for me. To remove auto-capitalization add .textCase(nil)

Section(header:
    HStack {
        Spacer()
        VStack {
            Text("Header line 1")
            Text("This is header line 2")
        }
        Spacer()
    }) {

}
.textCase(nil)

score 0 · Answer 3 · answered Jan 10 '23 at 04:21

0

Use headerProminence modifier

Section("Section Title") {
   Text("Content")
}
.headerProminence(.increased)

answered Jan 10 '23 at 04:21

Saif

2,678
2
22
38

Left- or Center-Justifying Multiline Section Header for List in SwiftUI

3 Answers3