SwiftUI 리스트

Posted on | In

개요

여러개를 표현할 때 사용하는 리스트에 대해서 알아보겠다.

애플 공식문서



리스트

하나의 열에 여러개를 나열할 때 사용하는 뷰이다.

VStack과 다른 점은 단순히 뷰를 배치하는 것이 아니라 구분선을 통해 리스트 형식으로 표현해준다.


정적 컨텐츠

아래의 예시처럼 원하는 뷰를 전달하면 로우로 담아서 표현한다.

1
2
3
4
5
6
List {
  Text("1")
  Text("2")
  Text("3")
  Text("4")
}


동적 컨텐츠

수가 정해진 것이 아니라 언제든지 추가되고 삭제될 수 있는 경우로 이 방법을 많이 사용한다.


Range<Int>

A…B, A… , …A와 같은 것은 안된다.

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

RandomAccessCollection

데이터의 각 요소들을 구분할 수 있는 id값을 제공해야한다.

id값을 제공하는 방법은 2가지가 있다.

  • id 식별자 지정 : 직접 인수로 제공하고, id는 self로 명시해준다.
  • identifiable : 사용자가 정의한 타입을 Identifiable 프로토콜을 채택한다.
1
2
3
4
5
6
7
8
9
//id 식별자 지정
List([1, 2, 3, 4, 5], id : \.self) {...}

//identifiable
struct Animal: Indentifiable {
  let id =UUID()
  ...
}
List([Animal(name: "mungmung"), Animal(name: "miyao")]) { ... }


동적과 정적의 조합

ForEach를 사용하면 된다.

ForEach는 리스트처럼 데이터를 받아서 동적으로 뷰를 생성하는 역할을 한다.

아래의 두 코드는 같다.

1
2
3
4
5
6
7
8
9
List(0..<50) {
  Text("\($0)")
}

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

그러므로 일반 리스트로 선언하고 정적 데이터, 동적 데이터를 원하는대로 써주면 된다.

1
2
3
4
5
6
List {
  Text("num")
  ForEach(0..<50) {
    Text("\($0)")
  }
}



섹션

애플 공식문서

리스트는 섹션으로 이용해 데이터를 그룹화 할 수 있다.

struct Section<Parent, Content, Footer> { }



ListStyle

  • DefaultListStyle : 리스트 기본 스타일
  • PlainListStyle : 데이터 목록을 각 행마다 하나씩 나열하는 형태의 기본 스타일
  • GroupedListStyle : 섹션을 분리된 그룹으로 묶어서 표현한다. 환경에 따라 grouped와 insetGrouped중에 선택된다.



Form

Form { ... }형태로 사용하며 iOS 기준 List { ... }.listStyle(GroupedListStyle())과 같다.

Form의 특징은 각 운영체제에 따라서 리스트를 적용해준다는 것이다.