[swiftUI] List tutorial

[swiftUI] List tutorial

리스트(List)

리스트는 목록을 구현할 때 사용된다. 여러 데이터를 위에서 아래로 나열 할 때 사용한다.

정적 리스트(Static List)

List 안에 Text(“내용”)을 반복적으로 넣어주면 리스트로 나열된다.
단쉰히 기존에 사용자가 입력 해 놓은 값들을 나열 해 줄 뿐이다.
정적 리스트는 리스트 안의 뷰를 구별할 수 있는 식별값이 없다.
그렇기 때무에 첫 번째 Leeo와 네 번째 Leeo가 같은 사람인지에 대한 삭별값이 존재하지 않는다.
import SwiftUI

struct ContentView : View {
    var body: some View {
        List{
            HStack{
                Text("My name is Leeo")
                Text("Age is 29")
            }
            HStack{
                Text("My name is Lisa")
                Text("Age is 17")
            }
            HStack{
                Text("My name is Sven")
                Text("Age is 27")
            }
            HStack{
                Text("My name is Leeo")
                Text("Age is 29")
            }
        }
    }
}

동적 리스트(Dynamic List)

동적 리스트는 앱이 실행되는 동안에 리스트 안의 뷰가 추가되고 삭제될 수 있다. 다음 코드는 네개의 뷰를 Array에 넣어서 순서대로 호출한다.
구조체의 특징상 내부 메서드 안에서 자신의 변수를 변경할 수 없기 때문에 @State 어노테이션을 붙어준다.
리스트의 삭제를 위해 onDelete 메소드를 호출 해주고, 삭제 기능을 구현해준다.
onDelete 메소드는 ForEach에 들어있다.
import SwiftUI

struct ContentView : View {
    
    var students = [Student(name: "Leeo",age: 29),
                    Student(name: "Lisa",age: 19),
                    Student(name: "Sven",age: 27),
                    Student(name: "Leeo",age: 29)]
    
    var body: some View {
        // 학생들의 정보를 담은 배열
        List{
            ForEach(students, id: \.id) {student in
                HStack{
                    Text("My name is \(student.name)")
                    Text("Age is \(student.age)")
                }
            }
        }
    }

}

// 학생의 정보 구조체
struct Student: Identifiable {
    var id = UUID()
    var name: String
    var age: Int
}
    

아이템 순서 편집

아이템의 순서 편집을 위해서는 편집상태로 진입할 수 있는 버튼과 순서를 재정의 해줄 함수가 필요하다. 수정 모드의 진입은 EditButton()으로 해준다. 순서의 변경의 array의 순서 변경 메소드인 move를 이용해준다. DynamicViewContent 메소드인 onMove안에 순서변경 로직을 넣어준다.
import SwiftUI

struct ContentView : View {
    
    @State var students = [Student(name: "Leeo",age: 29),
                           Student(name: "Lisa",age: 19),
                           Student(name: "Sven",age: 27),
                           Student(name: "Leeo",age: 29)]
    
    var body: some View {
        // 학생들의 정보를 담은 배열
        NavigationView{
            List{
                ForEach(students, id: \.id) {student in
                    HStack{
                        Text("My name is \(student.name)")
                        Text("Age is \(student.age)")
                    }
                }
                .onMove{ sourceIndices, destinationIndex in
                    self.students.move(fromOffsets: sourceIndices, toOffset: destinationIndex)
                }
            }
            .navigationBarItems(trailing: EditButton())
        }
    }
}

// 학생의 정보 구조체
struct Student: Identifiable {
    var id = UUID()
    var name: String
    var age: Int
}

아이템 삭제

아이템 삭제를 위해서는 ForEach에 구현되어있는 onDelete 메소드를 사용한다.
리스트의 뷰 뒤에서 onDelete 메소드를 호출해준다.
import SwiftUI

struct ContentView : View {
    
    @State var students = [Student(name: "Leeo",age: 29),
                    Student(name: "Lisa",age: 19),
                    Student(name: "Sven",age: 27),
                    Student(name: "Leeo",age: 29)]
    
    var body: some View {
        // 학생들의 정보를 담은 배열
        List{
            ForEach(students, id: \.id) {student in
                HStack{
                    Text("My name is \(student.name)")
                    Text("Age is \(student.age)")
                }
            }
            .onDelete{ indexSet in
                        self.students.remove(atOffsets: indexSet)
                    }
        }
    }
}

// 학생의 정보 구조체
struct Student: Identifiable {
    var id = UUID()
    var name: String
    var age: Int
}
    

리스트의 섹션

섹션을 추가하여 아이템을 구분할 수 있다. Section을 사용하여 아이템들을 한번 감싸주자.
import SwiftUI

struct ContentView : View {
    
    var students = [Student(name: "Leeo",age: 29),
                    Student(name: "Lisa",age: 19),
                    Student(name: "Sven",age: 27),
                    Student(name: "Leeo",age: 29)]
    
    var body: some View {
        // 학생들의 정보를 담은 배열
        List{Section(header: Text("Atendee")) {
                ForEach(students, id: \.id) {student in
                    HStack{
                        Text("My name is \(student.name)")
                        Text("Age is \(student.age)")
                    }
                }
            }
            Section(header: Text("Important")) {
                ForEach(students, id: \.id) {student in
                    HStack{
                        Text("My name is \(student.name)")
                        Text("Age is \(student.age)")
                    }
                }
            }
        }
    }
    
}

// 학생의 정보 구조체
struct Student: Identifiable {
    var id = UUID()
    var name: String
    var age: Int
}

정리

SwiftUI에서 많이 사용되는 List의 특징과 사용방법을 알아보았다. 아이템들을 나열하고, 편집, 삭제 하는 방법을 정리했다.
싱글 뷰로 앱이 만들어 지진 않지만, 많은 앱에 리스트가 사용되니 정확한 방법을 숙지한다.
import SwiftUI

struct ContentView : View {
    
    @State var students = [Student(name: "Leeo",age: 29),
                           Student(name: "Lisa",age: 19),
                           Student(name: "Sven",age: 27),
                           Student(name: "Leeo",age: 29)]
    
    var body: some View {
        NavigationView{
            // 학생들의 정보를 담은 배열
            List{Section(header: Text("Atendee")) {
                ForEach(students, id: \.id) {student in
                    HStack{
                        Text("My name is \(student.name)")
                        Text("Age is \(student.age)")
                    }
                }
                .onMove{ sourceIndices, destinationIndex in
                    self.students.move(fromOffsets: sourceIndices, toOffset: destinationIndex)
                }
                .onDelete{ indexSet in
                    self.students.remove(atOffsets: indexSet)
                }
                }
                
                Section(header: Text("Important")) {
                    ForEach(students, id: \.id) {student in
                        HStack{
                            Text("My name is \(student.name)")
                            Text("Age is \(student.age)")
                        }
                    }
                }
            }
            .navigationBarItems(trailing: EditButton())
        }
    }
    
}

// 학생의 정보 구조체
struct Student: Identifiable {
    var id = UUID()
    var name: String
    var age: Int
}

donaricano-btn

댓글

이 블로그의 인기 게시물

[IOS] AppDelegate는 뭐하는 녀석이지?

[git] git의 upstream과 origin 헷갈리는 사람 손!

[git] Github 이슈 라벨(issue labels)