Anında Mod Kullanıcı Arayüzü Temelleri
egui'nin nasıl çizim yaptığını anlayın.
Anında Mod Kullanıcı Arayüzü Temelleri, CoddyKit'te ücretsiz bir Learn Rust Coding dersidir. Bu, 4 dersinin 1. 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.
Anlık Mod Ne Anlama Gelir
egui, anlık modlu bir GUI kütüphanesidir. Kalıcı bir bileşen ağacı oluşturduğunuz, GTK ve Qt gibi saklamalı mod araç takımlarının aksine egui, her karede kullanıcı arayüzünün tamamını baştan oluşturur.
Kodunuz her karede yukarıdan aşağıya çalışır ve işlev çağrıları olarak bileşenler üretir. Saklanan bir düğüm grafiği yoktur; kullanıcı arayüzü yalnızca kapatma işlevinizin çalıştırılmasının bir yan etkisidir.
Güncelleme Döngüsü
Bir egui uygulaması eframe::App uygular; bu uygulamanın update yöntemi her karede, genellikle saniyede 60 kez çağrılır.
update içinde, mevcut durumu temel alarak kullanıcı arayüzünün şu anda nasıl görünmesi gerektiğini tanımlarsınız. egui hiçbir şeyi karşılaştırmaz; her şeyi yeniden üretir.
impl eframe::App for MyApp {
fn update(&mut self, ctx: &egui::Context, _f: &mut eframe::Frame) {
egui::CentralPanel::default().show(ctx, |ui| {
ui.label("Hello, egui!");
});
}
}Context ve Ui
İki temel tür her yerde karşınıza çıkar. egui::Context, o karedeki tüm kullanıcı arayüzü durumuna erişim sağlayan, düşük maliyetle kopyalanabilen paylaşılan bir tanıtıcıdır.
Ui, bileşenler eklediğiniz bir bölgedir. Paneller ve pencereler, kapatma işlevlerinin içinde size bir &mut Ui verir; bunun üzerinde ui.label veya ui.button gibi yöntemleri çağırırsınız.
egui::CentralPanel::default().show(ctx, |ui| {
ui.heading("Dashboard");
ui.separator();
ui.label("Widgets go here.");
});Bileşenler Yanıt Döndürür
Kullanıcı arayüzü her karede yeniden oluşturulduğundan, saklamalı mod araç takımlarındaki gibi geri çağırmalar kaydedemezsiniz. Bunun yerine her bileşen çağrısı hemen bir Response döndürür.
Aynı karede Response değerini incelersiniz: .clicked(), .hovered(), .changed(). Böylece olay işleme, yerleşim koduyla aynı yerde tutulur.
if ui.button("Save").clicked() {
self.save();
}
let resp = ui.text_edit_singleline(&mut self.name);
if resp.changed() {
self.dirty = true;
}Durum Sizin Sorumluluğunuzdadır
egui, uygulama verilerinin neredeyse hiçbirini saklamaz. Bileşen değerleriniz App yapısındaki self içinde bulunur ve değiştirilebilir başvuruları bileşenlere aktarırsınız.
Bir metin alanı &mut String, bir onay kutusu ise &mut bool alır. egui, başvuru üzerinden değeri geri yazar; bu nedenle yapınız tek doğruluk kaynağıdır.
struct MyApp {
name: String,
enabled: bool,
}
// inside update:
ui.text_edit_singleline(&mut self.name);
ui.checkbox(&mut self.enabled, "Enabled");eframe'i Ayarlama
eframe, egui'yi masaüstünde ve web'de barındıran resmî çerçevedir. Yerel pencerenin, GPU yüzeyinin ve olay döngüsünün yönetimini üstlenir.
eframe::run_native ile başlatır; pencere başlığını, yerel seçenekleri ve App öğenizi oluşturan bir kapatma işlevini aktarırsınız.
fn main() -> eframe::Result<()> {
let opts = eframe::NativeOptions::default();
eframe::run_native(
"My App",
opts,
Box::new(|_cc| Ok(Box::new(MyApp::default()))),
)
}Girdinin Tetiklediği Yeniden Çizim
Varsayılan olarak egui yalnızca bir şey olduğunda yeniden çizim yapar: fare hareketi, tuş basımı veya açıkça yapılan bir istek. Bu, boşta olan uygulamalarda CPU kullanımını azaltır.
Canlandırmalar veya canlı veriler için başka bir kare planlamak üzere ctx.request_repaint() çağrısını ya da zamanlanmış güncellemeler için süreyle birlikte request_repaint_after çağrısını kullanın.
ui.label(format!("Tick: {}", self.counter));
self.counter += 1;
ctx.request_repaint(); // keep animatingSaklamalı Mod Bileşen Kimlikleri Yok (Büyük Ölçüde)
egui, bileşen kimliğini çağrı sırasından ve konumundan türeterek otomatik olarak bir Id oluşturur. Bu, kareler arasında kararlı belleğe ihtiyaç duyan daraltılabilir başlıklar gibi öğeler için önemlidir.
İki bileşen çakışabilecekse (örneğin bir döngüde aynı etikete sahip düğmeler), belirsizliği gidermek için bunları ui.push_id(i, |ui| ...) ile sarın.
for (i, item) in self.items.iter().enumerate() {
ui.push_id(i, |ui| {
if ui.button(&item.label).clicked() {
println!("clicked {}", i);
}
});
}Anlık Modun Ödünleşimleri
Anlık mod, kullanıcı arayüzü kodunu doğrudan veriye dayalı hâle getirir: bir if bir bölümü gösterir veya gizler, bir for ise bir listeyi işler. Düğümleri elle ekleyip kaldırmanız gerekmez ve model ile görünüm arasında senkronizasyon kaybı oluşmaz.
Bunun bedeli, kullanıcı arayüzünün tamamının her karede yeniden çalıştırılmasıdır. Bu nedenle kare başına yapılan işi düşük maliyetli tutun ve update içinde ağır hesaplamalardan kaçının.
if self.logged_in {
ui.label(format!("Welcome, {}", self.user));
} else {
ui.label("Please sign in.");
}En Küçük Eksiksiz Uygulama
Hepsini bir araya getirelim: bir yapı durumu tutar, update bunu çizer ve main pencereyi çalıştırır. Bu, her egui masaüstü programının tüm iskeletidir.
Diğer her şey (yerleşim, tema oluşturma, paketleme) bu döngünün üzerine kurulur.
#[derive(Default)]
struct App { count: i32 }
impl eframe::App for App {
fn update(&mut self, ctx: &egui::Context, _: &mut eframe::Frame) {
egui::CentralPanel::default().show(ctx, |ui| {
if ui.button("+1").clicked() { self.count += 1; }
ui.label(format!("Count: {}", self.count));
});
}
}Rust egui'yi Neden Sever
egui'nin tasarımı Rust'ın güçlü yönlerinden yararlanır. &mut self değerini tek bir update çağrısına ödünç vermek, ödünç denetleyicisinin bileşenlerle modeliniz arasında veri yarışları olmadığını garanti etmesini sağlar.
Paylaşılan değiştirilebilir durumu yakalayan geri çağırmalar yoktur; saklamalı bir ağaç tarafından zorunlu kılınan Rc<RefCell> grafikleri de yoktur. Yalnızca yalın sahiplik ve kare başına tek bir değiştirilebilir geçiş vardır.
Kısa Yoklama
Anlık mod konusundaki kavrayışınızı sınayın.
Özet
egui anlık modludur: tüm kullanıcı arayüzü her karede eframe::App::update içinde yeniden oluşturulur. Bileşenler, hemen inceleyeceğiniz bir Response döndüren işlev çağrılarıdır.
Verileriniz self içinde bulunur ve değiştirilebilir başvuruyla aktarılır; bu nedenle ödünç denetleyicisi model ile görünümü eşzamanlı tutar. eframe::run_native pencereyi ve olay döngüsünü barındırır. Sırada bileşen paletini ve yerleşim sistemini inceleyeceğiz.
Sıkça Sorulan Sorular
“Anında Mod Kullanıcı Arayüzü Temelleri” dersi ücretsiz mi?
Evet — “Anında Mod Kullanıcı Arayüzü Temelleri” 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.
“Anında Mod Kullanıcı Arayüzü Temelleri” dersinde ne öğreneceğim?
egui'nin nasıl çizim yaptığını anlayın. 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 1. dersidir.
“Anında Mod Kullanıcı Arayüzü Temelleri” 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