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
のように変数の前に"$"をつけることです。
ボタンでフィルタがかけられるようになりました!
この記事が気に入ったらサポートをしてみませんか?