본문 바로가기
FE 공부/Swift

Swift - TableView _ Edit Mode

by 꼬질꼬질두부 2022. 11. 29.

영상과 같이 사용자가 셀을 삭제, 추가, 순서 변경 등 편집할 수 있는 모드

EditButton

현재 편집 범위에 대한 편집 모드를 설정하는 버튼 - 동영상 속 '편집' 버튼

일반적으로 List와 함께 사용

List는 또 ForEach와 같이 사용하는데 (정적 + 동적 콘텐츠 조합), 이 ForEach에 onDelete {}, onMove {}를 추가하여 적용

*ForEach란?

collection형태의 데이터들에 접근하는 구조체

>> List처럼 id로 식별할 수 있는 데이터를 받아서 동적으로 뷰를 생성하는 역할

 

onDelete / onMove

 .onDelete(perform: ) _ 삭제 할때 사용

.onMove(perform: ) _  순서 변경 시 사용

 

struct ContentView: View {
  @State private var fruits = [
    "Apple",
    "Banana",
    "Papaya",
    "Mango"
  ]
  
  var body: some View {
    NavigationView {
      List {
        ForEach(fruits, id: \.self) { fruit in
          Text(fruit)
        }
        .onDelete { fruits.remove(atOffsets: $0) }
        .onMove { fruits.move(fromOffsets: $0, toOffset: $1) }
      }
      .navigationTitle("Fruits")
      .toolbar {
      // 자동으로 위 화면처럼 delete버튼과 move버튼이 자동으로 적용
        EditButton()
      }
    }
  }
}

'FE 공부 > Swift' 카테고리의 다른 글

변수와 자료형  (0) 2023.03.11
Swift - TableView _ Managing Selection  (0) 2022.11.29
Swift - TableView Section  (0) 2022.11.22
Swift - Alert Controller  (0) 2022.11.22
Swift _ StackView  (0) 2022.11.15

댓글