SwiftUI est un nouveau moyen pratique de créer des interfaces utilisateur sur Xcode. Si vous souhaitez une introduction rapide à SwiftUI, cet article de blog est fait pour vous.
Pour commencer, créons un projet avec le support SwiftUI. La configuration minimale requise pour cela est macOS Catalina et Xcode 11. Créez un nouveau projet
«Fichier> Nouveau> Projet ...» , sélectionnez
«Application vue unique» et assurez-vous que
«Interface utilisateur: SwiftUI» est sélectionné .
Le projet ressemblera à ceci:
Comme vous l'avez peut-être remarqué, vous pouvez maintenant voir toutes les modifications immédiatement sur l'
aperçu . Par exemple, essayez de changer le texte en
«Bonjour, Habr!» . Cool oui?
S'il n'y a aucun changement, cliquez sur le bouton
Reprendre (dans le coin supérieur droit). Si l'
aperçu n'est pas visible - cliquez sur les
options de l'éditeur et assurez-vous que
Canvas est sélectionné
(⌥Options + ⌘Commande + ↵Enter) .
Affichage, texte, pile ...
Si vous sélectionnez
ContentView.swift , nous verrons:
struct ContentView: View { var body: some View { Text(", !") } }
Ici, nous voyons que le
corps ContentView> a un
texte qui affiche
"Bonjour, Habr!" . Ajoutons un autre texte. Si vous essayez d'ajouter directement à la
vue du
corps , Xcode jurera. Pour ce faire, utilisez d'abord
HStack ou
VStack . Appuyez sur
Commande et cliquez sur
Texte (⌘Commande + Texte) , puis sélectionnez
«Intégrer dans HStack» .
Cette commande créera automatiquement un
HStack et y ajoutera notre texte. Vous pouvez maintenant ajouter un autre texte:
struct ContentView: View { var body: some View { HStack { Text(",") Text("!") } } }
Inspecteur Swiftui
Si vous cliquez sur
"⌘Commande + Texte" et sélectionnez
"Afficher l'inspecteur SwiftUI ..." , un inspecteur s'ouvrira où vous pourrez modifier visuellement les propriétés du texte. Par exemple, si dans l'inspecteur
«Police» a été changé en
«Grand titre» , le code changera également en
.font (.largeTitle) . Très simple:
Qu'est-ce que l' État ?
Pour comprendre ce qu'est l'
État , ajoutons une action. Nous répétons ce que nous avons fait auparavant:
«⌘Commande + HStack» , sélectionnez
«Intégrer dans VStack» , puis ajoutez Button à ce
VStack :
struct ContentView: View { @State var tapCount = 0 var body: some View { VStack { HStack { Text(",") .font(.largeTitle) .foregroundColor(Color.green) Text("!") .font(.largeTitle) .fontWeight(.bold) } Button(action: { self.tapCount += 1 }) { Text("Tap count \(tapCount)") .font(.title) } } } }
Chaque fois que vous cliquez sur le bouton, nous modifions la valeur de
tapCount . Mais que signifie
État ? Si nous voulons que notre
point de vue soit à nouveau rendu lorsque certaines valeurs changent, nous devons utiliser
State . Dans ce cas, lorsque nous cliquons sur le bouton, nous modifions le
tapCount , qui est désigné comme
État . C'est pourquoi à chaque clic, notre
corps est à nouveau rendu.
Aperçu en direct
Pour le moment, si vous cliquez sur le bouton, rien ne se passe. Pour résoudre ce problème et fonctionner comme un simulateur, vous devez activer
«Live Preview» . Le bouton d'activation est situé en bas à droite:
Maintenant réessayez. Chaque fois que vous appuyez sur le bouton, la valeur change.
Et ensuite?
Vous avez maintenant le concept de base de SwiftUI. De plus, je vous conseille de lire les
tutoriels SwiftUI , de regarder une
vidéo WWDC sur SwiftUI . La documentation se trouve
ici .
Le lien vers le projet github est
ici .