セクション 102

リストビューをフィルタリングする

リストビューをカスタマイズして、すべてのランドマーク、またはユーザのお気に入りだけを表示することができます。これを行うには、 LandmarkList 型に状態を少しだけ追加する必要があります。

状態は、時間の経過とともに変化する可能性があり、ビューの動作、コンテンツ、またはレイアウトに影響を与える値または値のセットです。 @State 属性を持つプロパティを使用して、ビューに状態を追加します。

ステップ 1

プロジェクトナビゲータで LandmarkList.swift を選択して、プレビューを元に戻し、リストの 1 つのバージョンのみを表示します。

    LandmarkList.swift

16. struct LandmarkList_Previews: PreviewProvider {
17. static var previews: some View {
LandmarkList()
18. }
19. }

ステップ 2

初期値を false に設定して showFavoritesOnly という @State プロパティを追加します。

状態プロパティを使用して、ビューとそのサブビューに固有の情報を保持するため、常に状態を private として作成して下さい。

    LandmarkList.swift

3. struct LandmarkList: View {
@State private var showFavoritesOnly = false
4. var body: some View {
5. NavigationView {

ステップ 3

[Resume(再開)] をクリックして、キャンバスを更新します。

プロパティの追加や変更など、ビューの構造体に変更を加える場合は、キャンバスを手動で更新する必要があります。

ステップ 4

showFavoritesOnly プロパティと各 landmark.isFavorite 値を確認して、ランドマークリストのフィルタリングされたバージョンを計算します。

    LandmarkList.swift

4. struct LandmarkList: View {
5. @State private var showFavoritesOnly = false
var filteredLandmarks: [Landmark] {
landmarks.filter { landmark in
(!showFavoritesOnly || landmark.isFavorite)
}
}
6. var body: some View {
7. NavigationView {

ステップ 5

List 内のランドマークのリストのフィルタリングされたバージョンを使用します。

    LandmarkList.swift

12. var body: some View {
13. NavigationView {
List(filteredLandmarks) { landmark in
14. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
15. LandmarkRow(landmark: landmark)

ステップ 6

showFavoritesOnly の初期値を true に変更して、リストがどのように反応するかを確認しましょう。

    LandmarkList.swift

3. struct LandmarkList: View {
@State private var showFavoritesOnly = true
5. var filteredLandmarks: [Landmark] {