SwiftUI – List 1

List

In UIKit, List = UITableView. In Swift UI, list becomes simple way to implement

Simple List

Prepare following codes

• Model
• Row Layout
• Main (View)

Model

Model is data model for row item

Item.swift

import Foundation

struct Item: Hashable, Codable, Identifiable {
    
    var id: Int
    
    var name: String
    
    var imageName: String
    
    var time: String
}

ItemRow

List Row View. Take Model data and draw each row

This is View, so we can see preview

ItemRow.swift

import SwiftUI

struct ItemRow: View {
    
    var item: Item
    
    var body: some View {
        HStack {
            Image(item.imageName)
            .resizable()
            .frame(width: 50, height: 50, alignment: .center)
            .scaledToFit()
            VStack {
                Text(item.name).font(.largeTitle)
                Text(item.time).font(.subheadline)
            }
            Spacer()
        }
    }
}

struct ItemRow_Previews: PreviewProvider {
    static var previews: some View {
        ItemRow(item: Item(id: 1, name: "shikuyoro", imageName: "shikuyoro", time: "2020/06/09 12:00"))
    }
}

Main (View)

Let’s use row view and draw list.

ListView.swift

import SwiftUI

struct ListView: View {
    
    var items : [Item]
    
    var body: some View {
        NavigationView {
            List(items) { item in
                ItemRow(item: item)
            }
            .navigationBarTitle(Text("List"))
        }
    }
}

struct ListView_Previews: PreviewProvider {
    
    static var previews: some View {
        ListView(items: [
        Item(id: 1, name: "shikuyoro", imageName: "shikuyoro", time: "2020/06/09 12:00"),
        Item(id: 1, name: "shikuyoro", imageName: "shikuyoro", time: "2020/06/10 13:00"),
        Item(id: 1, name: "shikuyoro", imageName: "shikuyoro", time: "2020/06/11 14:00")])
    }
}