In this article we are going to see how to use Section, Header and List in SwiftUI in XCode
First we are going to define what each thing is so that we know what we are talking about. Let’s start with a Section, which is a view container that you can use to add hierarchy within certain views. We can group related data into a list in SwiftUI using Section.
A List is a container that presents rows of data organized in a single column, optionally providing the ability to select one or more members.
Optionally, we can also add a Header and Footer to describe a particular section.
While a Header describes what a Section is about and a Footer adds more details if the header alone is not enough to convey the entire message.
And here’s an example of General Settings on an iPhone, where everything is grouped together.
And here is another example where a Header and a Footer are used to describe a Section
The Header describes what the Section is about.
The Footer adds more details if the Header alone is not enough to convey the entire message.
Now that we know what a Section, Header, and Footer look like, it’s time to learn how to add them to a data list.
First, let’s learn how to add sections to a SwiftUI list. After that, we’ll learn how to add a header and footer for those sections.
How to group a SwiftUI List in a Section
Adding a Section is as easy as adding data to a list. You only need to include your data within a section view.
struct ContentView: View {
var body: some View {
NavigationView {
List {
Section {
Text("Hello")
Text("My name is")
}
Section {
Text("Ramiro")
Text("Rafart")
Text("SwiftUI")
Text("Developer")
}
Section {
Text("Designer")
Text("Webmaster")
}
Section {
Text("Hello")
Text("this is")
Text("a")
Text("Section")
}
}
.navigationTitle("General")
.navigationBarTitleDisplayMode(.inline)
}
}
}This is how our Section looks
How to add a Header and a Footer to a list in SwiftUI
After grouping your data into a Section, you can add a Header and Footer to a particular section by specifying a Header and Footer in the Xcode Section.
struct ContentView: View {
var body: some View {
NavigationView {
List {
Section {
Text("iPhone Language")
}
Section {
Text("English")
Text("Spanish")
} header: {
Text("Preferred language order")
} footer: {
Text("Apps and websites will use the first language in this list that they support.")
}
Section {
Text("Region")
Text("Calendar")
Text("Temperature")
}
}
.navigationTitle("Swift Apps")
.navigationBarTitleDisplayMode(.inline)
}
}
}The Header will be displayed above the Section and the Footer will be displayed below the section.
But the appearance may change depending on the style of the list.
This is what the Header and Footer look like.
How to customize section Header and Footer with SwiftUI
The section Header and Footer will change their appearance based on the list style by default.
Here is the same source code as in the previous section but now we add list style to .inset
struct ContentView: View {
var body: some View {
NavigationView {
List {
Section {
Text("iPhone Language")
}
Section {
Text("English")
Text("Spanish")
} header: {
Text("Preferred language order")
} footer: {
Text("Apps and websites will use the first language in this list that they support.")
}
Section {
Text("Region")
Text("Calendar")
Text("Temperature")
}
}
.listStyle(.inset)
.navigationTitle("Swift Apps")
.navigationBarTitleDisplayMode(.inline)
}
}
}
Other styles that we can use for header and footer are:
.plain
.inset
.grouped
.insetGrouped
.sidebar
The appearance of the header and footer can change according to the list style.
I suggest you stick to the default style for consistency. But if you have a specific need, there are few ways to customize the header and the footer using Xcode.
