XCode 12.4 日本語化計画：Swift Tutorials

セクション 6

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




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




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




ステップ 1

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





ステップ 2

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




---




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














ステップ 3

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






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






ステップ 4

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










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










ステップ 5

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




---




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






















































ステップ 6

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




---




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




ステップ 7

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




---




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

    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. }

    FavoriteButton.swift

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

上記のリストで 7 行目に以下のように書き足します。

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

    LandmarkDetail.swift

1. import SwiftUI
3. struct LandmarkDetail: View {
@EnvironmentObject var modelData: ModelData
4. var landmark: Landmark
var landmarkIndex: Int {
modelData.landmarks.firstIndex(where: { $0.id == landmark.id })!
}
6. var body: some View {
7. ScrollView {
8. MapView(coordinate: landmark.locationCoordinate)
9. .ignoresSafeArea(edges: .top)
10. .frame(height: 300)
12. CircleImage(image: landmark.image)
13. .offset(y: -130)
14. .padding(.bottom, -130)
16. VStack(alignment: .leading) {
17. Text(landmark.name)
18. .font(.title)
19. .foregroundColor(.primary)
21. HStack {
22. Text(landmark.park)
23. Spacer()
24. Text(landmark.state)
25. }
26. .font(.subheadline)
27. .foregroundColor(.secondary)
29. Divider()
31. Text("About \(landmark.name)")
32. .font(.title2)
33. Text(landmark.description)
34. }
35. .padding()
36. }
37. .navigationTitle(landmark.name)
38. .navigationBarTitleDisplayMode(.inline)
39. }
40. }
42. struct LandmarkDetail_Previews: PreviewProvider {
static let modelData = ModelData()
43. static var previews: some View {
LandmarkDetail(landmark: modelData.landmarks[0])
.environmentObject(modelData)
44. }
45. }

上記のリストの 22 行目以下をこのように書き換えます。

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

次

パスとシェイプの描画

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




さあ始めましょう