SwiftUI 코드로 맨 아래로 자동 스크롤

이쪽의 기사가 참고가 되었습니다.
htps : // 코 m / 조코 야마 / ms / b775 80 445d81d33814

제 경우에는 코드에서 자동으로 (사용자 조작없이) 맨 아래로 스크롤하도록 고민했습니다.
찾아도 좀처럼 걸리지 않았기 때문에 검색의 도움이 되면 다행입니다.



코드로 스크롤하는 방법



코드로 스크롤하려면 ScrollViewReaderscrollTo 를 사용합니다.
타이밍을 자유롭게 제어하기 위해 onChange도 사용합니다.

이미지.swift
ScrollViewReader {

    ...
    ScrollView {} // ここにスクロールさせたい View を挟む
    ...

    .onChange() {
        .scrollTo()
    }
}

코드 예



포인트



  • View 에 @StateObject
  • @StateObject var xxx = XXX()


  • 클래스 XXX 안에 @Published 변수 scrollID를 가져 가라.
  • @Published var scrollID: Int = 0


  • 스크롤하여 표시하고 싶은 View에 id (...)를 붙여 둡니다.
  • 이번은 하단의 View에 붙인다 id(999)


  • 스크롤하는 View 본체(ScrollView)에 .onChange(...) 를 붙여 둔다.
  • .onChange(of: xxx.scrollID) { id in ... }


  • ScrollView를 ScrollViewReader {...} 사이에 끼웁니다.
  • ScrollViewReader { proxy in ... }


  • onChange(...) 안에 scrollTo(...) 쓰기
  • proxy.scrollTo(id)


  • scrollID가 변경되면 자동으로 스크롤
  • self.scrollID = 999


  • Sample.swift
    import SwiftUI
    
    struct ContentView: View {
        @StateObject var xxx = XXX()
    
        var body: some View {
    
            ScrollViewReader { proxy in
                ScrollView {
                    VStack {
                        Text("A")
                        Text("B")
                        Text("C")
                        Text("D")
                        Text("E")
                        Text("F")
                        Text("G")
                        Text("H")
                        Text("I")
                        Text("J").id(999)
                    }
                    .onAppear {
                        // 表示されたことを xxx に知らせる
                        self.xxx.onAppear()
                    }
                }
                .onChange(of: xxx.scrollID) { id in
                    withAnimation {
                        proxy.scrollTo(id)
                    }
                }
            }
        }
    }
    
    class XXX: ObservableObject {
        @Published var scrollID: Int = 0
    
        func onAppear() {
            // 表示された 3 秒後に scrollID を 999 に変更する
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                self.scrollID = 999
            }
        }
    }
    

    ※ 처음의 동영상에서는 이 코드에 더해, 알기 쉽게 하기 위해서 색을 붙이거나 높이를 조정하고 있습니다.


  • withAnimation { ... } 를 쓰지 않으면 애니메이션 없이 순식간에 스크롤할 수 있습니다.
  • scrollTo(id) 대신 scrollTo(id, anchor: ...) 를 사용하면 스크롤한 후 View의 위치를 ​​세밀하게 조정할 수 있습니다.

  • 이상입니다.
    고마워요.

    좋은 웹페이지 즐겨찾기