SwiftUI Series 03｜Dépannage des problèmes de mise en page courants lorsque la page « semble un peu mauvaise »

De nombreux problèmes avec les pages SwiftUI sont subtils :

• Appelez-le mal, ce n’est visiblement pas cassé.
• Disons que c’est vrai. Cela a l’air un peu pire.

Les sentiments courants incluent :

• La carte semble un peu flottante
• Il existe une relation étrange entre le texte et les icônes
• L’espacement semble instable
• Certaines zones semblent toujours bondées ou vides

Ce type de problème est très probablement confondu avec « une esthétique insuffisante » ou « le design ne semble pas correct ». Mais bien souvent, il s’agit essentiellement d’un problème de mise en page, simplement :

La structure, l’attribution de l’espace et le rythme visuel sont-ils alignés au même niveau ?

1. De nombreuses pages qui « semblent un peu mauvaises » sont en fait dues au fait que la structure principale n’est pas stable.

La raison pour laquelle certaines pages semblent toujours gênantes est qu’en surface, il semble qu’un certain padding manque, mais en réalité, plus près de la structure principale elle-même, il est un peu flou.

Par exemple, si un blocage de carte est également responsable de :

• Disposition de l’axe principal du contenu
• alignement local
• Superposition décorative
• Correction de l’espacement

Au final il est très simple de devenir :

• peut être affiché logiquement
• C’est toujours un peu dispersé visuellement

La raison est simple : Lorsqu’une couche de mise en page est responsable de trop de choses, les réglages locaux continueront d’affecter la structure globale.

2. Le problème le plus courant est que les responsabilités hiérarchiques sont mixtes.

De nombreuses pages pourraient ressembler à ceci :

• Couche extérieure VStack
• Ceux du milieu HStack
• Ajoutez padding à chaque couche
• Mélangez encore un peu de Spacer
• Au final, si vous ne l’aimez pas, ajoutez un autre frame

Le problème avec cette façon d’écrire n’est pas nécessairement une erreur, mais plutôt un manque de clarté dans les responsabilités hiérarchiques. C’est difficile à dire :

• Quelle couche est responsable de la structure du contenu
• Quelle couche est responsable de l’alignement local -Quelle couche n’est qu’une décoration visuelle

Une fois ces éléments mélangés dans le même calque, la page peut facilement entrer dans un état : Chaque ajustement semble raisonnable, mais le tout devient de plus en plus difficile à stabiliser.

3. Les pages visuellement « instables » sont souvent causées par des systèmes d’espacement instables.

Il s’agit d’un problème à très haute fréquence.

De nombreuses pages ne semblent pas haut de gamme. En surface, ils ressemblent à des couleurs ou à des polices de caractères, mais en réalité, ils sont plus proches d’un espacement et d’un rythme incohérents :

• 12 entre A et B
• entre B et C 18
• Entre C et D ça redevient 14

Si ces différences n’ont pas de sémantique claire et sont simplement inventées au fur et à mesure que vous écrivez, la page manquera de rythme.

Ainsi, pour de nombreuses pages qui « semblent mauvaises », ce que vous devez vraiment vérifier n’est pas :

• Manque-t-il encore une cloison ici ?

Au lieu de cela :

• Si le rythme vertical entre les blocs d’informations du même type est cohérent
• Existe-t-il une hiérarchie stable entre le titre principal, le sous-titre et le texte explicatif ?
• Si les marges intérieures et extérieures de la carte suivent le même ensemble de dimensions

SwiftUI permet aux gens de construire rapidement une structure, mais sans un rythme spatial stable, la page sera toujours dans un état « la fonction est bonne, mais le tempérament est faux ».

4. Le texte rend souvent la page « pire »

Parce que le texte est l’élément qui indique le plus facilement si la logique de mise en page est stable.

Les questions fréquemment posées incluent :

• Si le titre est trop long, cela déformera la structure globale.
• Le sous-titre est déséquilibré après un retour à la ligne
• Relation de base non naturelle entre l’icône et le texte
• Le contrôle de la largeur des différents blocs de texte est incohérent

Ces questions ne sont généralement pas décidées à l’avance :

• Qui a la priorité de texte la plus élevée ?
• Quelle doit être la largeur du texte ?
• Si la mise en page est toujours stable lorsqu’il y a plusieurs lignes

Une fois qu’une page semble normale uniquement dans des « conditions de copie courte », le contenu réel sera révélé dès son arrivée.

5. Plus la mélodie devient, plus elle devient chaotique.

Parce qu’il s’agit d’« apparences » et non de « causes structurelles ».

Par exemple, lorsque quelque chose sur la page ne satisfait pas vos yeux, il est facile de :

• Ajouter un autre padding
• Ajouter un autre Spacer
• Définir un autre frame

Bien sûr, cela peut être plus agréable à regarder à court terme, mais si vous ne regardez pas en arrière et ne vous demandez pas :

• Quel étage devrait être responsable de l’attribution de l’espace ici ?
• Cette réparation élimine-t-elle simplement des problèmes structurels ?

À l’avenir, nous nous appuierons de plus en plus sur des correctifs locaux plutôt que sur la structure elle-même.

La raison pour laquelle les pages SwiftUI sont faciles à « devenir plus étranges à mesure qu’elles changent » est en grande partie parce qu’elles rendent les modifications locales particulièrement faciles.

6. Une séquence de dépannage plus efficace

Si une page SwiftUI « semble mauvaise », je vérifie généralement dans cet ordre :

1. Si la couche structurelle principale est claire.
2. Si l’espacement entre les blocs d’informations au même niveau est uniforme.
3. Le texte est-il stable dans le contenu long, le contenu court et les lignes multiples ?
4. Quels modificateurs sont structurels et lesquels ne sont que des post-correctifs.
5. Si une correction locale perturbe le rythme global.

Cette commande présente des avantages : Il s’agit de demander : « Quel niveau de responsabilité a été mélangé ? »

7. Conclusion : De nombreuses pages ne sont « pas avancées » car le niveau de mise en page et le rythme ne sont pas unifiés.

Pour le dire sous une forme plus courte, je dirais :

Les pages SwiftUI « ont toujours l’air un peu moins bonnes » et semblent souvent incompétentes en matière d’écriture d’interfaces. En effet, le niveau d’aménagement, l’attribution de l’espace et le rythme visuel ne sont pas traités comme un système.

Par conséquent, la méthode de réforme la plus efficace consiste généralement à regarder en arrière et à examiner :

• La structure principale est-elle debout ?
• Si l’espacement a un rythme cohérent
• Si le texte et le contenu restent stables sous des données réelles

Une fois ces trois éléments devenus clairs, le tempérament de la page s’améliore généralement de manière significative.