セクション 106

ランドマークごとにお気に入りのボタンを作成する




ランドマークアプリは、ランドマークのフィルタリングされたビューとフィルタリングされていないビューを切り替えることができるようになりましたが、お気に入りのランドマークのリストは引き続きハードコーディングされています。ユーザがお気に入りを追加および削除できるようにするには、ランドマークの詳細ビューにお気に入りボタンを追加する必要があります。











まず、再利用可能な FavoriteButton を作成します。




ステップ 1

FavoriteButton.swift という新しいビューを作成します。




    FavoriteButton.swift



1. import SwiftUI
3. struct FavoriteButton: View {
4. var body: some View {
5. Text("Hello, World!")
6. }
7. }
9. struct FavoriteButton_Previews: PreviewProvider {
10. static var previews: some View {
11. FavoriteButton()
12. }
13. }





ステップ 2

ボタンの現在の状態を示す isSet 結束変数を追加し、プレビューに定数値を提供します。




---




結束変数を使用するため、このビュー内で行われた変更はデータソースに逆に伝播されます。





    FavoriteButton.swift



3. struct FavoriteButton: View {
@Binding var isSet: Bool
4. var body: some View {
5. Text("Hello, World!")




ステップ 3

isSet の状態を切り替え、状態に基づいてその外観を変更するアクションを使用する Button を作成します。






    FavoriteButton.swift



6. var body: some View {
Button(action: {
isSet.toggle()
}) {
Image(systemName: isSet ? "star.fill" : "star")
.foregroundColor(isSet ? Color.yellow : Color.gray)
}
7. }
8. }





プロジェクトが大きくなるにつれて、階層を追加することをお勧めします。先に進む前に、さらにいくつかのグループを作成します。






ステップ 4

汎用の CircleImage.swift、MapView.swift、および FavoriteButton.swift を Helpers グループに集め、landmark ビューを Landmarks グループに集めます。












次に、FavoriteButton を詳細ビューに追加し、ボタンの isSet プロパティを与えられたランドマークの isFavorite プロパティに結束します。






ステップ 5

LandmarkDetail.swift に切り替え、入力されたランドマークのインデックスをモデルデータと比較して計算します。




---




これをサポートするには、環境のモデルデータにもアクセスする必要があります。




    LandmarkDetail.swift



3. struct LandmarkDetail: View {
@EnvironmentObject var modelData: ModelData
4. var landmark: Landmark




ステップ 6

新しい FavoriteButton を使用してランドマークの名前を HStack に埋め込みます。ドル記号 ($) を使用して isFavorite プロパティへの結束を提供します。




---




modelData オブジェクトで landmarkIndex を使用して、ボタンがモデルオブジェクトに格納されているランドマークの isFavorite プロパティを更新するようにします。




    LandmarkDetail.swift



22. VStack(alignment: .leading) {
HStack {
Text(landmark.name)
.font(.title)
.foregroundColor(.primary)
FavoriteButton(isSet: $modelData.landmarks[landmarkIndex].isFavorite)
}
24. HStack {





ステップ 7

LandmarkList.swift に戻り、ライブプレビューをオンにします。




---




リストから詳細に移動してボタンをタップすると、リストに戻ってもこれらの変更は保持されます。両方のビューが環境 (environment) 内の同じモデルオブジェクトにアクセスするため、2 つのビューは一貫性を維持します。

あなたの理解度をチェックしてください

質問 1

以下のうち、ビュー階層でデータを下向きに渡すのはどちらですか？

質問 2

結束の役割とは何ですか？

質問 3

ビューの状態を作成する正しい方法はどれですか？

次

パスとシェイプの描画

ユーザは、リスト内のランドマークを訪れるたびにバッジを受け取ります。もちろん、ユーザがバッジを受け取るには、バッジを作成する必要があります。このチュートリアルでは、パス (path) とシェイプを組み合わせてバッジを作成し、その場所を表す別のシェイプと重なるプロセスについて説明します。




さあ始めましょう











セクション 1	セクション 2	セクション 3
セクション 4	セクション 5	セクション 6
セクション 101	セクション 102	セクション 103
セクション 104	セクション 105	セクション 106