[SwiftUI] List 정리 (1)

List 뷰는 수직 방향의 목록 형태로 사용자에게 정보를 제공하는 방법을 제공한다. 리스트 항목은 사용자가 터치했을 때 앱의 다른 영역으로 이동하곤 한다. 이런 행동은 NavigationView 컴포넌트와 NavigationLink 컴포넌트를 사용하여 구현된다. 현재 게시글에선 다루지 않는다.

List뷰는 정적 데이터와 동적 데이터를 모두 표현할 수 있으며, 추가 ,삭제, 항목 순서 재정렬 작업을 할 수 있도록 확장되기도 한다.

List

List 컨트롤은 셀(cell)에 포함된 하나 이상의 뷰의 각 행을 수직 방향의 목록으로 정보를 표현하는 UIKit의 TableView 클래스와 비슷한 기능을 제공한다.

struct ContentView: View {
    var body : some View {
        List {
            Test("text1")
            Test("text2")
            Test("text3")
            Test("text4")
            Test("text5")
        }
    }
}

위 상황은 정적 데이터를 그대로 화면에 출력시킨 결과이다.

그렇다면 동적 데이터를 화면에 출력시켜 보자
우선 동적 데이터라고 하는게 거창한건 아니다. 그저 배열에 있는 데이터를 불러다 출력하는 것이다.
이번엔 리스트에 들어갈 Cell View 도 추가해 보았다.

Model

struct ToDoItem : Identifiable
{
    var id = UUID()
    var task : String
    var imageName : String
}

View

struct TestListContent: View {

    var listData : [ToDoItem] = []

    init()
    {
        for index in 1...15 {
            listData.append(ToDoItem(task: "task\(index)", imageName: "command"))
        }
    }

    var body: some View {
        VStack{ 
            List(listData) { item in
                TestListCell(item)
            }
        }
    }
}

Cell View

import SwiftUI

struct TestListCell: View {
    var item: ToDoItem?

    init(_ item: ToDoItem) {
        self.item = item
    }

    var body: some View {
        HStack {
            Image(systemName: item!.imageName)
            Spacer()
            Text("\(item!.task)")
        }
    }
}