SwiftUI List Row 선택하기(TableView didSelectRow)

SwiftUI List Row 선택하기(TableView didSelectRow)

 

제목이 제법 UIKit 스러운데 작성하게 된 이유로는 내가 1년 정도 UIKit을 사용하면서 이미 사고가 여기에 익숙해진 상태인데, SwiftUI로 List의 Row(UIKit에서 cell)을 선택하는 로직을 작성하는게 잘 아직까지는 어려운 느낌.

그래서 내가 구글에 저 키워드로 검색했는데, 딱히 맘에 드는게 안나타나서 직접 정리하려고 포스팅 함.

 

매우 간단한데, 이거 UIKit에서 SwiftUI로 사고를 전환하는 과정이 매우 어려웠음.

우선 UIKit을 사용하다보니 tableView에서는 UITableViewDelegate를 상속받아서 didSelectRow를 구현되어 있음.

 

잘못된 케이스

아래의 경우에는 Text 영역에만 Gesture가 되어서 row 전체를 커버할 수 없음.

struct didSelectRow: View {
    var body: some View {
        List {
            ForEach((0...10), id: \.self) { index in
                Text("\(index)")
                    .onTapGesture {
                        print("\(index)")
                    }
            }
        }
    }
}

struct didSelectRow: View {
    var body: some View {
        List {
            ForEach((0...10), id: \.self) { index in
                Text("\(index)")
            }.onTapGesture {
                print("didTap")
            }
        }
    }
}

 

 

List 자체에 onTapGesture를 달아보기

당연히 List 전체가 선택되고, 이 경우에는 UIResponder Chain에 의해 이벤트를 상위에서 가져가서 아래는 받지 못함.

이벤트를 동시에 받는 제스처도 존재하긴 하나, 일반적인 경우에는 사용하지 않음

struct didSelectRow: View {
    var body: some View {
        List {
            ForEach((0...10), id: \.self) { index in
                Text("\(index)")
            }
        }.onTapGesture {
            print("didTap")
        }
    }
}

 

 

올바른 케이스

NavigationView로 묶어준 다음에 NavigationLink를 통해서 사용.

 

(참고)

네비게이션뷰로 묶여 있어야 NaviagtionLink가 동작함.

즉, 어떤 UINavagionContoller가 내 뷰의 계층 중 상위에 Embed in 되어 있어야 함.

 

import SwiftUI

struct didSelectRow: View {
    var body: some View {
        NavigationView {
            List {
                ForEach((0...10), id: \.self) { index in
                    NavigationLink {
                        secondView(index: index)
//                        nextView(index: index)
                    } label: {
                        Text("\(index)")
                    }
                    
                    //                Text("\(index)")
                }
            }
        }
    }
    
    func secondView(index: Int) -> some View {
        var body: some View {
            Text("\(index)")
        }
        
        return body
    }
}

struct nextView: View {
    let index: Int!
    var body: some View {
        Text("\(index)")
    }
}

 

 

 

NaivagionLink

label: 영역에 UI가 위치하고, 클로저의 첫 부분이 destination이다

 

NavigationLink { 
	// action
} label: { 
	// 모양!
}

 

 

 

결과물 UI