Bases de Text et Column

La chose la plus simple à afficher avec Compose est du texte. Le composable Text dessine une chaîne de caractères à l'écran.

Vous transmettez la chaîne à afficher comme premier argument. C'est tout ce qu'il faut pour afficher des mots à l'écran.

Text accepte des paramètres pour modifier son apparence. Vous pouvez définir fontSize, color et fontWeight.

Les tailles utilisent l'unité sp, qui s'adapte aux paramètres de police de l'utilisateur. Votre application reste ainsi lisible pour tout le monde.

Si vous appelez Text deux fois de suite, les deux textes se retrouvent au même endroit, l'un par-dessus l'autre. Les composables ne s'organisent pas automatiquement.

Pour placer les éléments dans l'ordre, vous avez besoin d'un composable de mise en page qui organise ses enfants. Le plus courant pour empiler des éléments verticalement est Column.

Column organise ses enfants verticalement, les uns sous les autres. Vous placez les composables enfants dans son bloc lambda final.

Chaque composable écrit entre les accolades devient une ligne de cette pile verticale, dans l'ordre où vous l'écrivez.

Dans une Column, les enfants apparaissent de haut en bas, exactement dans l'ordre où vous les énumérez. Déplacez une ligne vers le haut dans le code, et elle remonte à l'écran.

Les mises en page deviennent ainsi prévisibles : lisez le code de haut en bas et vous saurez à quoi ressemble l'écran de haut en bas.

Column peut contrôler l'espacement entre ses enfants à l'aide de verticalArrangement. Par exemple, Arrangement.spacedBy ajoute des espaces réguliers.

C'est plus propre que d'ajouter l'espacement manuellement à chaque enfant, et cela garantit la cohérence de votre mise en page.

Par défaut, une Column aligne ses enfants au début, c'est-à-dire à gauche. Utilisez horizontalAlignment pour les centrer ou les aligner à la fin.

Définissez-le sur Alignment.CenterHorizontally pour centrer chaque enfant dans la largeur de la colonne.

Column empile les éléments verticalement ; son équivalent, Row, dispose les éléments côte à côte, horizontalement. Ils reposent sur la même idée, mais dans des directions différentes.

Vous combinerez des Rows et des Columns pour créer des grilles et des cartes. Pour l'instant, retenez ceci : Column va vers le bas, Row s'étend horizontalement.

Les mises en page peuvent contenir d'autres mises en page. Vous pouvez placer un Row dans un Column pour créer des conceptions plus riches.

Ici, une colonne affiche un titre, puis une ligne contenant deux éléments de texte en dessous. L'imbrication permet de construire des écrans complexes à partir d'éléments simples.

Pour ajouter un espace fixe entre deux éléments composables, vous pouvez insérer un Spacer. Il s'agit d'un élément composable vide qui occupe simplement de l'espace.

Donnez-lui une hauteur au moyen d'un modificateur : il repoussera l'élément suivant vers le bas. Nous étudierons davantage les modificateurs dans la prochaine leçon.

Avec Text et Column, vous pouvez déjà créer un écran simple avec des libellés. Empilez un en-tête et quelques lignes de détails.

Ce petit modèle constitue la base de presque tous les écrans Compose que vous écrirez.

Vous avez appris à afficher des chaînes avec Text et à les mettre en forme à l'aide de fontSize et fontWeight. Un Column empile les éléments enfants verticalement, dans l'ordre du code, tandis qu'un Row les dispose horizontalement.

Vous pouvez contrôler l'espacement avec verticalArrangement ou un Spacer, et aligner les éléments enfants avec horizontalAlignment. L'imbrication de Rows et de Columns permet de créer des mises en page plus riches. Ensuite, vous prévisualiserez ces écrans sans lancer l'application.