Par défaut, Xcode affiche le canevas en mode clair et en position verticale. La taille du texte est fixée à l'aide du type dynamique large.
Différentes techniques permettent d'ajuster les options du canevas.
Dans cette fiche :
Les icônes au bas de la zone du canevas permettent de modifier l'apparence du canevas sans avoir à modifier le code.
L'icône (en forme de deux commutateurs superposés) permet de modifier l'apparence du canevas présentement affiché.
Voici un aperçu de configurations possibles.
L'icône (en forme de damier) permet d'afficher plusieurs canevas dans différentes variantes.
Notez que pour revenir à l'affichage d'un seul canevas, il faut cliquer sur l'icône (en forme de flèche), lui aussi au bas de la zone du canevas.
Voici un aperçu de configurations possibles.
Il est possible de combiner différentes options dans et dans afin de répondre à nos besoins, comme dans cet exemple où on a choisi , et .
La section #Preview, généralement présente juste après le code d'une vue, permet elle aussi de configurer comment le ou les canevas seront affichés.
Par défaut, le canevas est affiché en mode clair.
Pour passer au mode sombre :
#Preview {
ContentView().preferredColorScheme(.dark)
}
Par défaut, le canevas est présenté en orientation portrait.
Pour modifier l'orientation, il faut ajouter un paramètre directement sur la ligne #Preview.
#Preview(traits: .landscapeLeft) {
ContentView()
}
Le canevas peut vous montrer l'apparence de votre application avec différentes tailles de police à condition que vous ayez utilisé les types dynamiques, qui permettent à l’application de s’adapter automatiquement à la taille de texte choisie par l’usager dans les réglages de son appareil.
Pour modifier la taille de police dans le canevas :
#Preview {
ContentView().environment(\.dynamicTypeSize, .xxxLarge)
}
Une option est intéressante : on peut définir plusieurs zones #Preview afin de permettre de choisir l'une ou l'autre par un simple clic sur un bouton.
#Preview {
ContentView().preferredColorScheme(.light)
}
#Preview {
ContentView().preferredColorScheme(.dark)
}
Si désiré, on peut donner un nom à chaque bouton.
#Preview("Clair") {
ContentView().preferredColorScheme(.light)
}
#Preview("Sombre") {
ContentView().preferredColorScheme(.dark)
}
« Previewing your app’s interface in Xcode ». Apple Developer. https://developer.apple.com/documentation/xcode/previewing-your-apps-interface-in-xcode
▼Publicité
