SwiftUI : EditButton [onDelete, OnMove]

 

 OnDelete와 OnMove에 대해 알아보도록 합시다.

EditButton

현재 편집 범위에 대한 편집 모드를 toggle하는 버튼입니다.

 

SwiftUI는 컬렉션에서 개체를 삭제하는 방법을 제어하는 데 사용할 onDelete()수정자를 제공합니다. 이 기능은 목록 및 각 행에만 거의 사용됩니다. 각 행에 표시되는 행 목록을 만든 다음, 각 행에 대해 OnDelete()를 추가해 사용자가 원하지 않는 행을 제거 또는 이동할 수 있습니다.

버튼 토글시 새로운 번호 생성

 숫자 표시되는 목록을 만들고 버튼을 누를 때마다 새 번호가 나타나게 만들어 봅시다. 그 코드는 다음과 같습니다.

import SwiftUI

struct ContentView: View {
    @State private var numbers = [Int]()
    @State private var currentNumber = 1
    
    var body: some View {
        VStack {
            List {
                ForEach(numbers, id: \.self) {
                    Text("\($0)")
                }
            }
            Button("Add Number") {
            
            //버튼에 currenNumber를 append 해주고 눌릴때마다 '+1'씩늘어남
                self.numbers.append(self.currentNumber)
                self.currentNumber += 1
            }
        }
        
    }
}

OnDelete()이 작동하려면 IndexSet 형식의 단일 parameter를 수신할 메서드를 구현해야 합니다. 이것은 정수의 집합과 약간 비슷하지만, 정렬되어 있습니다. 

 

각 항목에 대해 제거해야 할 모든 항목의 위치를 알려 줍니다. ForEach 는 정렬을 하기 위한 코드 이기 때문에 이 코드의 정렬을 제거하기 위해서는 indexSet을 수용하는 remove(atOffsets:) 메서드가 있습니다.

func removeRows(at offsets: IndexSet) {
  numbers.remove(atOffsets: offsets)
}

이제 removeRows 를 할당시켜 줘야 하는데. .onDelete(perform: removeRoes)를 추가합니다.

그리고 위의 removeRows 함수를 작성하여 주면, 기능이 정상적으로 실행됩니다.

struct ContentView: View {
    @State private var numbers = [Int]()
    @State private var currentNumber = 1
    
    var body: some View {
        VStack {
            List {
                ForEach(numbers, id: \.self) {
                    Text("\($0)")
                }
                .onDelete(perform: removeRoes)
            }
            Button("Add Number") {
             //버튼에 currenNumber를 append 해주고 눌릴때마다 '+1'씩늘어남
                self.numbers.append(self.currentNumber)
                self.currentNumber += 1
            }
        }
    }
    func removeRoes(at offsets: IndexSet) {
        numbers.remove(atOffsets: offsets)
    }
}

한 단계 더 나아가서 Navigation View를 생성해, 전체 선택 또는 개별 선택으로 한 번에 삭제할 수 있습니다.

 

VStack 위에 NavigationView를 덮고, 그 NavigationView안에 아래 두 가지 아이템 중에 하나를 선택해 추가해주면 됩니다.

.navigationBarItems(leading: EditButton())  

.toolbar { EditButton() }

그럼 화면 상단 왼쪽에 Edit 버튼이 생기고 그것을 클릭하면 다중 선택 후 삭제가 가능합니다.

struct ContentView: View {
    @State private var numbers = [Int]()
    @State private var currentNuber = 1
    
    var body: some View {
        NavigationView {
            VStack {
                List { ... } 
            .navigationBarItems(leading: EditButton())
        } 
    }
    func removeRow(at offsets: IndexSet) {
        numbers.remove(atOffsets: offsets)
    }
}

전체코드

struct ContentView: View {
    @State private var numbers = [Int]()
    @State private var currentNuber = 1
    
    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(numbers, id:\.self) {
                        Text("\($0)")
                    }
                    .onDelete(perform: removeRow)
                    
                }
                Button("Add Number") {
         //버튼에 currenNumber를 append 해주고 눌릴때마다 '+1'씩늘어남
                    self.numbers.append(self.currentNuber)
                    self.currentNuber += 1
                }
            } 
            .navigationBarItems(leading: EditButton())
        } 
    }
    func removeRow(at offsets: IndexSet) {
        numbers.remove(atOffsets: offsets)
    }
}

List 이동 또는 삭제

먼저, @State private var로 과일의 배열을 만든 후, NavigationView, List, ForEach문을 사용하여 과일명을 나열해줍니다.

    @State private var fruits = [
        "사과",
        "바나나",
        "메론",
        "참외"
    ]
    
    var body: some View {
        NavigationView{
            List {
                ForEach(
                    fruits, id: \.self) { fruit in
                    Text(fruit)
                }

이제  onDelete(perform:) 과 onMove(perform:) 를 사용해서 목록이 이동되거나 삭제되도록 코드를 작성해 줍니다.

        NavigationView{
            List {
                ForEach(
                    fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete(perform: removeFriut)
                .onMove(perform: moveFriut)
            }

onDelete() 와 onMove() 코드를 사용하기 위해서는 body 밖에 함수를 추가해줘야 합니다.

    var body: some View {
        NavigationView { ... }
        
        //Mark : Remove 와 move의 함수를 만들어준다.
    }
    func removeFriut(at offsets: IndexSet) {
        fruits.remove(atOffsets: offsets)
    }
    func moveFriut(from source: IndexSet, to destination: Int) {
        fruits.move(fromOffsets: source, toOffset: destination)
    }

마지막으로 Navigation Title과 오른쪽 상단의 Edit 버튼을 추가해 보도록 하겠습니다.

내비게이션에 Edit 버튼을 추가하는 방법은 여러 가지가 있지만 오늘은 두 가지만 일단 알아보도록 하겠습니다.

1.  .toolbar { EditButton() }
2.  .navigationBarItems(trailing: EditButton())

NavigationView{
            List { ... }
            
            .navigationTitle("과일")
            
            //네비게이션바 오른쪽 상단에 edit를 추가하는 두가지 방법이다.
            
//            .toolbar { EditButton() }
             .navigationBarItems(trailing: EditButton())
        }

 

전체코드

struct ContentView: View {
    
    @State private var fruits = [
        "사과",
        "바나나",
        "메론",
        "참외"
    ]
    
    var body: some View {
        NavigationView{
            List {
                ForEach(
                    fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .onDelete(perform: removeFriut)
                .onMove(perform: moveFriut)
            }
            .navigationTitle("과일")
            
            //네비게이션바 오른쪽 상단에 edit를 추가하는 두가지 방법이다.
            
            .toolbar { EditButton() }
//            .navigationBarItems(trailing: EditButton())
        }
        
        //Mark : Remove 와 move의 함수를 만들어준다.
    }
    func removeFriut(at offsets: IndexSet) {
        fruits.remove(atOffsets: offsets)
    }
    func moveFriut(from source: IndexSet, to destination: Int) {
        fruits.move(fromOffsets: source, toOffset: destination)
        
    }
}

읽어주셔서 감사합니다🤟