Créer une application SwiftUI Animal Crossing (Partie 2)

Online Coding Courses for Kids

Maintenant que nous avons une compréhension assez précise de notre modèle de vue, commençons la vue:

struct ItemsListView: View {
@ObservedObject var viewModel: ItemsViewModel
@State private var showSortSheet = false
@State private var itemRowsDisplayMode: ItemRowView.DisplayMode = .large

Comme indiqué dans notre étude de cas sur l’écran, nous aurons besoin de quelques éléments en plus de notre modèle de vue. le showShortSheet l’état garde une trace de la feuille de tri. Nous allons le régler sur true plus tard, lorsque le bouton de tri sera tapé. Et le itemRowsDisplayMode garde une trace du mode d’affichage actuel des lignes: Compact ou Large.

En plus, nous avons aussi notre ItemsViewModel. Dans le flux actuel de l’application, nous avons un écran de catégorie qui est responsable de la création ItemsListView avec le bon ItemsViewModel, car le parent fournira la catégorie.

Vous pouvez donc imaginer que nous avons un CategoryRowView qui pourrait ressembler à ceci:

Revenons maintenant à notre ItemsListView. Afin d’afficher les éléments appropriés, nous avons une propriété calculée: currentItems. Chaque fois que les propriétés publiées de notre modèle de vue changent, notre corps de vue est calculé et utilise les éléments appropriés en raison de currentItems:

Jetons un coup d’œil au corps de notre View:

Il y a quelques nouveautés ici. Nous utilisons List, car c’est la composante appropriée, que nous avons vue dans notre étude de cas. UNE VStack enveloppé dans un ScrollView ne serait pas le composant approprié à utiliser. Parce que c’est une très longue liste d’articles, nous voulons utiliser List (qui est soutenu par UITableView pour l’instant). Il réutilise ses lignes et les supprime uniquement en cas de besoin (lorsqu’il est sur le point d’être affiché à l’écran).

Je sais que cela peut sembler évident pour presque tous, mais comme SwiftUI permet une liberté totale, ce pourrait être une bonne idée de s’en souvenir.

Comme nous l’avons vu, nous aurons besoin d’un TextField pour la recherche. Comme nous voulons qu’il ressemble à une barre de recherche (et pour une raison quelconque, SwiftUI n’a pas de pont vers UISearchBar), Je l’ai enveloppé dans une vue appelée SearchField.

le SearchField la vue ressemble à ceci:

Avec la puissance de SwiftUI et de ses aperçus, il est très facile d’avoir des vues autonomes et de prévisualiser tous leurs états. Dans ce cas, comme vous pouvez le voir dans la capture d’écran ci-dessus, je prévisualise l’état normal et l’état d’édition.

Les aperçus sont un outil très puissant. Je ne les utilise pas beaucoup, mais pour ces vues autonomes comme notre barre de recherche, il est très logique de les utiliser. Vous pouvez ensuite parcourir rapidement l’interface utilisateur pour vos différents états.

Retour à notre ItemsListView. La partie suivante est l’utilisation de ForEach avec notre propriété calculée, currentItems. Comme je l’ai déjà dit, dès que l’utilisateur déclenche une modification currentItems (parce que l’utilisateur commence une recherche ou trie les articles), cela déclenchera un rechargement de notre corps (parce que notre ItemsViewModel a publié des propriétés). Et donc notre liste montrera toujours les articles corrects et pertinents.

Nous affichons ensuite notre ItemRowView, qui est la vue qui affichera un élément de la liste.

Avec la puissance des aperçus, et parce que nous avons vu dans notre étude de cas que la ligne devrait avoir un mode compact et un grand, nous pouvons afficher les deux à la fois. Très pratique lorsque vous travaillez sur l’interface utilisateur.

Je n’entrerai pas dans trop de détails pour le ItemRowView. Vous pouvez trouver le code sur notre GitHub. Jetez un œil attentif à l’énumération DisplayMode. ItemRowView a une propriété de ce type et la vue parent peut donc décider de son mode d’affichage.

Retour au corps de ItemsListView. Vous remarquerez que nous enroulons notre ligne dans un NavigationLink. Donc, lorsque la ligne est tapée, elle s’ouvre ItemDetailView avec l’élément sélectionné:

NavigationLink(destination: ItemDetailView(item: item)) {
ItemRowView(displayMode: self.itemRowsDisplayMode, item: item)
}
}

Et comme vous pouvez le voir, nous utilisons le courant displayMode de nôtre ItemsListView.

Mais comment change-t-on le mode d’affichage?

Avec la puissance du State wrapper de propriété, nous avons vu plus tôt que nous avons:

@State private var itemRowsDisplayMode: ItemRowView.DisplayMode

Alors maintenant, la partie manquante est de déclencher le changement. Si vous regardez le corps de notre ItemsListView, vous remarquerez quelque chose comme ceci:

.navigationBarItems(trailing: HStack(spacing: 16) { 
layoutButton
sortButton
}
)

Avec ce modificateur sur notre liste, nous ajoutons les deux boutons dont nous avons besoin: le changement de mode d’affichage et les boutons de tri à la barre de navigation de notre vue actuelle.

Jetons un œil au code de nos deux vues calculées, layoutButton et sortButton:

Chaque fois que vous avez l’impression que le corps de votre vue est bouché, n’hésitez pas à extraire une partie de votre vue en tant que propriétés calculées ou à créer une nouvelle structure de vue. Votre corps doit toujours rester petit et lisible. Il est beaucoup plus facile et plus rapide de créer des composants / vues autonomes dans SwiftUI que dans UIKit.

Les actions de ces deux boutons sont assez simples. le sortButton basculera le Bool qui contrôle notre feuille de tri, et si vous regardez notre corps de vue, nous avons cette ligne:

.actionSheet(isPresented: $showSortSheet, content: { self.sortSheet })

Il présentera donc le ActionSheet calculé par la propriété sortSheet, qui ressemble à ceci:

Il construit et retourne notre tri ActionSheet. Et chaque fois que nous sélectionnons une action dans ce ActionSheet, cela définira le tri sur notre ItemsViewModel, qui définira notre sortedItems propriété publiée dans ce modèle de vue et déclencher une mise à jour sur notre currentItems. Et là, vous avez votre logique de tri.

le layoutButton est beaucoup plus simple. Cela change juste le courant displayMode à l’autre. Il déclenchera une mise à jour de toutes nos lignes et les affichera dans le nouveau mode d’affichage.

Et c’est tout. Voici un aperçu de l’ensemble ItemsListView pour référence:

Close Menu