List 밖에서도 SwiftUI 스와이프 액션 사용하기
Swipe actions outside of List in SwiftUI
핵심 요약
- swipeActionsContainer()를 스와이프 액션을 적용할 항목이 속한 컨테이너에 붙이면 List가 아닌 ScrollView와 LazyVStack에서도 swipeActions를 사용할 수 있다.
- 이 컨테이너 modifier는 한 번에 한 행의 액션만 열리게 하고, 스크롤하거나 활성 행 바깥을 탭하면 열린 액션을 닫는다.
- List는 이 동작을 자동으로 제공하므로 별도 modifier가 필요하지 않으며, FlowLayout 같은 사용자 정의 레이아웃에는 직접 추가해야 한다.
도입
SwiftUI의 swipeActions는 기존에는 List 안에서만 사용할 수 있어, 스크롤 뷰와 lazy stack을 선택할 때 제약이 됐다. 이제 swipeActionsContainer()를 컨테이너에 적용하면 List 밖에서도 행에 swipeActions를 붙일 수 있다. 대상에는 ScrollView, LazyVStack, FlowLayout 같은 사용자 정의 레이아웃이 포함된다.
상세 요약
List 밖에서 swipeActions 사용하기
기존에는 swipeActions를 List의 항목에 붙여야 스와이프 동작을 사용할 수 있었다. ScrollView와 lazy stack을 조합하거나 사용자 정의 레이아웃을 쓰는 경우에는 같은 방식으로 사용할 수 없었다. 이제 swipeActionsContainer()를 컨테이너에 적용하면 List 이외의 뷰에서도 항목별 스와이프 액션을 설정할 수 있다.
ScrollView {
LazyVStack {
Text("Hello, World!")
.swipeActions {
Button(role: .destructive) {
// 삭제 동작
}
}
}
}
.swipeActionsContainer()
swipeActions는 액션을 적용할 항목에 붙이고, swipeActionsContainer()는 그 항목을 감싸는 바깥 컨테이너에 적용한다. 예시에서는 ScrollView에 modifier를 붙인다. 컨테이너 modifier가 없으면 List 바깥에서 스와이프 액션을 활성화할 수 없다.
컨테이너가 처리하는 동작
swipeActionsContainer()는 단순히 액션을 켜는 역할에 그치지 않는다. 열린 스와이프 액션의 상태도 관리한다.
- 한 번에 한 행의 스와이프 액션만 표시한다.
- 스크롤 이벤트를 추적하고, 스크롤이 발생하면 열린 액션을 닫는다.
- 활성 행 바깥을 탭해도 액션을 닫는다.
List는 이 처리를 자동으로 수행하므로 swipeActionsContainer()를 별도로 적용하지 않는다. 반면 List가 아닌 컨테이너에는 해당 modifier를 직접 붙여야 한다.
사용자 정의 레이아웃에도 적용
이 기능은 ScrollView와 LazyVStack에만 한정되지 않는다. 기사에서는 Layout 프로토콜로 구현한 FlowLayout 안의 뷰에 swipeActions를 붙이고, 바깥의 FlowLayout에 swipeActionsContainer()를 적용하는 예시를 제시한다. 즉, 사용자 정의 레이아웃에서도 컨테이너 설정을 추가하면 같은 방식으로 스와이프 액션을 사용할 수 있다.
이번 변경으로 스와이프 액션이 필요하다는 이유만으로 List를 선택해야 했던 제약이 줄었다. List 외의 컨테이너에서도 자체 레이아웃과 스타일을 구성하면서 항목별 스와이프 동작을 제공할 수 있다.
결론
List가 아닌 컨테이너에서 스와이프 액션을 사용하려면 swipeActionsContainer()를 추가해야 한다. 이 modifier는 열린 액션의 개수를 제한하고 스크롤이나 바깥 탭에 반응해 액션을 닫는다. List는 같은 처리를 자동으로 맡는다. 따라서 레이아웃을 직접 구성하는 경우에도 swipeActions를 사용할 수 있지만, 컨테이너 설정을 빠뜨리지 않아야 한다.