by Sep 16, 2021 swiftui

How to add list in SwiftUI for Static items and Dynamic Items

Today We are going to learn about how to add List in swiftui of Static Items. Initally We will start with the Static items .

First we need to define the what are the elements in the list row how it will look like. Once you have the row , you can create a List View that will create the number of rows required for the number of items to be listed.

struct IceCream: View {

    let name: String




    var body: some View {

        Text("IceCream Parlour: (name)")

    }

}




struct ContentView: View {

    var body: some View {

        List {

            IceCream(name: "Vanila")

            IceCream(name: "Mango")

            IceCream(name: "Pineapple")

            IceCream(name: "Orange")

        }

    }

}

In This Above Example the code defines a IceCream View that will show a name of String which we will show in List with the 4 fixed data as IceCream(name: “Vanila”)

Now We will start with the List of Dynamic items. Basically in order to handle the Dynamic Item in the list View we need to define the identifiable protocol and we need to add the id value so that SwiftUI can use to see which item it is.

For Example Let us create a struct model of Parlour as shown in below code

struct Parlour: Identifiable {

    let id = UUID()

    let IceCreamname: String

}

We need to add Protocol to Parlour as Identifiable in swiftUI. use the id and the Icecreamname in the model .

The IceCreamCell used as the cell in the list of Row in swiftUI

// A view that shows the data for one Parlour.

struct IceCreamCell: View {

    var parlour: Parlour




    var body: some View {

        Text("Come and eat at (parlour.IceCreamname)")

    }

}




// Create 4 parlours, then show them in a list.

struct ContentView: View {

    let parlours = [

        Parlour(IceCreamname: "Orange"),

        Parlour(IceCreamname: "Vanila"),

        Parlour(IceCreamname: "Mango"),

        Parlour(IceCreamname: "Pineapple")

       

    ]




    var body: some View {

        List(parlours) { parlour in

            IceCreamCell(parlour: parlour)

        }

    }

}

The List Shows the several parlour in the List Screen

Tags: How to add list in swiftui, create a list in swiftui