You can use SwiftUI scroll views when the content to be displayed cannot fit in its container. Scroll views create scrolling content where users can use gestures to bring new content into the section of the screen where it can be viewed. Scroll views are vertical by default but can be made to scroll horizontally or vertically.

In this recipe, we will learn how to use horizontal and vertical scroll views.

Getting ready

Let’s start by creating a SwiftUI project called WeScroll.

Optional: If you don’t have it yet, download the San Francisco Symbols (SF Symbols) app here: https://developer.apple.com/sf-symbols/.

As we mentioned in Chapter 1, Using the Basic SwiftUI Views and Controls, SF Symbols is a set of over 5,000 symbols provided by Apple at the time of this writing.

How to do it…

Let’s learn how scroll views work by implementing horizontal and vertical scroll views that display SF symbols for alphabet characters...

List views are like scroll views in that they are used to display a collection of items. However, List views are better for dealing with larger datasets because they do not load the entirety of the datasets in memory.

When we refer to a list of static items, we mean that the information that the list displays is predetermined in our code, and it does not change when the app is running. A good example of this use is the iOS settings app, where we have a list of settings that are fixed by the iOS version. Every time we run the settings app, we see the same list, its content, is static.

In contrast, a list of dynamic items has its content determined every time the app runs. As such, the app needs to accommodate any number of items in the list. One well-known example is the iOS mail app, where we have a list of our latest emails. The content of this list changes every time we run the app, making its content dynamic.

In this recipe, we will...

The number of lines of code required to display items in a List view row could vary from one to several lines of code. Repeating the code several times or in several places increases the chance of an error occurring and potentially becomes very cumbersome to maintain. One change would require updating the code in several different locations or files.

A custom list row can be used to solve this problem. This custom row can be written once and used in several places, thereby improving maintainability and encouraging reuse.

Let’s find out how to create custom list rows.

Getting ready

Let’s start by creating a new SwiftUI app named CustomRows.

How to do it…

We will reorganize the code in our static lists to make it more modular. We’ll create a separate file to hold the WeatherInfo struct, a separate SwiftUI file for the custom view, WeatherRow, and finally, we’ll implement the components in the ContentView...

The most common actions users might want to be able to perform on a list include adding, editing, and deleting items.

In this recipe, we’ll go over the process of implementing those actions on a SwiftUI list.

Getting ready

Create a new SwiftUI project and call it ListRowAdd.

How to do it…

Let’s create a list with a button at the top that can be used to add new rows to the list. The steps are as follows:

1. Create a state variable in the ContentView struct that holds an array of numbers:

   @State var numbers = [1,2,3,4]
   

2. Replace the content of the body property of the ContentView struct with a NavigationStack containing a List view:

   NavigationStack {
      List{
          ForEach(self.numbers, id:\.self){
             number in
             Text("\(number)")
          }
      }
   }
   

3. Add a .navigationTitle and a navigationBarTitleDisplayMode modifier to the list with a title and an...

So far, we’ve learned how to add new rows to a list. Now, let’s find out how to use a swipe motion to delete items one at a time.

Getting ready

Create a new SwiftUI app called ListRowDelete.

How to do it…

We will create a list of items and use the list view’s onDelete modifier to delete rows. The steps are as follows:

1. Add a state variable to the ContentView struct called countries and initialize it with an array of country names:

       @State private var countries = ["USA", "Canada", "Mexico", "England", "Spain", "Cameroon", "South Africa", "Japan", "South Korea"]
   

2. Replace the content of the body variable with a NavigationStack containing a List view that displays our array of countries. Also, include the onDelete modifier at the end of the ForEach structure:

           NavigationStack {
   ...

Adding an edit button to a List view is very similar to adding a delete button, as seen in the previous recipe. An edit button offers the user the option to quickly delete items by clicking a minus sign to the left of each list row.

Getting ready

Create a new SwiftUI project named ListRowEdit.

How to do it…

The steps for adding an edit button to a List view are similar to the steps we used when adding a delete button. The process is as follows:

1. Replace the ContentView struct with the following content from the DeleteRowFromList app:

   struct ContentView: View {
       @State private var countries = ["USA", "Canada", "Mexico", "England", "Spain", "Cameroon", "South Africa" , "Japan", "South Korea"]
       var body: some View {
           NavigationStack {
               List {
                   ForEach(countries, id: \.self) { country in...

In this recipe, we’ll create an app that implements a List view that allows users to move and reorganize rows.

Getting ready

Create a new SwiftUI project named MovingListRows.

How to do it…

To make the List view rows movable, we’ll add a modifier to the List view’s ForEach struct, and then we’ll embed the List view in a navigation view that displays a title and an edit button. The steps are as follows:

1. Add a @State variable to the ContentView struct that holds an array of countries:

       @State private var countries = ["USA", "Canada", "Mexico", "England", "Spain", "Cameroon", "South Africa" , "Japan", "South Korea"]
   

2. Replace the body variable’s text view with a NavigationStack, a List, and modifiers for navigating. Also, notice that the .onMove modifier is applied to the ForEach...

In this recipe, we will create an app that implements a static list with sections. The app will display a list of countries grouped by continent.

Getting ready

Let’s start by creating a new SwiftUI app in Xcode named ListWithSections.

How to do it…

We will add a Section view to our List to separate groups of items by section titles. Proceed as follows:

1. (Optional) Open the ContentView.swift file and replace the body content with a NavigationStack. Wrapping the List in a NavigationStack allows us to add a title and navigation items to the view:

   NavigationStack {
   }
   

2. Add a list and section to NavigationStack (or body view if you skipped the optional Step 1). Also, add a listStyle and navigationTitle and navigationBarTitleDisplayMode modifiers:

   List {
       Section(header: Text("North America")){
           Text("USA")
           Text("Canada")
           Text("Mexico...

Editing lists has always been possible in SwiftUI but before WWDC 2021 and SwiftUI 3, doing so was very inefficient because SwiftUI did not support binding to collections. Let’s use bindings on a collection and discuss how and why it works better now.

Getting ready

Create a new SwiftUI project and name it EditableListsFields.

How to do it…

Let’s create a simple to-do list app with a few editable items. The steps are as follows:

1. Add a TodoItem struct below the import SwiftUI line:

   struct TodoItem: Identifiable {
       let id = UUID()
       var title: String
   }
   

2. In our ContentView struct, let’s add a collection of TodoItem instances:

       @State private var todos = [
           TodoItem(title: "Eat"),
           TodoItem(title: "Sleep"),
           TodoItem(title: "Code")
       ]
   

3. Replace the body content with a List that displays the collection...

List views can hold from one to an uncountable number of items. As the number of items in a list increases, it is usually helpful to provide users with the ability to search through the list for a specific item without having to scroll through the whole list.

In this recipe, we’ll introduce the searchable(text:placement:prompt:) modifier, which marks the view as searchable and configures the display of a search field, and discuss how it can be used to search through items in a list.

Getting ready

Create a new SwiftUI project and name it SearchableLists.

How to do it…

Let’s create an app to search through different types of food. The steps are as follows:

1. Add a new Swift file to the project called Food, which will contain the data used for the project. We use a struct to model different types of food. The struct has two properties, a string with the name of the food, and a category, which is an enum representing...

In this recipe, we will improve our searchable list with the addition of the searchScopes(_:activation:_:) modifier, which allows us to narrow the scope of our searches.

The scope modifier could be useful to further reduce the scope of our search and reduce the time it takes to find an item. In our case, we have a list of food items, belonging to three different categories: meat, fruit, and vegetables. Selecting a specific scope narrows the search and gives the user a quicker way of finding the desired item.

Getting ready...