[SwiftUI Project] Scroll To Top 버튼 만들기

Scroll To Top

 

이번에 만들어 볼 것은 Scroll To Top 버튼입니다.

ScrollView를 일정 수치만큼 내리면 나타나고, 탭하면 최상단으로 스크롤해줍니다. 

 

사용할 때는 다음과 같이 작성할 수 있습니다. 

1. Geometry Reader를 사용해 VStack Offset 얻기

2. offset 값에 따라서 보여지는 버튼 만들기

3. ScrollView에 id를 부여하고, 버튼을 눌렀을 때 id를 가진 ScrollView의 상단으로 이동하도록 작성

 

Sroll To Top 버튼이 사용된 프로젝트 코드

HomeView.swift

import SwiftUI

struct HomeView: View {
    
    @EnvironmentObject private var viewModel: HomeViewModel
    @State private var showMenu: Bool = false
    @State private var scrollViewOffset: CGFloat = 0 <- offset 프로퍼티
    @State private var startOffset: CGFloat = 0 <- offset 프로퍼티
    
    var body: some View {
        ZStack {
            // Background layer
            Color.theme.background
                .ignoresSafeArea()
            
            // content layer
            VStack(spacing: 0) {
                
                homeHeader
                
                ScrollViewReader {proxyReader in // ScrollViewReader로 감싸줍니다.
                    ScrollView() {
                        VStack { . . . }
                        .id("SCROLL_TO_TOP") // ScrollView 아이디 생성
                        .overlay(
                            GeometryReader{proxy -> Color in // ScrollView Offset 얻기
                                DispatchQueue.main.async {
                                    if startOffset == 0 {
                                        self.startOffset = proxy.frame(in: .global).minY
                                    }
                                    let offset = proxy.frame(in: .global).minY
                                    self.scrollViewOffset = offset - startOffset
                                    print(self.scrollViewOffset) // offset 출력
                                }
                                return Color.clear
                            }
                        )
                    }
                    .overlay(
                        Image(systemName: "arrow.up") // 버튼 생성
                            .font(.title2)
                            .foregroundColor(Color.white)
                            .frame(width: 40, height: 40)
                            .background(
                                Circle()
                                    .foregroundColor(Color.theme.red)
                            )
                            .padding(.trailing, 30)
                            .opacity(-scrollViewOffset > 145 ? 1: 0) 
                            .onTapGesture {
                                withAnimation {
                                    proxyReader.scrollTo("SCROLL_TO_TOP", anchor: .top)
                                }
                            }
                        ,alignment: .bottomTrailing
                )
                }
                Spacer(minLength: 0)
            }
        }
    }
}

 

offset 보기

 

버튼이 나타나게 될 offset 값은 화면을 움직여주면서 찾을 수 있습니다. 

이번 프로젝트에서는 -145 지점을 지나서 버튼이 보여지도록 설정했습니다. 

.opacity(-scrollViewOffset > 145 ? 1: 0)

 

Scroll To Top 참고 유튜브: 

Scroll To Top 참고 블로그: 

SwiftUI : ScrollToTop 맨위로 버튼