Bileşenler ve Yerleşim
Düğmeler, girdiler ve paneller oluşturun.
Bileşenler ve Yerleşim, CoddyKit'te ücretsiz bir Learn Rust Coding dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Learn Rust Coding öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Learn Rust Coding kursu toplamda 4 dersten oluşur.
Bileşen Paleti
egui; etiketler, başlıklar, düğmeler, onay kutuları, radyo düğmeleri, kaydırıcılar, sürükleme değerleri, metin düzenleyicileri, açılır kutular ve daha fazlası gibi zengin bir yerleşik bileşen kümesi sunar.
Her biri Ui üzerinde bir yöntemdir ve bir Response döndürür. Kullanıcı arayüzlerini sınıfların örneklerini oluşturmak yerine bu yöntemleri sırayla çağırarak birleştirirsiniz.
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 ve Widget Özelliği
ui.button gibi kolaylık yöntemleri, daha kapsamlı bileşen yapılarını sarmalar. Yapılandırılabilir bileşenler için yapıyı oluşturup ui.add'e aktarırsınız.
Widget özelliğini uygulayan her şey, kendi özel bileşenleriniz de dâhil olmak üzere ui.add ile çalışır. Bu, egui API'sinin genişletilebilir temelidir.
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(); }Dikey ve Yatay Yerleşim
Varsayılan olarak bir Ui, bileşenleri yukarıdan aşağıya yerleştirir. Bir satır içinde soldan sağa yerleştirmek için ui.horizontal(|ui| ...) çağrısını yapın.
Bu yerleşim kapatma işlevleri serbestçe iç içe geçebilir; böylece yalın Rust denetim akışıyla satırlardan oluşan sütunlar ve sütunlardan oluşan satırlar oluşturabilirsiniz.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Sütunlar
Eşit aralıklı çok sütunlu yerleşimler için ui.columns(n, |cols| ...) size her sütun için bir tane olmak üzere bir Ui değerleri dilimi verir.
Her sütun eşit genişlik alır ve bileşenleri cols[i] içine eklersiniz. Bu, yan yana paneller veya formlar için kullanışlıdır.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Paneller
Üst düzey yapı panellerden oluşur: menü ve durum çubukları için TopBottomPanel, gezinme için SidePanel ve ana içerik için CentralPanel.
Önce yan ve üst panelleri ekleyin; CentralPanel geriye kalan alanı doldurur. Her panel kendi kenarını kapladığından sıra önemlidir.
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");
});Kaydırma Alanları
İçerik kullanılabilir alanı aştığında onu bir ScrollArea içine sarın. Bu alan taşan kısmı kırpar ve kaydırma çubuklarını otomatik olarak ekler.
İçeriğe göre küçülmek yerine bölgeyi doldurmasını sağlamak için .auto_shrink([false, false]) kullanın; günlük görünümü için de .stick_to_bottom(true) kullanın.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Formlar için Izgaralar
egui::Grid, bileşenleri satır ve sütunlardan oluşan düzenli bir tabloya hizalar; etiket/değer formları için idealdir.
Hücreleri soldan sağa ekleyin ve sonraki satırı başlatmak için ui.end_row() çağrısını yapın. egui, sütunları satırlar arasında otomatik olarak hizalı tutar.
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();
});Boşluk ve Hizalama
İnce ayar, boşluk yardımcılarıyla yapılır: ui.add_space(pixels) bir boşluk ekler, ui.separator() ise ayırıcı bir çizgi çizer.
İçeriği hizalamak için ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...) kullanın. Bu, düğmeleri bir satırın sağ kenarına itmek için kullanılan kalıptır.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Yüzen Pencereler
Panellerin yanı sıra egui::Window, uygulamanızın içinde taşınabilir ve yeniden boyutlandırılabilir bir yüzen pencere oluşturur. Araç paletleri ve iletişim kutuları için idealdir.
Kapatma düğmesinin durumunuzu değiştirmesi için görünürlüğünü bool değerine .open(&mut self.show) ile bağlayın.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Biçimlendirme ve Görseller
Her bileşenin görünümü ctx.style() ve onun Visuals değeri tarafından belirlenir. Temaları ctx.set_visuals(egui::Visuals::dark()) veya light() ile değiştirin.
Stili değiştirerek boşlukları, köşe yuvarlaklığını ve renkleri genel olarak ayarlayabilir, böylece tüm uygulamaya tutarlı ve özel bir görünüm kazandırabilirsiniz.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Hepsini Birleştirme
Gerçek uygulamalar bu temel yapı taşlarını iç içe kullanır: üstte bir panel menüsü, solda bir gezinme paneli ve ortada kaydırma alanının içinde bir ızgara barındıran merkezi bir panel.
Yerleşim yalnızca iç içe kapatma işlevlerinden ve olağan denetim akışından oluştuğu için bir ekranı yeniden yapılandırmak, ağaç üzerinde cerrahi işlem yapmak değil, kodu düzenlemektir.
Kısa Yoklama
Hangi paneli en son eklemelisiniz?
Özet
egui etiketler, kaydırıcılar, metin düzenleyicileri ve daha fazlasını sunar; bunların tümü Ui üzerinde Response döndüren yöntemlerdir. Yapılandırılabilir bileşenler için ui.add kullanılır.
Yerleşim, iç içe kapatma işlevleriyle oluşturulur: horizontal, vertical, columns, Grid ve ScrollArea. Paneller ve Window üst düzey yapıyı tanımlar, Visuals ise biçimlendirmeyi denetler. Sırada: uygulama durumunu temiz bir şekilde yönetmek.
Sıkça Sorulan Sorular
“Bileşenler ve Yerleşim” dersi ücretsiz mi?
Evet — “Bileşenler ve Yerleşim” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Learn Rust Coding kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Learn Rust Coding kursu toplamda 4 dersten oluşur.
“Bileşenler ve Yerleşim” dersinde ne öğreneceğim?
Düğmeler, girdiler ve paneller oluşturun. Learn Rust Coding ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Learn Rust Coding öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Learn Rust Coding, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Bileşenler ve Yerleşim” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Learn Rust Coding dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Learn Rust Coding dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Anında Mod Kullanıcı Arayüzü Temelleri
- Bileşenler ve Yerleşim
- Uygulama Durumunu Yönetme
- Masaüstü Uygulaması Paketleme