0Pricing
Learn Rust Coding · Pelajaran

Dasar-Dasar UI Mode Langsung

Pahami cara egui merender.

Dasar-Dasar UI Mode Langsung adalah pelajaran Learn Rust Coding gratis di CoddyKit. Ini adalah pelajaran 1 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.

Makna Mode Immediate

egui adalah pustaka GUI dengan mode immediate. Berbeda dari perangkat bantu mode retained (GTK, Qt) yang mengharuskan Anda membuat pohon widget persisten, egui membangun ulang seluruh UI dari awal pada setiap bingkai.

Kode Anda berjalan dari atas ke bawah pada setiap bingkai dan menghasilkan widget sebagai panggilan fungsi. Tidak ada graf simpul yang disimpan—UI hanyalah efek samping dari menjalankan closure Anda.

Perulangan Update

Aplikasi egui mengimplementasikan eframe::App, yang metode update-nya dipanggil sekali per bingkai, biasanya 60 kali per detik.

Di dalam update, Anda menjelaskan tampilan UI saat ini berdasarkan keadaan terkini. egui tidak menghitung perbedaan apa pun—egui hanya menghasilkan semuanya kembali.

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 dan Ui

Dua tipe inti muncul di mana-mana. egui::Context adalah pegangan bersama yang murah untuk digandakan, yang mengarah ke seluruh keadaan UI pada bingkai tersebut.

Ui adalah wilayah tempat Anda menambahkan widget. Panel dan jendela memberikan &mut Ui di dalam closure-nya; Anda memanggil metode seperti ui.label atau ui.button pada nilai tersebut.

egui::CentralPanel::default().show(ctx, |ui| {
    ui.heading("Dashboard");
    ui.separator();
    ui.label("Widgets go here.");
});

Widget Mengembalikan Response

Karena UI dibangun ulang pada setiap bingkai, Anda tidak dapat mendaftarkan callback seperti pada perangkat bantu retained. Sebagai gantinya, setiap panggilan widget segera mengembalikan Response.

Anda memeriksa Response pada bingkai yang sama: .clicked(), .hovered(), .changed(). Dengan begitu, penanganan peristiwa tetap berada di dalam tata letak.

if ui.button("Save").clicked() {
    self.save();
}
let resp = ui.text_edit_singleline(&mut self.name);
if resp.changed() {
    self.dirty = true;
}

Keadaan Berada pada Anda

egui hampir tidak menyimpan data aplikasi. Nilai widget Anda berada di dalam self pada struct App, dan Anda meneruskan referensi yang dapat diubah ke widget.

Kolom teks menerima &mut String; kotak centang menerima &mut bool. egui menulis kembali melalui referensi tersebut, sehingga struct Anda menjadi satu-satunya sumber kebenaran.

struct MyApp {
    name: String,
    enabled: bool,
}

// inside update:
ui.text_edit_singleline(&mut self.name);
ui.checkbox(&mut self.enabled, "Enabled");

Menyiapkan eframe

eframe adalah kerangka kerja resmi yang menjalankan egui di desktop dan web. Kerangka ini mengelola jendela native, permukaan GPU, dan perulangan peristiwa.

Anda menjalankannya dengan eframe::run_native, sambil meneruskan judul jendela, opsi native, dan closure yang membangun App Anda.

fn main() -> eframe::Result<()> {
    let opts = eframe::NativeOptions::default();
    eframe::run_native(
        "My App",
        opts,
        Box::new(|_cc| Ok(Box::new(MyApp::default()))),
    )
}

Pengecatan Ulang Dipicu oleh Input

Secara default, egui hanya melakukan pengecatan ulang saat terjadi sesuatu: gerakan tetikus, penekanan tombol, atau permintaan eksplisit. Ini menghemat CPU pada aplikasi yang sedang tidak aktif.

Untuk animasi atau data langsung, panggil ctx.request_repaint() untuk menjadwalkan frame berikutnya, atau gunakan request_repaint_after dengan durasi tertentu untuk pembaruan terjadwal.

ui.label(format!("Tick: {}", self.counter));
self.counter += 1;
ctx.request_repaint(); // keep animating

Tanpa ID Widget yang Dipertahankan (Hampir)

egui memperoleh identitas widget dari urutan pemanggilan dan posisinya, lalu membuat Id secara otomatis. Hal ini penting untuk hal-hal seperti header yang dapat diciutkan dan memerlukan memori yang stabil di antara frame.

Jika dua widget dapat bertabrakan — misalnya tombol dengan label yang sama di dalam perulangan — bungkus keduanya dengan ui.push_id(i, |ui| ...) agar tidak ambigu.

for (i, item) in self.items.iter().enumerate() {
    ui.push_id(i, |ui| {
        if ui.button(&item.label).clicked() {
            println!("clicked {}", i);
        }
    });
}

Kompromi Mode Langsung

Mode langsung membuat kode UI sepenuhnya digerakkan oleh data: if menampilkan atau menyembunyikan bagian, sedangkan for merender daftar. Tidak ada penambahan atau penghapusan node secara manual dan tidak ada ketidaksinkronan antara model dan tampilan.

Konsekuensinya, seluruh UI dijalankan ulang pada setiap frame. Jadi, buat pekerjaan per frame tetap ringan dan hindari komputasi berat di dalam update.

if self.logged_in {
    ui.label(format!("Welcome, {}", self.user));
} else {
    ui.label("Please sign in.");
}

Aplikasi Lengkap Minimal

Jika digabungkan: sebuah struct menyimpan keadaan, update menggambarnya, dan main menjalankan jendela. Inilah kerangka lengkap setiap program desktop egui.

Hal lainnya — tata letak, tema, dan pengemasan — dibangun di atas perulangan ini.

#[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));
        });
    }
}

Mengapa Rust Menyukai egui

Desain egui memanfaatkan keunggulan Rust. Peminjaman &mut self ke dalam satu pemanggilan update berarti pemeriksa peminjaman menjamin tidak ada perlombaan data antara widget dan model Anda.

Tidak ada callback yang menangkap keadaan bersama yang dapat diubah, tidak ada grafik Rc<RefCell> yang dipaksakan oleh pohon yang dipertahankan — hanya kepemilikan biasa dan satu lintasan yang dapat diubah pada setiap frame.

Pemeriksaan Singkat

Uji pemahaman Anda tentang mode langsung.

Ringkasan

egui menggunakan mode langsung: seluruh UI dibangun ulang pada setiap frame di dalam eframe::App::update. Widget berupa pemanggilan fungsi yang langsung mengembalikan Response untuk Anda periksa.

Data Anda berada di dalam self dan diteruskan melalui referensi yang dapat diubah, sehingga pemeriksa peminjaman menjaga model dan tampilan tetap sinkron. eframe::run_native mengelola jendela dan perulangan peristiwa. Selanjutnya, kita akan menjelajahi kumpulan widget dan sistem tata letak.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar UI Mode Langsung” gratis?

Ya — teks lengkap “Dasar-Dasar UI Mode Langsung” 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 “Dasar-Dasar UI Mode Langsung”?

Pahami cara egui merender. 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 1 dari 4.

Berapa lama pelajaran “Dasar-Dasar UI Mode Langsung” 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

  1. Dasar-Dasar UI Mode Langsung
  2. Widget dan Tata Letak
  3. Mengelola Keadaan Aplikasi
  4. Mengemas Aplikasi Desktop
← Kembali ke Learn Rust Coding