[SwiftUI] List

List

---

• 하나의 열에 여러 개의 행으로 표현되는 UI를 구성해 다중 데이터를 쉽게 나열할 수 있는 구성된 View
• UIKit에서 동일한 역할을 하던 UITableView와 비교적 사용법이 간소화 됨

List{
    ForEach(0..<10){
        Text("\($0)")
    }
}

결과

 

동적 콘텐츠에서 사용 방식

---

Range <Int>

• 동적 콘텐츠로 Range<Int> 타입을 넘겨줌
• Half-Open Range Operator(Range<Int>) A..<B만 사용 가능 다른 범위 연산자는 사용 불가

List(0..<100){
    Text("\($0)")
}

RandomAccessCollection Protocol

1. id로 사용할 값을 직접 인수로 지정

// Hashable 프로토콜 준수 시에는 간편하게 self로 사용
List(["A", "B", "C", "D", "E"], id: \.self){
    Text("\($0)")
}

 

2. Identifiable 프로토콜 채택

// struct Identifiable 채택
struct Ocean: Identifiable {
    let name: String
    let id = UUID()
}
// 배열 선언
private var oceans = [
    Ocean(name: "Pacific"),
    Ocean(name: "Atlantic"),
    Ocean(name: "Indian"),
    Ocean(name: "Southern"),
    Ocean(name: "Arctic")
]
// 사용할 때 Identifiable 채택했다면 List에 id를 제공하지 않아도 됨
List(oceans) {
    Text($0.name)
}

결과

 

Section

---

• Header와 Footer를 생략하거나 추가할 수 있고, 둘 중 한 개만 사용할 수 있음

// Sea 구조체 선언
struct Sea: Hashable, Identifiable {
    let name: String
    let id = UUID()
}
// OceanRegion 구조체 선언
struct OceanRegion: Identifiable {
    let name: String
    let seas: [Sea]
    let id = UUID()
}
// Data
private let oceanRegions: [OceanRegion] = [
    OceanRegion(name: "Pacific",
                seas: [Sea(name: "Australasian Mediterranean"),
                       Sea(name: "Philippine"),
                       Sea(name: "Coral"),
                       Sea(name: "South China")]),
    OceanRegion(name: "Atlantic",
                seas: [Sea(name: "American Mediterranean"),
                       Sea(name: "Sargasso"),
                       Sea(name: "Caribbean")]),
    OceanRegion(name: "Indian",
                seas: [Sea(name: "Bay of Bengal")]),
    OceanRegion(name: "Southern",
                seas: [Sea(name: "Weddell")]),
    OceanRegion(name: "Arctic",
                seas: [Sea(name: "Greenland")])
]
// List에서 사용
List{
    ForEach(oceanRegions) { region in
    	// Section
        Section(header: Text("Major \(region.name) Ocean Seas"), // Oceans Title
        footer: Text("Total Count : \(region.seas.count)")) // 데이터 개수
        {	
        // Content
            ForEach(region.seas) { sea in
                Text(sea.name)
            }
        }
    }
}

결과

 

ListStyle

---

• DefaultListStyle() : 기본 설정 스타일, 사용환경에 따라 적절한 스타일 결정
• PlainListStyle() : 각 행마다 하나씩 나열하는 형태
• GroupedListStyle() : 각 Section을 분리된 그룹으로 묶어서 선택
• InsetGroupedListStyle() : Section Header에서 시작하여 Section의 목록 항목 양쪽을 따라 Section Footer까지
  이어지는 연속적인 backgroundColor를 표시, GroupedListStyle()에 inset을 추가됨

왼 : PlainListStyle, 중 : GroupedListStyle, 오 : InsetGroupedListStyle

 

출처 및 참고

---

스윗한 SwiftUI (이봉원 저, 비제이퍼블릭)

List | Apple Developer Documentation