SwiftUI - List에서 원하는 Row로 스크롤 하기 #scrollTo

 

최근 다이어리 앱을 만들고 있는데요.

아래와 같이 시간대별로 기록할 수 있는 리스트를 가지고 있습니다.

 

"저는 현재 시간의 Row를 최상단으로 스크롤 하고 싶었습니다."

(현재 시간이 14시면 14시 row를 최상단으로 스크롤)

 

 

 

scrollTo(_:anchor:)

ScrollView에서 해당 ID가 있는 하위 뷰를 찾아서 해당 뷰로 스크롤 합니다.

id는 하위 뷰를 판단할 수 있는 고유값이고

anchor는 타겟이 되는 하위 뷰를 스크롤 어디에 위치시킬지 결정하는 옵션입니다.

(.top, .center, .bottom, .leading, .trailing 등의 옵션이 있습니다.)

 

 

기본 코드 예시

struct ContentView: View {
    var body: some View {
        ScrollViewReader { proxy in
            VStack {
                Button("Jump to #50") {
                    proxy.scrollTo(50)
                }

                List(0..<100, id: \.self) { i in
                    Text("Example \(i)")
                    .id(i)
                }
            }
        }
    }
}

*참고: https://www.hackingwithswift.com/quick-start/swiftui/how-to-scroll-to-a-specific-row-in-a-list

 

핵심은 두가지 입니다.

1. ScrollViewReader 안에 List를 넣는다

2. Text()에 .id()로 id값을 부여한다.

 

저는 처음에 1번만 하고 2번을 하지 않아서 스크롤이 동작하지 않았는데요. 2번도 꼭 해주셔야 합니다.

 

 

 

나의 다이어리 앱에 적용한 예시

ScrollViewReader { proxy in
    List() {
        ForEach(timeLines, id: \.self) { timeline in
            TimeLineViewRow(timeLine: timeline)
            .id(timeline)
        }
    }
    .onChange(of: timeLines, perform: { newValue in
        let target = timeLines.first { $0.hour == String(Calendar.current.currentHour) }
        proxy.scrollTo(target, anchor: .top)
    })
}

 

ScrollViewReader 안에 List를 넣어주고 Row에 id를 부여하였습니다.

그 id값을 바탕으로 원하는 row로 scrollTo()를 할 수 있었습니다.