Des mises en page bien visibles
Transformez la première fenêtre en interface de bureau native claire avec des lignes, colonnes, conteneurs, couleurs et espacements.
Résultat : la même petite application possède maintenant le chrome de fenêtre Ailloli UI, du rythme, de la couleur et une hiérarchie visuelle claire.
01
Donnez forme à la fenêtre native
Conservez la taille de 800 par 600, puis remplacez les décorations du système par la barre de titre cliente intégrée à Ailloli UI.
Chrome de fenêtre Ailloli UI
ailloli_ui_chrome ajoute la barre de titre du framework. radius arrondit la surface cliente et produit un effet visible uniquement avec le chrome client.
.ailloli_ui_chrome().radius(16.0)Le chrome du système est utilisé par défaut. Choisissez explicitement le chrome client lorsque vous souhaitez la barre de titre Ailloli UI.
02
Trois constructeurs, une structure claire
Column empile les zones, Row place les éléments côte à côte et Container transforme un enfant en surface stylée.
Row
Disposez les enfants horizontalement et ajoutez entre eux un espacement positif ou nul.
Column
Empilez les enfants verticalement, puis utilisez padding et gap pour créer un rythme lisible.
Container
Donnez à un enfant un arrière-plan, une bordure, un rayon, une ombre et ses propres contraintes de mise en page.
Construisez la première surface soignée
Construisez le même résultat en trois petits changements. Chaque extrait vient de l'application vérifiée et se concentre sur une seule responsabilité.
Construisez par petites étapes
Chaque bloc de code change une seule idée de l'application de référence vérifiée.
Étape 1 : donner forme à la fenêtre
Ces constructeurs configurent l'enveloppe native. L'identifiant logique reste distinct du titre visible.
Window::new("main")
.title("My visual workspace")
.size(800.0, 600.0)
.ailloli_ui_chrome()
.radius(16.0)Étape 2 : empiler les idées principales
Column possède plusieurs enfants, les place verticalement et utilise padding avec gap pour leur laisser de l'air.
Column::new()
.padding(24.0)
.gap(16.0)
.child(
Text::new("Plan something delightful")
.style(theme.typography().ui_lg),
)Étape 3 : composer dans une surface
Container::panel possède un seul enfant. Cet enfant devient donc une Row ou une Column dès que la surface contient plusieurs éléments.
Container::panel(theme).padding(16.0).child(
Row::new()
.gap(12.0)
.child(
Icon::new(IconId::Check)
.size(24.0)
.tint(palette.accent),
)
.child(
Column::new()
.gap(4.0)
.child(
Text::new("First visible win")
.style(theme.typography().ui_md),
)
.child(
Text::new("Row and Column now give the window rhythm.")
.style(theme.typography().ui_sm),
),
),
),Vérifié avec Rust 1.88 sur la façade publique actuelle et la feature winit par défaut.
03
Voyez le vrai framework
Cette capture provient de l'application sandbox publique du dépôt. Il s'agit d'une interface Ailloli UI réellement rendue, pas d'une maquette web.
À vous de jouer
Exercice : construisez une mini carte météo
Utilisez une petite composition pour pratiquer les trois constructeurs de mise en page, sans ajouter d'état.
- 1Placez un titre et un détail dans une Column, puis une icône et la température dans une Row.
- 2Entourez le contenu avec Container::panel(theme) et comparez des gap de 8 et 16.
Un Container possède un seul enfant. Faites de cet enfant la Column qui contient le reste de la carte.
L'icône et la température partagent une ligne, les détails s'empilent et la carte reste lisible avec les deux espacements.