LazyGrid

GridItem

행이나 열을 나타내는, 하나의 grid 아이템

GridItem 인스턴스를 사용하여 LazyVGrid나 LazyHGrid의 레이아웃을 구성

• 각각의 grid item은 spacing, alignment같은 레이아웃 특성을 지정
• Grid는 이 특성을 사용해 열 또는 행의 크기와 위치를 지정

GridItem.Size

• adaptive(minimum:maximum:)
  minimum과 maximum 사이의 사이즈로 열마다 가능한 많은 아이템들을 배치하고자 할 때 사용
• flexible(minimum:maximum:)
adaptive와 비슷하지만 열마다 배치되는 item의 수를 조절 가능
• fixed
  item의 개수와 크기를 직접 조절 가능

LazyVGrid + LazyHGrid

Lazy키워드에 맞게, 이 Grid view는 아이템이 표시되어야 할 때 생성한다.
아이템은 각 Grid View의 방향에 맞게 추가된다.
(V는 아래로, H는 오른쪽으로)

Initializer (LazyVGrid)

init(columns: [GridItem], 
     alignment: HorizontalAlignment = .center, 
     spacing: CGFloat? = nil, 
     pinnedViews: PinnedScrollableViews = .init(), 
     content: () -> Content)

• columns
  Grid Item들의 배열이며, 각 행의 크기와 위치를 나타낸다.
  • LazyHStack의 경우 이 파라미터가 rows이다.
• alignment
  상위 뷰로부터의 정렬을 나타낸다.
• spacing
  Grid와 상위 뷰의 다음 아이템과의 간격을 나타낸다.
• pinnedViews
  상위 ScrollView의 경계에 고정할 뷰

ForEach

struct ForEach<Data, ID, Content> 
    where Data : RandomAccessCollection, ID : Hashable

Identified한 데이터 컬렉션으로부터 필요에 따라 View를 계산하는 구조체

Overview

• RandomAccessCollection에 기반을 둔 뷰를 제공
• Identifiable 프로토콜을 채택하거나, 구별 가능한 Key Path를 제공해야 함

Section

특정 컬렉션 뷰에 계층을 추가할 때 사용하는 뷰

• List, Picker, Form과 같은 리스트를 표시하는 뷰에서 내용을 Section으로 구분 가능
• 각 섹션에는 개발자가 각각의 인스턴스를 제공해야 함
• Header와 Footer를 제공 가능

List

struct List<SelectionValue, Content> 
    where SelectionValue : Hashable, Content : View

하나의 열에 데이터를 표시하는 컨테이너로, 선택적으로 하나 이상의 뷰를 선택할 수 있는 컨테이너

Overview

• 리스트에 들어갈 뷰들을 모두 선언하여 정적인 리스트를 구현 가능

  List {
      Text("First Item")
      Text("Second Item")
      Text("Third Item")
  }

• 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")
  ]
  
  var body: some View {
      List(oceans) {
          Text($0.name)
      }
  }

• 생성자의 selection:에 바인딩 가능한 프로퍼티를 넣어 리스트 아이템을 선택 가능

  • 바인딩 가능한 프로퍼티가 Set이면 다중 선택 가능
  • iOS와 tvOS에서는 명시적으로 edit 모드를 넣어줘야 선택이 가능

• 기본 refresh control로 데이터를 다시 불러오려면, refreshable(action:) 수정자를 추가

  • action에서 데이터를 다시 불러올 때 await을 사용

• 다중 섹션을 구현하려면 리스트에 Section 인스턴스를 추가

  List {
      ForEach(...) { _ in
          Section(...) {
              ...
          }
      }
  }

• 계층 구조를 구현하려면 트리 형태의 데이터를 제공하고, children 파라미터에 하위 노드의 Key Path를 제공해야 함

• listStyle(_:) 수정자를 추가하여 리스트의 스타일을 변경 가능 (스타일은 UIKit의 UITableViewController의 스타일과 비슷하게 insetGrouped 등이 있다.)

ScrollView

struct ScrollView<Content> where Content : View

스크롤 가능한 뷰 (?)

Overview

• 스크롤 가능한 영역에 내용을 표시
• 플랫폼에 맞는 스크롤 제스처를 수행 시 컨텐츠에서 표시되는 부분을 조정
• 수평, 수직, 또는 둘 다 가능하지만 줌은 불가능
• 코드 상에서 스크롤을 구현하려면 ScrollViewReader와 함께 하나 이상의 ScrollView로 Wrap

Form

설정 및 인스펙터와 같이 데이터 입력에 사용되는 컨트롤들을 그룹화하는 컨테이너

Overview

• SwiftUI는 폼 내부의 뷰를 플랫폼에 적합한 스타일을 적용해 그룹화
• 버튼, 토글, 레이블, 리스트 등에 적용

Group

GroupBox

DisclosureGroup