Learn Rust Coding · Pelajaran

Mengelola Keadaan Aplikasi

Simpan dan perbarui data UI.

Mengelola Keadaan Aplikasi adalah pelajaran Learn Rust Coding gratis di CoddyKit. Ini adalah pelajaran 3 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.

Keadaan pada Struct App

Dalam egui, keadaan aplikasi adalah data Rust biasa yang berada pada struct yang mengimplementasikan eframe::App. Tidak ada penyimpanan khusus atau model yang dimiliki kerangka kerja.

Field menyimpan semuanya: input formulir, pilihan, data yang dimuat, dan penanda. Pada setiap frame, update membaca dan mengubah field-field ini secara langsung melalui &mut self.

struct App {
    query: String,
    results: Vec<Item>,
    selected: Option<usize>,
    loading: bool,
}

Menurunkan Default

eframe membangun aplikasi Anda di dalam closure yang diteruskan ke run_native. Pola paling sederhana adalah #[derive(Default)] dan membuatnya dengan App::default().

Untuk nilai awal yang bukan default, implementasikan Default secara manual atau tambahkan konstruktor yang menerima CreationContext untuk penyiapan seperti font atau persistensi.

impl App {
    fn new(cc: &eframe::CreationContext) -> Self {
        let mut app = Self::default();
        app.dark = cc.egui_ctx.style().visuals.dark_mode;
        app
    }
}

Satu-satunya Sumber Kebenaran

Karena widget meminjam &mut ke field yang menjadi penyimpannya, struct selalu menjadi satu-satunya sumber kebenaran. Tidak ada keadaan tampilan terpisah yang harus dijaga agar tetap sinkron.

Kotak centang yang terikat ke &mut self.enabled mencerminkan dan memperbarui nilai bool tersebut secara langsung — bacalah di tempat lain pada frame yang sama dan Anda akan melihat nilai terkininya.

ui.checkbox(&mut self.enabled, "Enabled");
if self.enabled {
    ui.label("Feature is on");
}

Menunda Mutasi

Ada masalah peminjaman yang cukup halus: Anda sering melakukan iterasi pada sebuah Vec sambil ingin menghapus elemen darinya. Anda tidak dapat mengubah vec selama peminjaman bersama masih aktif.

Solusinya adalah mencatat tindakan yang diinginkan dalam variabel lokal selama perulangan, lalu menerapkannya setelah perulangan selesai.

let mut to_remove = None;
for (i, item) in self.items.iter().enumerate() {
    ui.horizontal(|ui| {
        ui.label(&item.name);
        if ui.button("x").clicked() { to_remove = Some(i); }
    });
}
if let Some(i) = to_remove { self.items.remove(i); }

Layar yang Digerakkan Enum

Untuk aplikasi dengan banyak layar, modelkan tampilan saat ini sebagai field enum. Metode update mencocokkannya untuk menentukan apa yang harus digambar.

Hal ini membuat navigasi eksplisit dan menyeluruh — kompilator memaksa Anda menangani setiap layar, sehingga menghilangkan banyak jenis kesalahan perutean.

enum Screen { Home, Settings, About }

match self.screen {
    Screen::Home => self.draw_home(ui),
    Screen::Settings => self.draw_settings(ui),
    Screen::About => self.draw_about(ui),
}

Memori egui untuk Keadaan UI

Sebagian keadaan hanya berkaitan dengan UI, bukan domain Anda — bagian yang diciutkan, posisi gulir, dan keadaan seret. egui menyimpannya di dalam ctx.memory, dengan kunci berupa Id widget.

Anda jarang menyentuhnya secara langsung, tetapi ctx.data_mut memungkinkan Anda menyimpan nilai kecil per-ID yang bertahan di antara frame tanpa memenuhi struct aplikasi Anda.

let id = egui::Id::new("my_toggle");
let mut open = ctx.data_mut(|d| d.get_temp::<bool>(id).unwrap_or(false));
ui.checkbox(&mut open, "Open");
ctx.data_mut(|d| d.insert_temp(id, open));

