[SwiftUI-기초] List - style, color

역할

• UIKit 의 UITableView와 유사한 역할
• 스크롤되는 데이터의 테이블을 제공한다. 
• Form과 동일하지만, 정보를 입력받지 않고 제공하기만 한다는거에서 차이가 있다. 
• Form 은 더 특화된 List일 뿐이다. 

뷰 생성

• 정적인 List 와 동적인 List를 혼용할 수 있다.
• WiFi 와 연결 가능한 네트워크 뷰를 생각해보면 좋다. 
• Form 과 달리 .listStyle() 이라는 modifier 를 이용해서 스타일의 변화를 줄 수 있다. 
  • 인자로 6가지 : .automatic, .grouped, .insetGrouped, .plain, .inset, .sidebar 등이 있다.

//MARK: - 정적인 뷰 생성
List {
    Text("Hello World")
    Text("Hello World")
    Text("Hello World")
}

//MARK: - 동적인 뷰 생성
List {
    ForEach(0..<5) {
        Text("Dynamic row \($0)")
    }
}

//MARK: - 두 조합의 혼용해서 생성
List {
    Text("Static row 1")
    Text("Static row 2")

    ForEach(0..<5) {
        Text("Dynamic row \($0)")
    }

    Text("Static row 3")
    Text("Static row 4")
}

//MARK: - Section과 조합해서 생성
List {
    Section("Section 1") {
        Text("Static row 1")
        Text("Static row 2")
    }

    Section("Section 2") {
        ForEach(0..<5) {
            Text("Dynamic row \($0)")
        }
    }

    Section("Section 3") {
        Text("Static row 3")
        Text("Static row 4")
    }
}

 

.automatic(기본)	.grouped	.insetGrouped

 

.plain	.inset	.sidebar

 

•  List는 동적으로 ForEach 없이도 만들 수 있다.

List(0..<5) {
    Text("Dynamic row \($0)")
}

// another view
struct ContentView: View {
    let people = ["Finn", "Leia", "Luke", "Rey"]

    var body: some View {
        List(people, id: \.self) {
            Text($0)
        }
    }
}

List, ForEach 에서 id 가 필요한 이유

• 배열에 변경사항이 생겼을 때, 전체를 다시 그리지 않고, 변경된 부분만 다시 그린다.
  • 쉽게 말하면, 반복적으로 뷰를 생성하기위해 배열을 받는데, 그 배열의 id 가 되는 부분과 뷰를 연동해서 생성한다.
  • 그러다가 배열에 변화가 생기면 id를 대조해서 거기에 대응하는 뷰만 업데이트를 한다. 
  •  
• id: \.self 란?
  • [String], [Int] 등 배열 타입의 경우에 오는 요소 하나가 유니크함을 나타낸다.
  • ["영식", "영자", "영수", "영재", "영진", "영서", "영식"] 의 배열의 경우엔 id: \.self 했을 때 컴파일 에러를 발생시킨다.
  • "영식"이 반복되서 배열이 유니크한 값으로만 이루어지지 않았다고 컴파일러가 인식

 

List Row 색상 변경

• Row 의 색상을 변경해줄 수 있다.

.listRowBackground(Color.darkBackground)

 

리스트 한 행 삭제

2022.11.04 - [SwiftUI - 기초] - [SwiftUI-기초] onDelete() - List의 row 삭제하기(Array item delete)

[SwiftUI-기초] onDelete() - List의 row 삭제하기(Array item delete)