2-2. SwiftUI Tutorial - List

이 글은 swiftUI Tutorial 중 2번째 항목인 "Building Lists and Navigation" 내용을 기반으로 소소하게 알아두면 좋은 내용을 설명합니다. 

swiftUI Tutorial "Building Lists and Navigation""(아래 링크)와 같이 보시면 더욱 유익합니다.

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

 

이번 글에서는 SwiftUI를 사용해 List를 만들어보도록 하겠습니다.

리스트에 사용되는 데이터는 이전 글(https://als2019.tistory.com/97) 또는 위 링크를 참고해주시면 됩니다.

 

1. 사전 준비 - 리스트에 사용할 데이터

이전 글에서 생성한 landmarks dictionary 데이터를 사용하도록 하겠습니다.

var landmarks: [Landmark] = load("landmarkData.json")

struct Landmark: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
    var park: String
    var state: String
    var description: String
    
    private var imageName: String
    var image: Image {
        Image(imageName)
    }
    ...
}

 

2. SwiftUI를 사용해 List Row를 만들어 줍니다.

struct LandmarkRow: View {
    var landmark: Landmark
    
    var body: some View {
        HStack {
            landmark.image
                .resizable()
                .frame(width: 50, height: 50)
            Text(landmark.name)
            Spacer()
        }
    }
}

위  SwiftUI는 아래와 같이 보여집니다.

미리보기를 하기 위해서는 SwiftUI 생성시 기본적으로 제공되는 LandmarkRow_Previews를 사용해 임의의 값을 입력해야 합니다

LandmarkRow는 내부에 landmark 프로퍼티를 가지고 있기때문에 인스턴스 생성 시  파라미터로 landmark를 입력해주어야 합니다.

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarks[0])
            .previewLayout(.fixed(width: 300, height: 70))       
    }
}

 

만약,

LandmarkRow에서 landmark 프로퍼티를 선택적으로 받고자 한다면 해당 프로퍼티를 옵셔널로 선언해주고 아래와 같이 처리하는 부분을 변경해주어야 합니다.

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark?
    
    var body: some View {
        HStack {
            if let lm = landmark {
                lm.image
                    .resizable()
                    .frame(width: 50, height: 50)
                Text(lm.name)
                Spacer()
            } else {
                Text("Opps!!")
            }
        }
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow()
            .previewLayout(.fixed(width: 300, height: 70))
        
        LandmarkRow(landmark: landmarks[0])
            .previewLayout(.fixed(width: 300, height: 70))
    }
}

 

3. List 만들기

List Row를 만들었으므로 이를 반복적으로 보여줄 List를 만들어야 합니다.

SwiftUI를 사용하여 아래와 같이 간단하게 List를 만들 수 있습니다.

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarks, id: \.id) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}
...

 

4. List 화면에 보여주게 처리하기

이렇게 만들어진 LandmarkList를 화면에 보여주게 하기 위해서는 ContentView의 body에 아래와 같이 추가해주면 됩니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        LandmarkList()
    }
}

 

5. List Item 클릭 시 화면 이동 처리

사용자가 리스트 아이템 클릭시 화면을 전환하는 처리를 위해 아래와 같이 List를 NavigationView로 감싸고 NavigationLink를 사용해 아이템 클릭 시 홤녀 이동을 처리해 줍니다.

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarks, id: \.id) { landmark in
                NavigationLink {
                    // 이동할 화면
                } label: {
                    // List에 보여질 Row
                    LandmarkRow(landmark: landmark)
                }
            }
        }
        .navigationTitle("Landmarks")
    }
}