swiftlistswiftuiempty-list

SwiftUI list empty state view/modifier


I was wondering how to provide an empty state view in a list when the data source of the list is empty. Below is an example, where I have to wrap it in an if/else statement. Is there a better alternative for this, or is there a way to create a modifier on a List that'll make this possible i.e. List.emptyView(Text("No data available...")).

import SwiftUI

struct EmptyListExample: View {

    var objects: [Int]

    var body: some View {
        VStack {
            if objects.isEmpty {
                Text("Oops, loos like there's no data...")
            } else {
                List(objects, id: \.self) { obj in
                    Text("\(obj)")
                }
            }
        }
    }

}

struct EmptyListExample_Previews: PreviewProvider {

    static var previews: some View {
        EmptyListExample(objects: [])
    }

}

Solution

  • For iOS 17 you can use ContentUnavailableView:

    ContentUnavailableView(
       "Favourite list empty",
       systemImage: "star",
       description: "Add new item to favourite list")
    )
    

    if you want you can add a foregroundStyle and all text and image are going to have a different color from the same color:

    ContentUnavailableView(
       "Favourite list empty",
       systemImage: "star",
       description: "Add new item to favourite list")
    )
    .foregroundStyle(.blue)
    

    if you want to add an action you can do the code below:

    ContentUnavailableView {
         Label("Favourite list empty", systemImage: "star")
    } description: {
         Text("Add new item to favourite list")
    } actions: {
         Button("Tap here") {
            // add the action here
         }
         .buttonStyle(.borderedProminent)
    }
    

    The usage can be found here: https://www.avanderlee.com/swiftui/contentunavailableview-handling-empty-states/ Thank you @Amos