Skip to content

Lists (SwiftUI)


Prepared and tested with Xcode 13.4 and Swift 5.3 (last update: 2022-05-24)

In this part you will learn how to use List view to present information in the form of a vertical list of rows as well as how to add, remove and reorder row entries.

Table of contents


Introduction


Project 1: static list

  • Step 1: create project
    Create a new iOS project, as you did in Start Xcode and set up a project section of First application (SwiftUI) part and name it SwiftUI iOS Lists:

  • Step 2: create simple list
    Open in editor the ContentView.swift and replace ContentView structure with:

  • Step 3: modify list cell
    Fortunatelly, you are not restricted to use only a single component as a list cell content. In fact, you can use any combination of components:

    Above I made a new cell only for the first three peaks (cells) because of the code verbosity. You can significantly reduce code repetition with custom view:

  • Step 4: modify list cell style
    You can also modify list cell style with:

    • listRowSeparator() – hides a row separator;
    • listRowSeparatorTint() – changes the color of a row separator;
    • listRowBackground() – places a custom background view behind a list row item.

    In the code given below I demonstrate how these modifiers works. Because I defined also a custom modifier, parts of code which stays unaffected compared to previously given code are "hidden" under the [...] string:


Project 2: dynamic list

You considered a list as dynamic when it contains a set of items that can change over time be adding, editing or deleting its items.

To make it possible, each data element you want to display must be contained within a class or structure that conforms to the Identifiable protocol. This protocol requires that the instance contain a property named id which can be used to uniquely identify each item in the list. The id property can be any built-in Swift or even custom type that conforms to the Hashable protocol. Quite common is to use UUID as id:

  • Step 1: cell data model
    Open in editor the ContentView.swift and remove everything except ContentView_Previews structure and initial import import SwiftUI. Then first add definition of cell data model:

    Next add new ContentView structure:

    When your will run this code, you will see:

  • Step 2: mix static and dynamic content

  • Step 3: use sections to divide list content
    Mixing in previous step static and dynamic content is not a good UI design. It would be better to separate smehow static part responsible for settings and dynamic part displaying informations. You can complet this with Section view:

  • Step 4: add cells

  • Step 5: delete cells

    Because deleteItems(at:) function is very simple, you can define delete action as modifier (and remove deleteItems(at:) function):

  • Step 6: move cells

    Because moveItem(fromOffsets:toOffset:) function is very simple, you can define move action as modifier (and remove moveItem(fromOffsets:toOffset:) function):

    In most cases Edit button is implemented as button located in navigation bar (so you have to wrapp the list into a navigation view):

    If you replace

    with

    you will get a little bit different behaviour:


Project 3: hierarchical informations

  • Step 1: cell data model
    Open in editor the ContentView.swift and remove everything except ContentView_Previews structure and initial import import SwiftUI. Then first add definition of cell data model and all other associated data structures:

    Next add new views and ContentView structure:

    When your will run this code, you will see:

    If you comment .listStyle(SidebarListStyle()) modifier, you will see default list:


Project 4: disclosure group

  • Step 1: use DisclosureGroup view
    Open in editor the ContentView.swift and remove everything except ContentView_Previews structure and initial import import SwiftUI. Then paste the following code:

    When your will run this code, you will see:


Summary

In this part you learned how to create lists, manage their content by add, move or remove items and how to create hierarchical lists.

The key points of this part are:

  • How to create basic list with static elements.
  • How to create dynamic list and add, remove or reorder row entries.
  • How to display hierarchical informations.
  • How to use disclosure group to show or hide another content view, based on the state of a disclosure control.