SwiftUI Tutorials - Handling User Input 1

Apple Developer Documentation

Mark the User’s Favorite Landmarks

Favorite、お気に入りに星マークをつけることができるようにします。

Landmark.swift

変数を追加します。これで"isFavorite"のデータを取得できるようにします。

var isFavorite: Bool

Jsonファイルには以下のようにデータが入っています。

"name": "Turtle Rock",
"category": "Rivers",
"city": "Twentynine Palms",
"state": "California",
"id": 1001,
"isFeatured": true,
"isFavorite": true,
"park": "Joshua Tree National Park",
"coordinates": {
"longitude": -116.166868,
"latitude": 34.011286

"isFavorite"についてもありますので変数追加してプロパティとして定義すればデータが取得することができます。

構造体"LandmarkRow"に以下のように追加します。

HStack {
           landmark.image
               .resizable()
               .frame(width: 50, height: 50)
           Text(landmark.name)
           Spacer()
           
           if landmark.isFavorite {
               Image(systemName: "star.fill")
               .foregroundColor(.yellow)
           }
       }

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

これで、"isFavorite "が"true"の時はSF Symbleの黄色の"star.fill"が表示されるということになります。

Filter the List View

フィルター処理をしてFavoriteで星マークがついたものだけリストに表示するようにします。@State propertyを追加します。

 @State private var showFavoritesOnly = false

そしてフィルターで選択する仕組みを作ります。

   var filteredLandmarks: [Landmark] {
       landmarks.filter { landmark in
           (!showFavoritesOnly || landmark.isFavorite)
       }
   }

変数"showFavoritesOnly" の真偽で表示を変えます。"true"であればフィルターが働く仕組みです。

そしてNavigationViewのList()を

List(landmarks) 　　→　　List(filteredLandmarks)

に変更します。

Add a Control to Toggle the State

作ったフィルターをボタンで使えるようにします。

List {}内に複合的に何かを入れ込む場合(今回はフィルタのトグルスイッチとリスト表示)については配列のようなコレクションタイプものは"ForEach"を使ってデータを表示させます。

List {
           Toggle(isOn: $showFavoritesOnly) {
                  Text("Favorites only")
            }
            
            ForEach(filteredLandmarks) { landmark in
                   NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                       LandmarkRow(landmark: landmark)
                   }
             }
  }

これで表示部分はできました。