Widget dan Susun Atur
Bina butang, input dan panel.
Widget dan Susun Atur ialah pelajaran Belajar Pengaturcaraan Rust percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Belajar Pengaturcaraan Rust, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Belajar Pengaturcaraan Rust merangkumi sejumlah 4 pelajaran.
Himpunan Widget
egui disertakan dengan pelbagai widget terbina dalam: label, pengepala, butang, kotak pilihan, butang radio, pelungsur, nilai seret, suntingan teks, kotak gabungan dan banyak lagi.
Setiap satunya ialah kaedah pada Ui dan mengembalikan Response. Anda menggabungkan UI dengan memanggilnya mengikut urutan, bukannya mencipta tika kelas.
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
Kaedah kemudahan seperti ui.button membalut struktur widget yang lebih lengkap. Untuk widget yang boleh dikonfigurasi, bina struktur tersebut dan hantarkannya kepada ui.add.
Apa-apa sahaja yang melaksanakan trait Widget boleh digunakan dengan ui.add, termasuk widget tersuai anda sendiri. Inilah teras API egui yang boleh dikembangkan.
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(); }Susun Atur Menegak dan Mendatar
Secara lalai, Ui menyusun widget dari atas ke bawah. Panggil ui.horizontal(|ui| ...) untuk meletakkannya dari kiri ke kanan dalam satu baris.
Penutupan susun atur ini boleh disarang secara bebas, membolehkan anda membina baris lajur dan lajur baris menggunakan aliran kawalan Rust biasa.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Lajur
Untuk susun atur berbilang lajur dengan jarak sama, ui.columns(n, |cols| ...) memberikan anda hirisan nilai Ui, satu bagi setiap lajur.
Setiap lajur mendapat lebar yang sama dan anda menambah widget ke dalam cols[i]. Ini berguna untuk panel atau borang bersebelahan.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Panel
Struktur peringkat atas datang daripada panel: TopBottomPanel untuk bar menu dan bar status, SidePanel untuk navigasi, dan CentralPanel untuk kandungan utama.
Tambah panel sisi dan panel atas terlebih dahulu; CentralPanel memenuhi ruang yang berbaki. Susunan penting kerana setiap panel mengambil tepinya.
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");
});Kawasan Tatalan
Apabila kandungan melebihi ruang yang tersedia, bungkusnya dalam ScrollArea. Ia memotong limpahan dan menambah bar tatal secara automatik.
Gunakan .auto_shrink([false, false]) supaya kawasan itu memenuhi rantau tersebut dan bukannya mengecil mengikut kandungan, serta .stick_to_bottom(true) untuk paparan log.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Grid untuk Borang
egui::Grid menjajarkan widget menjadi jadual baris dan lajur yang kemas — sesuai untuk borang label/nilai.
Tambah sel dari kiri ke kanan dan panggil ui.end_row() untuk memulakan baris seterusnya. egui memastikan lajur sejajar merentas baris secara automatik.
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 Penjajaran
Kawalan terperinci datang daripada pembantu jarak: ui.add_space(pixels) memasukkan ruang, manakala ui.separator() melukis garisan pemisah.
Untuk menjajarkan kandungan, gunakan ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...), iaitu ungkapan biasa untuk menolak butang ke tepi kanan baris.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Tetingkap Terapung
Selain panel, egui::Window mencipta tetingkap terapung yang boleh dialih dan diubah saiz di dalam aplikasi anda. Ia sangat sesuai untuk himpunan alat dan dialog.
Ikat keterlihatannya kepada bool dengan .open(&mut self.show) supaya butang tutup menukar keadaan anda.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Penggayaan dan Visual
Rupa setiap widget dikawal oleh ctx.style() dan Visualsnya. Tukar tema dengan ctx.set_visuals(egui::Visuals::dark()) atau light().
Anda boleh melaraskan jarak, pembundaran dan warna secara global dengan mengubah gaya, lalu memberikan seluruh aplikasi rupa tersuai yang konsisten.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Menggabungkan Semuanya
Aplikasi sebenar menyarang primitif ini: panel atas untuk menu, panel sisi kiri untuk navigasi dan panel tengah yang mengandungi grid di dalam kawasan tatalan.
Oleh sebab susun atur hanyalah penutupan tersarang dan aliran kawalan biasa, menyusun semula skrin ialah suntingan kod, bukan operasi pembedahan pepohon.
Semakan Pantas
Panel manakah yang patut anda tambah terakhir?
Imbas Kembali
egui menawarkan label, pelungsur, suntingan teks dan banyak lagi — semuanya kaedah pada Ui yang mengembalikan Response, dengan ui.add untuk widget yang boleh dikonfigurasi.
Susun atur dibina daripada penutupan tersarang: horizontal, vertical, columns, Grid dan ScrollArea. Panel dan Window menentukan struktur peringkat atas, manakala Visuals mengawal penggayaan. Seterusnya: mengurus keadaan aplikasi dengan kemas.
Pelajari Rust dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 39
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Widget dan Susun Atur” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Belajar Pengaturcaraan Rust, termasuk “Widget dan Susun Atur”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Belajar Pengaturcaraan Rust merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Widget dan Susun Atur”?
Bina butang, input dan panel. Anda berlatih Belajar Pengaturcaraan Rust menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Belajar Pengaturcaraan Rust?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Belajar Pengaturcaraan Rust di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Widget dan Susun Atur” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Belajar Pengaturcaraan Rust ini?
Ya. Setiap pelajaran Belajar Pengaturcaraan Rust menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Asas UI Mod Segera
- Widget dan Susun Atur
- Mengurus Keadaan Aplikasi
- Membungkus Aplikasi Desktop