Widget e layout
Costruisca pulsanti, input e pannelli.
Widget e layout è una lezione Learn Rust Coding gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Learn Rust Coding, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Learn Rust Coding include 4 lezioni in totale.
La raccolta di widget
egui include una ricca raccolta di widget integrati: etichette, intestazioni, pulsanti, caselle di controllo, pulsanti di opzione, slider, valori trascinabili, campi di testo, caselle combinate e altro ancora.
Ognuno è un metodo di Ui e restituisce una Response. Le UI si compongono chiamando i metodi in sequenza, invece di istanziare classi.
ui.heading("Settings");
ui.checkbox(&mut self.dark, "Dark mode");
ui.add(egui::Slider::new(&mut self.volume, 0.0..=1.0).text("Volume"));
ui.text_edit_singleline(&mut self.name);ui.add e il trait Widget
I metodi di utilità come ui.button sono wrapper per strutture di widget più ricche. Per i widget configurabili, si costruisce la struttura e la si passa a ui.add.
Qualsiasi tipo che implementa il trait Widget funziona con ui.add, inclusi i widget personalizzati. Questo è il nucleo estensibile dell’API di egui.
let slider = egui::Slider::new(&mut self.zoom, 0.5..=4.0)
.logarithmic(true)
.suffix("x");
let resp = ui.add(slider);
if resp.changed() { self.rerender(); }Layout verticale e orizzontale
Per impostazione predefinita, un Ui dispone i widget dall’alto verso il basso. Chiami ui.horizontal(|ui| ...) per disporli da sinistra verso destra all’interno di una riga.
Queste closure di layout possono essere annidate liberamente, consentendo di costruire righe di colonne e colonne di righe usando il normale flusso di controllo di Rust.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Colonne
Per layout con più colonne di larghezza uniforme, ui.columns(n, |cols| ...) fornisce una slice di valori Ui, uno per ogni colonna.
Ogni colonna ha la stessa larghezza e i widget vengono aggiunti in cols[i]. È utile per pannelli o moduli affiancati.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Pannelli
La struttura di primo livello deriva dai pannelli: TopBottomPanel per barre dei menu e barre di stato, SidePanel per la navigazione e CentralPanel per il contenuto principale.
Aggiunga prima i pannelli laterali e superiori; CentralPanel riempie lo spazio rimanente. L’ordine è importante perché ogni pannello occupa il proprio bordo.
egui::TopBottomPanel::top("bar").show(ctx, |ui| {
ui.label("Menu");
});
egui::SidePanel::left("nav").show(ctx, |ui| {
ui.label("Sidebar");
});
egui::CentralPanel::default().show(ctx, |ui| {
ui.label("Main content");
});Aree a scorrimento
Quando il contenuto supera lo spazio disponibile, lo si racchiuda in una ScrollArea. Questa ritaglia il contenuto eccedente e aggiunge automaticamente le barre di scorrimento.
Usi .auto_shrink([false, false]) per fare in modo che riempia l’area invece di ridursi alle dimensioni del contenuto, e .stick_to_bottom(true) per le viste dei log.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Griglie per i moduli
egui::Grid allinea i widget in una tabella ordinata di righe e colonne: è ideale per i moduli con etichette e valori.
Aggiunga le celle da sinistra verso destra e chiami ui.end_row() per iniziare la riga successiva. egui mantiene automaticamente allineate le colonne tra le varie righe.
egui::Grid::new("form").num_columns(2).show(ui, |ui| {
ui.label("Host");
ui.text_edit_singleline(&mut self.host);
ui.end_row();
ui.label("Port");
ui.add(egui::DragValue::new(&mut self.port));
ui.end_row();
});Spaziatura e allineamento
Per un controllo preciso sono disponibili gli helper per la spaziatura: ui.add_space(pixels) inserisce uno spazio, mentre ui.separator() disegna una linea divisoria.
Per allineare il contenuto, usi ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...), l’idioma usato per spingere i pulsanti verso il bordo destro di una riga.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Finestre mobili
Oltre ai pannelli, egui::Window crea una finestra mobile e ridimensionabile all’interno dell’applicazione. È ideale per tavolozze di strumenti e finestre di dialogo.
Colleghi la visibilità a un bool con .open(&mut self.show), in modo che il pulsante di chiusura aggiorni il suo stato.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Stile e aspetto visivo
L’aspetto di ogni widget è regolato da ctx.style() e dai suoi Visuals. Cambi tema con ctx.set_visuals(egui::Visuals::dark()) o light().
Può modificare globalmente spaziatura, arrotondamenti e colori intervenendo sullo stile, così da dare all’intera applicazione un aspetto personalizzato e coerente.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Comporre il tutto
Le applicazioni reali annidano queste primitive: un pannello superiore per il menu, un pannello laterale sinistro per la navigazione e un pannello centrale che contiene una griglia all’interno di un’area a scorrimento.
Poiché il layout consiste semplicemente in closure annidate e nel normale flusso di controllo, ristrutturare una schermata richiede una modifica al codice, non un intervento chirurgico sull’albero dei componenti.
Verifica rapida
Quale pannello dovrebbe essere aggiunto per ultimo?
Riepilogo
egui offre etichette, slider, campi di testo e altro ancora: sono tutti metodi di Ui che restituiscono una Response, mentre ui.add serve per i widget configurabili.
Il layout si costruisce con closure annidate: horizontal, vertical, columns, Grid e ScrollArea. I pannelli e Window definiscono la struttura di primo livello, mentre Visuals controlla lo stile. Prossimo argomento: gestione ordinata dello stato dell’applicazione.
Domande Frequenti
La lezione «Widget e layout» è gratuita?
Sì — il testo completo di «Widget e layout» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Learn Rust Coding, passa a CoddyKit PRO. Il corso Learn Rust Coding include 4 lezioni in totale.
Cosa imparerò in «Widget e layout»?
Costruisca pulsanti, input e pannelli. Eserciti Learn Rust Coding con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Learn Rust Coding?
Non è richiesta alcuna esperienza precedente. Learn Rust Coding su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Widget e layout»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Learn Rust Coding?
Sì. Ogni lezione Learn Rust Coding include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Fondamenti dell'interfaccia UI immediate-mode
- Widget e layout
- Gestire lo stato dell'app
- Distribuire un'app desktop