セクション 101

ユーザのお気に入りのランドマークをマークする

リストを拡張して、ユーザのお気に入りを一目で確認できるようにすることから始めます。Landmark 構造体にプロパティを追加して、ランドマークの初期状態をお気に入りとして読み取り、お気に入りのランドマークを表示する各 LandmarkRow に星を追加します。

ステップ 1

開始点の Xcode プロジェクトまたは前のチュートリアルで終了したプロジェクトを開き、プロジェクトナビゲータで Landmark.swift を選択します。

ステップ 2

Landmark 構造体に isFavorite プロパティを追加します。

landmarkData.json ファイルには、ランドマークごとにこの名前のキーがあります。Landmark は Codable に準拠しているため、キーと同じ名前で新しいプロパティを作成することにより、キーに関連した値を読み取ることができます。

    Landmark.swift

9. var state: String
10. var description: String
var isFavorite: Bool
12. private var imageName: String

ステップ 3

プロジェクトナビゲータで LandmarkRow.swift を選択します。

    LandmarkRow.swift

1. import SwiftUI
3. struct LandmarkRow: View {
4. var landmark: Landmark
6. var body: some View {
7. HStack {
8. landmark.image
9. .resizable()
10. .frame(width: 50, height: 50)
11. Text(landmark.name)
13. Spacer()
14. }
15. }
16. }
18. struct LandmarkRow_Previews: PreviewProvider {
19. static var previews: some View {
20. Group {
21. LandmarkRow(landmark: landmarks[0])
22. LandmarkRow(landmark: landmarks[1])
23. }
24. .previewLayout(.fixed(width: 300, height: 70))
25. }
26. }

ステップ 4

スペーサーの後に、if 文内に星の画像を追加して、現在のランドマークがお気に入りかどうかをテストします。

SwiftUI ブロックでは、if 文を使用して条件付きでビューを含めます。

    LandmarkRow.swift

13. Spacer()
if landmark.isFavorite {
Image(systemName: "star.fill")
}
14. }
15. }

ステップ 5

システムイメージはベクターを基礎にするため、foregroundColor(_:) 修飾子を使用して色を変更できます。

ランドマークの isFavorite プロパティが true の場合は常に、星がある事になります。このチュートリアルの後半で、そのプロパティを変更する方法を説明し ます。

15. if landmark.isFavorite {
16. Image(systemName: "star.fill")
.foregroundColor(.yellow)
17. }