Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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: [])
    }

}
like image 703
Bram Avatar asked Jun 15 '20 23:06

Bram


2 Answers

One of the solutions is to use a @ViewBuilder:

struct EmptyListExample: View {
    var objects: [Int]

    var body: some View {
        listView
    }

    @ViewBuilder
    var listView: some View {
        if objects.isEmpty {
            emptyListView
        } else {
            objectsListView
        }
    }

    var emptyListView: some View {
        Text("Oops, loos like there's no data...")
    }

    var objectsListView: some View {
        List(objects, id: \.self) { obj in
            Text("\(obj)")
        }
    }
}
like image 192
pawello2222 Avatar answered Nov 01 '22 03:11

pawello2222


I quite like to use an overlay attached to the List for this because it's quite a simple, flexible modifier:

struct EmptyListExample: View {

    var objects: [Int]

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

It has the advantage of being nicely centred & if you use larger placeholders with an image, etc. they will fill the same area as the list.

like image 22
LordParsley Avatar answered Nov 01 '22 02:11

LordParsley