[SwiftUI] 채팅 기능 (타겟 뷰로 스크롤 이동하기, ScrollViewReader, ScrollTo, Anchor)

 
 

 

 

ScrollViewReader를 이용하면 스크롤를 자동으로 할 수 있다.

뷰 화면 초점을 맞추거나, 채팅 내용 검색 등에 활용할 수 있겠음
 
 

다음 코드에서 ScrollViewReader로 ScrollView를 감싸주고, proxy를 이용해서 scrollTo~ 해주면 위와 같이 작동한다.

 

 

---

import SwiftUI

struct ContentView: View {
    
    private var dataArray: [String] = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]
   
    private let target: Int = 5 //f
    
    var body: some View {
        
        ScrollViewReader{ proxy in   //ScrollViewReader
            ScrollView(.vertical){
                
                LazyVStack{
                    ForEach(0..<dataArray.count){ i in
                        HStack{
                            Text("\(dataArray[i])").padding()
                             .foregroundColor(i==target ? .red : .black)
                        }.padding()
                            .id(i)
                    }
                }.rotationEffect(Angle(degrees: 180))
                    .scaleEffect(x: -1.0, y: 1.0, anchor: .center)
                
            }
            .rotationEffect(Angle(degrees: 180))
            .scaleEffect(x: -1.0, y: 1.0, anchor: .center)
            .overlay(alignment: .bottomTrailing) {
                VStack(spacing: 20) {
                    Button {
                        withAnimation {
                            proxy.scrollTo(target, anchor: .bottom)
                        }
                    } label: {
                        RoundedRectangle(cornerRadius: 12)
                            .frame(width: 100, height: 80)
                            .overlay {
                                Text("Top\n'f'")
                                    .bold()
                                    .foregroundColor(.white)
                            }
                            .padding([.bottom, .trailing], 20)
                    }
                }
            }
        }
    }
}

---

target값은 id(i)로 체크

 

근데 anchor 설정할 때 

scrollToTop하고싶으면 anchor을 bottom으로 설정해주어야함. 

ScrollView를 bottom으로 당긴다는 뜻

 

scroll to bottom은 반대로 anchor을 top으로 설정

아래와 같이 center도 가능!

 

 

 

 

메모메모,,