Pekerjaan Latar Belakang dengan Kanal

Jangan pernah memblokir update dengan I/O lambat — hal itu membekukan perulangan 60 fps. Jalankan thread dan berkomunikasilah melalui kanal std::sync::mpsc.

Pekerja mengirimkan hasil kembali; update mengosongkan penerima secara nonblokir dengan try_recv pada setiap frame. Panggil ctx.request_repaint() dari pekerja agar UI aktif kembali saat data tiba.

if let Ok(msg) = self.rx.try_recv() {
    self.results = msg;
    self.loading = false;
}

Menjalankan Pekerja

Buat salinan Context dan pengirim, lalu masukkan keduanya ke thread. Penyalinan ini murah — secara internal, objek tersebut adalah Arc — dan memungkinkan pekerja meminta pengecatan ulang.

Pindahkan kepemilikan input pekerjaan ke dalam closure untuk memenuhi pemeriksa peminjaman dan menghindari masalah masa hidup.

let tx = self.tx.clone();
let ctx = ctx.clone();
std::thread::spawn(move || {
    let data = expensive_load();
    let _ = tx.send(data);
    ctx.request_repaint();
});

Mempertahankan Keadaan

eframe dapat menserialisasi aplikasi Anda di antara beberapa kali menjalankan program. Aktifkan fitur persistence, turunkan serde::Serialize / Deserialize, dan implementasikan App::save.

Saat memulai, baca keadaan yang disimpan dari cc.storage di konstruktor Anda, lalu gunakan nilai default jika tidak ada yang tersimpan.

fn save(&mut self, storage: &mut dyn eframe::Storage) {
    eframe::set_value(storage, eframe::APP_KEY, self);
}
// in new():
if let Some(s) = cc.storage {
    if let Some(app) = eframe::get_value(s, eframe::APP_KEY) { return app; }
}

Menjaga update Tetap Ringan

Karena update berjalan pada setiap frame, hindari menghitung ulang data turunan yang mahal di sana. Simpan hasilnya dalam field dan hitung ulang hanya saat input berubah.

Pola yang umum: lacak penanda dirty yang ditetapkan oleh Response::changed(), lalu bangun ulang cache di awal update hanya saat dirty.

if self.dirty {
    self.filtered = self.filter_items();
    self.dirty = false;
}
for item in &self.filtered { ui.label(&item.name); }

Kepemilikan Menjaga Kejujuran

Tema yang terus berulang: egui mengandalkan kepemilikan Rust, bukan kerangka kerja, untuk mengelola keadaan. Struct Anda memiliki data, &mut self memberikan akses eksklusif pada setiap frame, dan thread berkomunikasi melalui kanal.

Tidak ada langganan tersembunyi atau grafik callback, sehingga penalaran tentang kapan dan bagaimana keadaan berubah tetap lokal dan eksplisit.

Pemeriksaan Singkat

Bagaimana seharusnya Anda menjalankan pengambilan data jaringan yang lambat?

Ringkasan

Keadaan aplikasi berupa field biasa pada struct eframe::App, yang diubah melalui &mut self pada setiap frame, sehingga struct menjadi satu-satunya sumber kebenaran.

Tunda mutasi selama iterasi, modelkan layar dengan enum, alihkan pekerjaan lambat ke thread melalui kanal, dan pertahankan keadaan menggunakan penyimpanan eframe. Jaga update tetap ringan dengan menyimpan data turunan di balik penanda dirty. Selanjutnya: mengemas aplikasi untuk didistribusikan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengelola Keadaan Aplikasi” gratis?

Ya — teks lengkap “Mengelola Keadaan Aplikasi” 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 “Mengelola Keadaan Aplikasi”?

Simpan dan perbarui data UI. 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 3 dari 4.

Berapa lama pelajaran “Mengelola Keadaan Aplikasi” 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

← Kembali ke Learn Rust Coding