SwiftUI에서 리스트 동적으로 사용하기 (1)

먼저 내가 구현하려고 하는 카테고리뷰는 다음과 같은 식의 연락처 화면이다.

https://gigas-blog.tistory.com/46

Swift 4 TableView Section

구현해야 할것들

- 알파벳순 정렬 / 섹션 구분

- 없는 알파벳 섹션은 안보이도록

- 스크롤 하면서 알파벳 인덱스 쉽게 찾을 수 있도록?

- 들어가는 컨텐츠가 많다보니까 데이터 관리를 편하게 해야할듯

이러한 구현 목록을 보니, 우선 리스트를 만들면서 시작해야 할 것 같다.

그러나, 목록이 72개, 섹션까지 합치면 84개에 달하니, 리스트를 동적으로 사용해야 할 것 같다.

 

1. 첫번째 시도

https://medium.com/ivymobility-developers/creating-simple-tableview-in-swiftui-1f9e8e464782

Creating Simple TableView in SwiftUI

여기에서 마지막에 나오는 방식처럼 구조체를 만들고 배열 기반 리스트를 사용하려고 한다.

우선 섹션만 나타나는 리스트를 만들어보자.

//
//  ContentView.swift
//  SwiftDictionary
//
//  Created by Tempnixk on 2022/04/28.
//

import SwiftUI

struct Section: Identifiable {
  let id    : Int
  let name  : String
  let size  : String
}

var sectionList = [
    Section(id: 0, name: "Collection Types", size: "4 bytes"),
    Section(id: 1, name: "Conditional Statements", size: "1 byte"),
    Section(id: 2, name: "Data", size: "4 bytes"),

    Section(id: 3, name: "Enum", size: "4 bytes"),
    Section(id: 4, name: "Function", size: "8 bytes"),
    Section(id: 5, name: "Loops", size: "8 bytes"),
    Section(id: 6, name: "Methods", size: "8 bytes"),
    Section(id: 7, name: "Operations", size: "8 bytes"),
    Section(id: 8, name: "Optional", size: "8 bytes"),
    Section(id: 9, name: "Properties", size: "8 bytes"),
    Section(id: 10, name: "Structure / Classes", size: "8 bytes"),
    Section(id: 11, name: "Type", size: "8 bytes"),
    Section(id: 12, name: "Double", size: "8 bytes"),
  ]

struct ContentView: View {
    var body: some View {
        List(sectionList) { Section in
          HStack {
            Text(Section.name)
            Text(Section.size)
          }
        }
    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

다 만들고 나니 섹션 부분은 헤더? 라는 것으로 대체할 수 있다고 한다. 즉, 컨텐츠 리스트만 만들고 나중에 작업하는게 가능한 것이었다.

JSON 파일 통해서 리스트 구현? 한번 해봐야겠다.