SwiftUI - Customize List

Customizing the list is very important in SwiftUI, it enhances the appearance of the list which makes your app look more attractive and appealing. SwiftUI provides various modifiers and methods to style each part including the list itself, sections, list background, row background, separator, rows, and row's content.

Styling List in SwiftUI

In SwiftUI, we can style a list with the help of a pre-defined modifier named .listStyle(_:). The .listStyle(_:) modifier customize the appearance of the list in six different options such as −

• automatic: It styles the list according to the platform's default behavior.

• grouped: It specifies the grouped list's appearance.

• inset: It specifies the inset list's appearance.

• insetGrouped: It specifies the appearance of the inset grouped list.

• plain: It specifies the appearance of the plain list.

• sidebar: It specifies the sidebar list's appearance. It displays a disclosure indicator in the header section which is used to collapse and expand sections.

Syntax

Following is the syntax −

List{
   // items
}.listStyle(.automatic)

Example 1

The following SwiftUI program is used to style the list using inset.

import SwiftUI

struct ContentView: View {
   var body: some View {
      List{
         Section{
            Text("About Device")
            Text("Users and Account")
            Text("Google")
            Text("Help and Feedback")
         }header: {
            Text("About")
         }
         Section{
            Text("Battery")
            Text("Location")
            Text("Apps")
         }header: {
            Text("Apps")
         }
      }.listStyle(.inset)
   }
}
#Preview {
   ContentView()
}

Output

Example 2

The following SwiftUI program is used to style the list using grouped.

import SwiftUI

struct ContentView: View {
   var body: some View {
      List{
         Section{
            Text("About Device")
            Text("Users and Account")
            Text("Google")
            Text("Help and Feedback")
         }header: {
            Text("About")
         }
         Section{
            Text("Battery")
            Text("Location")
            Text("Apps")
         }header: {
            Text("Apps")
         }
      }.listStyle(.grouped)
   }
}
#Preview {
   ContentView()
}

Output

Customizing Rows in the List in SwiftUI

We can also allow to customize rows and rows content of the list with the help of the following modifiers −

• background(): It is used to change the background of the rows.

• padding(): It is used to adjust the spacing inside the rows.

• foregroundStyle(): It is used to style the row's content.

• font(): It is used to style the font of the rows.

• listRowSeparator(): It sets the display mode for the separator associated with the given row. Separators are present between two rows or we can say that they are used to separate rows.

• listRowSeparatorTint(): It is used to specify the color of the row separator.

• listSectionSeparator(): It is used to indicate whether the section separator is hidden or visible. Section separators are used to separate sections.

• scrollIndicators(): It is used to hide or display the scroll indicator.

• listRowSpacing(): It is used to adjust the vertical spacing between two rows.

• listSectionSpacing: It is used to adjust the space between two sections.

Example

The following SwiftUI program is used to customize the rows of the list.

import SwiftUI

struct ContentView: View {
   var body: some View {
      List{
         Section{
            Text("About Device")
            Text("Users and Account")
            Text("Google")
            Text("Help and Feedback")
         }header: {
            Text("About")
         }
         Section{
            Text("Battery")
            Text("Location")
            Text("Apps")
         }header: {
            Text("Apps")
         }
      }.listStyle(.grouped)
         .lineSpacing(15.2)
         .listRowSpacing(3)
         .listRowSeparator(.hidden)
   }
}
#Preview {
   ContentView()
}

Output