見出し画像

Swiftで行こう!--SwiftUIで行こう!4

Handling User Input編をやって行きます。やる前にはこの章の実行ファイルをダウンロードしてそれを改変、追加して行きます。

まず、 リストの各項目についてLandmarkRow.swiftをさわって行きます。favorite、お気に入りに星マークがつくようにします。

すでにLandmark.swiftにはisFavoriteというプロパティが追加してあります。これを使って行きます。

      Spacer()
          
      if landmark.isFavorite {
               Image(systemName: "star.fill")
                   .imageScale(.medium)
            .foregroundColor(.yellow)

こんな感じで画像の方も処理するコードを追加します。画像の名前、大きさ、色を指定します。

次にこのお気に入りをついたものについてフィルターがかかるようにして行きます。星マークのみ表示されるようにします。

LandmarkList.swiftに追記して行きます。

@State var showFavoritesOnly = false

を追記します。ここで@Stateですが、

再レンダリングということらしいです。そして、

List(landmarkData) { landmark in
               if !self.showFavoritesOnly || landmark.isFavorite {
                   NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
                       LandmarkRow(landmark: landmark)
                   }
               }
           }
if !self.showFavoritesOnly || landmark.isFavorite {
NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
LandmarkRow(landmark: landmark)

を追加してます。

次にボタンをつけて行きます。ボタンをオンオフすることで表示を変えることができます。まず、

@State var showFavaritesOnly = true

false だったところをtrueに変えます

 List {
          ForEach(landmarkData) { landmark in
           if !self.showFavoritesOnly || landmark.isFavorite {
                NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
                LandmarkRow(landmark: landmark)
           }

ForEachを使う形に変更します。そして

 List {
         Toggle(isOn: $showFavoritesOnly) {
            Text("Favorites only")
          }
Toggle(isOn: $showFavoritesOnly) {
Text("Favorites only")

このコードを付け加えることで、ボタンが追加されます。注意点は

isOn: $showFavoritesOnly

のように変数の前に"$"をつけることです。

ボタンでフィルタがかけられるようになりました!

この記事が気に入ったらサポートをしてみませんか?