[SwiftUI] List 리스트 기초 - 멀티 디바이스

▼ 다음과 같이 Person 데이터 구조체와 staff 라는 Person 배열을 생성합니다. 그리고 view에 ForEach 구문을 통해서 리스트를 표현해줍니다. 그럼 간단한 리스트를 확인할 수 있습니다.

List

---

 

 

 

▼ 이제 VStack와 HStack을 이용해서 이름뿐만 아니라 전화번호 그리고 전화기 모양의 아이콘을 리스트로 표현합니다. 그밖에 옵션으로 텍스트 색상과 폰트를 설정해줍니다.

List Stack 구조

---

 

 

 

▼ 위의 코드도 잘 동작하긴 하지만 view 안쪽에 많은 코드가 들어가서 보기가 좋지 않습니다. 다음과 같이 PersonRowView 라는 해당 Row를 표현하는 새로운 뷰를 만들어줍니다.

 

 

 

▼ 이제 뷰를 재사용해서 좀 더 단순하게 표현할 수 있습니다.

 

 

 

▼ List에 그룹을 만들어보겠습니다. 우선 더 이상 staff 배열은 사용하지 않게되므로 제거합니다.

 

 

 

▼ 새롭게 Department, Company 구조체를 선언하고 company 라는 데이터를 새로 만듭니다. Department에는 부서명과 Person 객체가 배열로 포함됩니다.

 

 

 

▼ 이제 다음과 같이 코드를 변경해줍니다. ForEach가 2번 중첩되는 구조입니다.

리스트(List) 섹션

---

 

 

 

▼ 다음은 디테일 화면을 보여주기 위해서 네비게이션 뷰를 새로 추가합니다. 잊지 말고 navigationTitle을 꼭 작성합니다. NavigationView의 경우 그냥 List 뷰를 감싸기만 하면 됩니다.

 

 

 

▼ 이동에 필요한 디테일 뷰인 PersonDetailView를 생성해줍니다.

 

 

 

▼ NavigationLink 를 추가해서 destination에 PersonDetailView를 파라미터로 포함합니다. 디테일 화면으로 이동한 모습입니다. UIKit의 내비게이션 컨트롤러처럼 상단에 뒤로 가기 버튼을 눌러서 메인으로 이동할 수 있습니다.

PersonDetailView 디테일 화면

---

 

 

 

▼ 만약 macOS 용으로 빌드하면 다음과 같은 화면을 볼 수 있습니다. 그런데 아직 선택한 아이템이 없으면 디테일 화면이 텅 비 여보입니다. 때문에 다음 코드를 추가해줍니다. (Placeholder 부분)

macOS

---

 

 

 

▼ 마지막으로 아이패드에서 보여지는 모습과 최종 코드 전체입니다. UIKit에 SplitViewController와 똑같습니다.

iPad 가로모드

---

 

 

 

iPad 세로모드

---