Widget dan Tata Letak
Buat tombol, masukan, dan panel.
Widget dan Tata Letak adalah pelajaran Learn Rust Coding gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Learn Rust Coding, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Learn Rust Coding mencakup 4 pelajaran total.
Kumpulan Widget
egui menyediakan banyak widget bawaan: label, heading, tombol, kotak centang, tombol radio, penggeser, nilai yang dapat diseret, penyunting teks, kotak kombo, dan lainnya.
Masing-masing merupakan metode pada Ui dan mengembalikan Response. Anda menyusun UI dengan memanggilnya secara berurutan, bukan dengan membuat instance class.
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 dan Trait Widget
Metode praktis seperti ui.button membungkus struct widget yang lebih lengkap. Untuk widget yang dapat dikonfigurasi, buat struct tersebut lalu teruskan ke ui.add.
Semua hal yang mengimplementasikan trait Widget dapat digunakan dengan ui.add, termasuk widget kustom buatan Anda sendiri. Inilah inti API egui yang dapat diperluas.
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(); }Tata Letak Vertikal dan Horizontal
Secara default, Ui menata widget dari atas ke bawah. Panggil ui.horizontal(|ui| ...) untuk menempatkannya dari kiri ke kanan dalam satu baris.
Closure tata letak ini dapat disarangkan secara bebas, sehingga Anda dapat membuat baris berisi kolom dan kolom berisi baris menggunakan alur kontrol Rust biasa.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Kolom
Untuk tata letak dengan beberapa kolom berjarak sama, ui.columns(n, |cols| ...) memberi Anda irisan nilai Ui, satu untuk setiap kolom.
Setiap kolom memiliki lebar yang sama, dan Anda menambahkan widget ke dalam cols[i]. Ini berguna untuk panel atau formulir berdampingan.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Panel
Struktur tingkat atas berasal dari panel: TopBottomPanel untuk bilah menu dan bilah status, SidePanel untuk navigasi, serta CentralPanel untuk konten utama.
Tambahkan panel samping dan panel atas terlebih dahulu; CentralPanel mengisi ruang yang tersisa. Urutan penting karena setiap panel mengambil sisi ruangnya.
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");
});Area Pengguliran
Saat konten melebihi ruang yang tersedia, bungkus konten tersebut dalam ScrollArea. Komponen ini memotong luapan dan menambahkan bilah gulir secara otomatis.
Gunakan .auto_shrink([false, false]) agar area mengisi wilayah yang tersedia, bukan menyusut mengikuti konten, dan gunakan .stick_to_bottom(true) untuk tampilan log.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Grid untuk Formulir
egui::Grid menyelaraskan widget menjadi tabel baris dan kolom yang rapi — ideal untuk formulir label/nilai.
Tambahkan sel dari kiri ke kanan dan panggil ui.end_row() untuk memulai baris berikutnya. egui menjaga kolom tetap sejajar di seluruh baris secara otomatis.
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();
});Jarak dan Perataan
Kontrol terperinci tersedia melalui pembantu jarak: ui.add_space(pixels) menyisipkan celah, sedangkan ui.separator() menggambar garis pemisah.
Untuk meratakan konten, gunakan ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...), yaitu pola yang digunakan untuk mendorong tombol ke tepi kanan suatu baris.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Jendela Mengambang
Selain panel, egui::Window membuat jendela mengambang yang dapat dipindahkan dan diubah ukurannya di dalam aplikasi Anda. Ini cocok untuk kumpulan alat dan dialog.
Ikat visibilitasnya ke bool dengan .open(&mut self.show) agar tombol tutup mengubah keadaan Anda.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Gaya dan Visual
Tampilan setiap widget diatur oleh ctx.style() dan Visuals-nya. Ganti tema dengan ctx.set_visuals(egui::Visuals::dark()) atau light().
Anda dapat menyesuaikan jarak, pembulatan, dan warna secara global dengan mengubah style, sehingga seluruh aplikasi memiliki tampilan kustom yang konsisten.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Menyusun Semuanya
Aplikasi nyata menyarangkan primitif ini: panel atas berisi menu, panel samping kiri berisi navigasi, dan panel tengah berisi grid di dalam area gulir.
Karena tata letak hanyalah closure tersarang dan alur kontrol biasa, menyusun ulang layar cukup dilakukan dengan mengubah kode, bukan dengan membedah pohon.
Pemeriksaan Singkat
Panel mana yang harus Anda tambahkan terakhir?
Ringkasan
egui menyediakan label, penggeser, penyunting teks, dan lainnya — semuanya merupakan metode pada Ui yang mengembalikan Response, dengan ui.add untuk widget yang dapat dikonfigurasi.
Tata letak dibangun dari closure tersarang: horizontal, vertical, columns, Grid, dan ScrollArea. Panel dan Window menentukan struktur tingkat atas, sedangkan Visuals mengatur gaya. Selanjutnya: mengelola keadaan aplikasi dengan rapi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Widget dan Tata Letak” gratis?
Ya — teks lengkap “Widget dan Tata Letak” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Learn Rust Coding, upgrade ke CoddyKit PRO. Kursus Learn Rust Coding mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Widget dan Tata Letak”?
Buat tombol, masukan, dan panel. Kamu berlatih Learn Rust Coding dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Learn Rust Coding?
Tidak diperlukan pengalaman sebelumnya. Learn Rust Coding di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Widget dan Tata Letak” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Learn Rust Coding ini?
Ya. Setiap pelajaran Learn Rust Coding menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Dasar-Dasar UI Mode Langsung
- Widget dan Tata Letak
- Mengelola Keadaan Aplikasi
- Mengemas Aplikasi Desktop