오류 해결) List Refreshable 오류

 

📘 오류 해결) List Refreshable 오류

앱을 만들던 중 List가 Refresh 되지 않는 오류가 있었다

처음 딱 떴을 때 refresh가 되었으면 좋겠는데 되지 않고 계속 문제가 되는 부분이 있어서

시도해 본 여러 방법과 해결방안에 대해 작성해보려 한다.

---

🔹 현재 어플 및 코드 축약

윗쪽 탭바와 그에 맞게 아래 리스트를 둔 화면을 만들고 싶어서

다음과 같은 코드를 활용해 아래 화면을 제작하였다

VStack {
	ScrollView(.horizontal) {
    	...
    }
    
    TabView( .. ) {
	    List {
    		...
    	}
        .refreshable { ... }
        
        ...
        
    }
}

 

❌ 문제 상황

탭을 눌러 처음 딱 리스트가 떴을 때 아래로 내려도 refresh가 되지 않는 문제가 있다는 것이다.

---

🔹문제 이유

이 문제는 SwiftUi에서 ScrollView와 List가 중첩되었을 때 생기는 대표적인 충돌 문제였다

 

VStack 안에 ScrollView가 있고 그 아래에 List가 있으면,

SwiftUI가 스크롤과 제스처를 상위 ScrollView에만 연결하기 때문에 List의 .refreshable은 작동하지 않는 것이였다.

---

🔹해결 방안

List 대신 ScrollView + LazyVStack 조합을 활용

VStack {
	ScrollView {
    
    }
    
    TabView( .. ) {
	    ScrollView {
        	LazyVStack {
    			...
            }
    	}
        
        ...
        
    }
}

 

🔍 시도해 본 다른 방법들

➡️ list의 문제인 줄 알았을 때

✅ NavigationStack 으로 감싸기

...

NavigationStack {
	List {
    	...
    }
}

 

✅ .listStyle(.plain) 사용하기

List {
	...
}
.listStyle(.plain)
.refreshable { ... }

 

✅ .refreshable 이 너무 빨리 끝나 로딩이 안보이는 건지 시간 추가

.refreshable {
	try await Task.sleep(nanoseconds: 1_000_000_000)
}

---

➡️TabView의 문제인 줄 알았을 때

✅ 탭 바꿀 때마다 리스트 초기화 트리거하기

TabView가 내부 뷰를 계속 유지하기 때문에 .onAppear 또는 .onChange(of:)로 상태를 초기화

TabView(selection: $selection) {
	List {
    	...
    }
    .refreshable { ... }
}
.onChange(of: selection, { oldValue, newValue in
	...
})

 

 이 외에도 많은 방법을 수정해봤지만 해결하지 못해

알게 된 이유가 바로 ScrollView와 List를 같이 사용해 충돌이 생겼다는 것이였다.

---

🔹결과 화면

---