SwiftUI 튜토리얼 [챕터1-기초3-섹션1: 유저가 즐겨찾는 랜드마크 표시]

스위프트 유아이 튜토리얼- 애플 공식 자료 번역

 

챕터1:기초

기초3:유저 인풋(입력) 다루기 (총 6섹션)

랜드마크앱에서, 유저는 즐겨 찾는 장소에 깃발을 꽂을 수 있으며, 리스트를 필터링하여 즐겨찾기만 보여지게 할 수 있다.

이렇게 하려면, 스위치를 리스트에 추가해야 한다. 그러면 유저는 그들의 즐겨찾는 리스트에만 집중할 수 있다.

그다음에, 유저가 좋아하는 랜드마크에 깃발 꽂기 탭을  할 수 있는 별모양 버튼을 추가할 것이다.

 

스타터 프로젝트를 다운로드(아래 프로젝트파일)하고, 이 튜토리얼을 같이 따라 하거나, 

당신이 지금껏 완성한 프로젝트를 열어서 코드를 만들어 보자.

 

https://developer.apple.com/tutorials/swiftui/handling-user-input

Handling User Input | Apple Developer Documentation

---

섹션1

유저가 즐겨 찾는 랜드마크 표시하기

유저에게 그들의 즐겨찾기를 한눈에 보여줄 리스트를 개선시킴으로써 시작한다.

랜드마크 struct에 프로퍼티 하나를 추가하여, 즐겨찾기 랜드마크의 초기상태를 읽는다. 그리고,

별을 각 LandmarkRow에 추가하여, 즐겨찾기 랜드마크를 보여준다.

 

---

스텝1

엑스코드 프로젝트의 스타팅포인트 열기 또는, 지난 튜토리얼에서 완성한 프로젝트를 열어서,

Landmark.swift를 선택해서 연다. (네비게이터영역에 있음)

---

스텝2

'isFavorite 프로퍼티'를 랜드마크 struct에 추가한다.

-landmarkData.json 파일은 각 랜드마크의 이름에 대한 키를 가진다.

왜냐하면 랜드마크는 Codable 형식에 맞추기 때문이며, 그 키와 동일한 이름으로 새로운 프로퍼티를 만듦으로써,

그 키와 관련이 된 값으로 읽을 수 있다.

---

스텝3

LandmarkRow.swift를 선택한다. (네비게이터영역에 있음)

---

스텝4

Spacer() 밑에, if 조건문 안에, 별모양 이미지를 추가해서, 현재 랜드마크 상태가 즐겨찾기 상태인지 확인한다.

-SwiftUI블록 안에, if 조건을 사용하면, 조건적으로 뷰를 포함할 수 있다.

---

스텝5

시스템의 이미지는 벡터 기반이므로, 

foregroundColor(_: ) 모디파이어를 사용해서 색상을 바꿀 수 있다.

-이 별은 랜드마크의 isFavorite프로퍼티가 true 일 때, 보인다.

이 튜토리얼 후반에 프로퍼티를 수정하는 방법을 볼 수 있을 것이다.

 

섹션1 완료

다음섹션 2

https://ingodwelove.tistory.com/21

SwiftUI 튜토리얼 [챕터1-기초3-섹션2: 리스트 필터링 하기]