[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
}
댓글
댓글 쓰기