How to push a new view when a list row is tapped

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-push-a-new-view-when-a-list-row-is-tapped]

 

How to push a new view when a list row is tapped

 

SwiftUI는 UITableView의 didSelectRowAt 메소드와 직접적으로 같은 것이 없지만, 목록의 행과 동작을 처리하는 combine의 NavigationLink을 사용할 수 있기 때문에 필요하지 않습니다. 

 

동작할 수 있는 어떤 컨텐츠로 목록을 만들어야 합니다. 우선, 보여주기 위한 일종의 데이터가 필요합니다.

struct Restaurant: Identifiable {
    var id = UUID()
    var name: String
}

 

그리고 한번에 하나의 식당을 보여주는 목록의 행(row) 뷰가 필요합니다.

struct RestaurantRow: View {
    var restaurant: Restaurant

    var body: some View {
        Text(restaurant.name)
    }
}

 

마지막으로, 사용가능한 식당 목록을 제공하는 뷰가 필요합니다.

struct ContentView: View {
    var body: some View {
        let first = Restaurant(name: "Joe's Original")
        let restaurants = [first]

        return NavigationView {
            List(restaurants) { restaurant in
                RestaurantRow(restaurant: restaurant)
            }.navigationBarTitle("Select a restaurant")
        }
    }
}

 

저 코드는 목록에 있는 하나의 식당을 보여주지만, 선택가능하지(selectable) 않습니다.

 

한 행(row)을 탭해서 상세 뷰를 보여주기 위해서, 먼저 식당을 보여주는 상세 뷰가 필요합니다. 예를들어, 다음과 같은것입니다.

struct RestaurantView: View {
    var restaurant: Restaurant

    var body: some View {
        Text("Come and eat at \(restaurant.name)")
            .font(.largeTitle)
    }
}

 

그리고 그 자리에 다음과 같이, NavigationLink에 있는 RestaurantRow 행을 래핑(wrap)할 수 있습니다.

return NavigationView {
    List(restaurants) { restaurant in
        NavigationLink(destination: RestaurantView(restaurant: restaurant)) {
            RestaurantRow(restaurant: restaurant)
        }
    }.navigationBarTitle("Select a restaurant")
}

 

보다시피, 행을 탭하는 이벤트에 대한 목적지로 RestaurantView(restaurant: restaurant)를 사용하므로, RestaurantView를 만들고 문제의 목록에 첨부했던 식당을 전달합니다.

 

네비게이션 링크 내부에 목록의 행을 문자 그대로 넣은 방법을 주목하세요 - SwiftUI는 뛰어난 구성 능력 덕분에 동작합니다.