Widgety i układ
Zbuduje Pan/Pani przyciski, pola wejściowe i panele.
Widgety i układ to bezpłatna lekcja Learn Rust Coding na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Learn Rust Coding, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Learn Rust Coding zawiera 4 lekcji w sumie.
Zestaw widgetów
egui dostarcza bogaty zestaw wbudowanych widgetów: etykiety, nagłówki, przyciski, pola wyboru, przyciski radiowe, suwaki, wartości przeciągane, pola tekstowe, pola kombi i wiele innych.
Każdy z nich jest metodą na Ui i zwraca obiekt Response. Interfejsy tworzy się, wywołując je kolejno, zamiast tworzyć instancje klas.
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 i cecha Widget
Metody pomocnicze, takie jak ui.button, opakowują bardziej rozbudowane struktury widgetów. W przypadku widgetów wymagających konfiguracji należy utworzyć strukturę i przekazać ją do ui.add.
Wszystko, co implementuje cechę Widget, działa z ui.add, w tym własne widgety. To rozszerzalny fundament API 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(); }Układ pionowy i poziomy
Domyślnie obiekt Ui układa widgety od góry do dołu. Wywołaj ui.horizontal(|ui| ...), aby umieścić je od lewej do prawej w jednym wierszu.
Te domknięcia układu można dowolnie zagnieżdżać, tworząc wiersze kolumn i kolumny wierszy za pomocą zwykłego sterowania przepływem w Rust.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Kolumny
W przypadku układów wielokolumnowych z równymi odstępami ui.columns(n, |cols| ...) udostępnia wycinek wartości Ui — po jednej na każdą kolumnę.
Każda kolumna ma taką samą szerokość, a widgety dodaje się do cols[i]. Jest to przydatne w panelach umieszczanych obok siebie oraz w formularzach.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Panele
Strukturę najwyższego poziomu tworzą panele: TopBottomPanel dla pasków menu i stanu, SidePanel dla nawigacji oraz CentralPanel dla głównej zawartości.
Najpierw dodaj panele boczne i górne; CentralPanel wypełni pozostałe miejsce. Kolejność ma znaczenie, ponieważ każdy panel zajmuje swój brzeg.
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");
});Obszary przewijania
Gdy zawartość przekracza dostępną przestrzeń, umieść ją w ScrollArea. Obszar ten przycina nadmiar i automatycznie dodaje paski przewijania.
Użyj .auto_shrink([false, false]), aby obszar wypełniał region zamiast dopasowywać się do zawartości, oraz .stick_to_bottom(true) w widokach logów.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Siatki formularzy
egui::Grid wyrównuje widgety w uporządkowanej tabeli wierszy i kolumn — idealnej dla formularzy etykieta/wartość.
Dodawaj komórki od lewej do prawej i wywołuj ui.end_row(), aby rozpocząć następny wiersz. egui automatycznie wyrównuje kolumny między wierszami.
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();
});Odstępy i wyrównanie
Precyzyjną kontrolę zapewniają pomocnicze metody odstępów: ui.add_space(pixels) wstawia przerwę, a ui.separator() rysuje linię rozdzielającą.
Do wyrównywania zawartości użyj ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...). Jest to typowy sposób umieszczania przycisków przy prawej krawędzi wiersza.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Okna pływające
Oprócz paneli egui::Window tworzy ruchome i skalowalne okno pływające wewnątrz aplikacji. Świetnie nadaje się ono do palet narzędzi i okien dialogowych.
Powiąż widoczność okna z wartością bool za pomocą .open(&mut self.show), aby przycisk zamykania przełączał stan.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Styl i wygląd
Wygląd każdego widgetu określają ctx.style() i jego Visuals. Motywy można przełączać za pomocą ctx.set_visuals(egui::Visuals::dark()) lub light().
Globalnie można dostosować odstępy, zaokrąglenia i kolory, modyfikując styl, aby nadać całej aplikacji spójny, niestandardowy wygląd.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Łączenie wszystkich elementów
Rzeczywiste aplikacje zagnieżdżają te elementy: panel górny z menu, lewy panel boczny z nawigacją oraz panel centralny zawierający siatkę wewnątrz obszaru przewijania.
Ponieważ układ składa się wyłącznie ze zagnieżdżonych domknięć i zwykłego sterowania przepływem, przebudowa ekranu wymaga zmiany w kodzie, a nie skomplikowanej operacji na drzewie.
Szybki test
Który panel należy dodać jako ostatni?
Podsumowanie
egui oferuje etykiety, suwaki, pola tekstowe i wiele innych elementów — wszystkie są metodami na Ui zwracającymi obiekt Response; do widgetów wymagających konfiguracji służy ui.add.
Układ tworzy się ze zagnieżdżonych domknięć: horizontal, vertical, columns, Grid i ScrollArea. Panele oraz Window definiują strukturę najwyższego poziomu, a Visuals steruje wyglądem. Następnie zajmiemy się przejrzystym zarządzaniem stanem aplikacji.
Często zadawane pytania
Czy lekcja „Widgety i układ” jest bezpłatna?
Tak — pełny tekst „Widgety i układ” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Learn Rust Coding, przejdź na CoddyKit PRO. Kurs Learn Rust Coding zawiera 4 lekcji w sumie.
Co nauczysz się w „Widgety i układ”?
Zbuduje Pan/Pani przyciski, pola wejściowe i panele. Ćwiczysz Learn Rust Coding z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Learn Rust Coding?
Nie wymagamy żadnego doświadczenia. Learn Rust Coding w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Widgety i układ”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Learn Rust Coding?
Tak. Każda lekcja Learn Rust Coding zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podstawy UI w trybie immediate mode
- Widgety i układ
- Zarządzanie stanem aplikacji
- Pakowanie aplikacji desktopowej