seong_hye, the developer

SwiftUI) 하단 Refresh 추가하기 본문

IOS/SwiftUI

SwiftUI) 하단 Refresh 추가하기

seong_hye 2022. 8. 24.

 

📘 SwiftUI - 하단 Refresh

ScrollView나 list를 다루다보니 앱의 마지막에 도착했을 때 refresh를 추가하고 싶어지는 경우가 있었다이 때 해결방안을 정리해두려 한다.


🔹하단 갱신 방법

✅ ScrollView에서 하단 감지 후 refresh 구현

ScrollView {
	LazyVStack {
    	ForEach(.., id: \.self) { item in
        	..
        }
        
        if isLoading {
        	ProgressView()
            	.padding()
        } else {
        	GeometryReader { geometry in
            	Color.clear
                	.onAppear {
                    	if geometry.frame(in: .global).maxY < UIScreen.main.bounds.height + 50 {
                        	// 마지막에 닿았을 때 실행 코드
                        }
                    }
            }
        }
    }
}

📌 코드 설명

GeometryReader .onAppear를 활용

isLoading을 통해 중복 호출 방지

~> 실행 코드에서 내용 추가 또는 나타날 수 있도록 조절

 

 

✅ List 에서 마지막 아이템이 나타날 때 refresh 구현

List {
    ForEach(items, id: \.self) { item in
        ..
        .onAppear {
        	if item == items.last {
            	// 실행할 함수
            }
    }
        
    if isLoading {
    	HStack {
        	Spacer()
        	ProgressView()
            Spacer()
        }
    }
}

📌 코드 설명

배열의 마지막을 의미하는 .last를 활용하여 배열의 마지막이 .onAppear로 나타난 item과 같으면

마지막에 위치했음을 알게 되어 refresh를 구현

실행함수에서 isLoading을 통해 중복 호출 및 상황 파악 가능


 

Comments