Conceptos básicos de la interfaz de usuario en modo inmediato
Comprenda cómo renderiza egui
Conceptos básicos de la interfaz de usuario en modo inmediato es una lección gratuita de Learn Rust Coding en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Learn Rust Coding, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Learn Rust Coding incluye 4 lecciones en total.
Qué significa el modo inmediato
egui es una biblioteca de GUI de modo inmediato. A diferencia de los toolkits de modo retenido (GTK, Qt), en los que se construye un árbol persistente de widgets, egui reconstruye toda la interfaz desde cero en cada frame.
Su código se ejecuta de principio a fin en cada frame y emite widgets mediante llamadas a funciones. No hay un grafo de nodos almacenado: la interfaz es simplemente un efecto secundario de ejecutar su closure.
El bucle de actualización
Una aplicación de egui implementa eframe::App, cuyo método update se llama una vez por frame, normalmente 60 veces por segundo.
Dentro de update, describe cómo debe verse la interfaz en este momento, dado el estado actual. egui no calcula diferencias: simplemente vuelve a emitirlo todo.
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 y Ui
Hay dos tipos fundamentales que aparecen en todas partes. egui::Context es el manejador compartido y fácil de clonar de todo el estado de la interfaz del frame.
Ui es una región en la que se añaden widgets. Los paneles y las ventanas le proporcionan un &mut Ui dentro de su closure; puede llamar en él a métodos como ui.label o ui.button.
egui::CentralPanel::default().show(ctx, |ui| {
ui.heading("Dashboard");
ui.separator();
ui.label("Widgets go here.");
});Los widgets devuelven respuestas
Como la interfaz se reconstruye en cada frame, no puede registrar callbacks como se hace en los toolkits de modo retenido. En su lugar, cada llamada a un widget devuelve inmediatamente un Response.
Inspeccione el Response en el mismo frame: .clicked(), .hovered(), .changed(). Así, la gestión de eventos queda integrada con el diseño.
if ui.button("Save").clicked() {
self.save();
}
let resp = ui.text_edit_singleline(&mut self.name);
if resp.changed() {
self.dirty = true;
}El estado lo gestiona usted
egui almacena muy pocos datos de la aplicación. Los valores de sus widgets viven en self, dentro de la estructura App, y usted pasa referencias mutables a los widgets.
Un campo de texto recibe &mut String; una casilla de verificación recibe &mut bool. egui escribe de vuelta a través de la referencia, por lo que su estructura es la única fuente de verdad.
struct MyApp {
name: String,
enabled: bool,
}
// inside update:
ui.text_edit_singleline(&mut self.name);
ui.checkbox(&mut self.enabled, "Enabled");Configurar eframe
eframe es el framework oficial que aloja egui en equipos de escritorio y en la web. Se encarga de la ventana nativa, la superficie de GPU y el bucle de eventos.
Se inicia con eframe::run_native, pasando un título de ventana, opciones nativas y un closure que construye su App.
fn main() -> eframe::Result<()> {
let opts = eframe::NativeOptions::default();
eframe::run_native(
"My App",
opts,
Box::new(|_cc| Ok(Box::new(MyApp::default()))),
)
}Repintado controlado por la entrada
De forma predeterminada, egui solo repinta cuando ocurre algo: un movimiento del ratón, una pulsación de tecla o una solicitud explícita. Esto ahorra CPU en aplicaciones inactivas.
Para animaciones o datos en tiempo real, llame a ctx.request_repaint() para programar otro frame, o a request_repaint_after con una duración para realizar actualizaciones temporizadas.
ui.label(format!("Tick: {}", self.counter));
self.counter += 1;
ctx.request_repaint(); // keep animatingSin identificadores de widgets retenidos (en su mayor parte)
egui deriva la identidad del widget a partir del orden y la posición de las llamadas, y genera un Id automáticamente. Esto es importante para elementos como los encabezados contraíbles, que necesitan memoria estable entre frames.
Cuando dos widgets podrían colisionar —por ejemplo, botones con la misma etiqueta dentro de un bucle—, envuélvalos con ui.push_id(i, |ui| ...) para diferenciarlos.
for (i, item) in self.items.iter().enumerate() {
ui.push_id(i, |ui| {
if ui.button(&item.label).clicked() {
println!("clicked {}", i);
}
});
}Ventajas y desventajas del modo inmediato
El modo inmediato hace que el código de la interfaz se base directamente en los datos: un if muestra u oculta una sección y un for representa una lista. No hay que añadir ni eliminar nodos manualmente, ni se produce desincronización entre el modelo y la vista.
El coste es que toda la interfaz se vuelve a ejecutar en cada frame, así que debe mantener bajo el trabajo por frame y evitar cálculos pesados dentro de update.
if self.logged_in {
ui.label(format!("Welcome, {}", self.user));
} else {
ui.label("Please sign in.");
}Aplicación completa mínima
En conjunto: una estructura contiene el estado, update lo dibuja y main ejecuta la ventana. Este es el esqueleto completo de cualquier programa de escritorio con egui.
Todo lo demás —diseño, temas y empaquetado— se construye sobre este bucle.
#[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));
});
}
}Por qué Rust encaja tan bien con egui
El diseño de egui aprovecha los puntos fuertes de Rust. Tomar prestado &mut self en una única llamada a update permite que el borrow checker garantice que no haya carreras de datos entre los widgets y su modelo.
No hay callbacks que capturen estado mutable compartido ni grafos de Rc<RefCell> impuestos por un árbol retenido: solo propiedad directa y un paso mutable por frame.
Comprobación rápida
Compruebe cuánto ha entendido del modo inmediato.
Resumen
egui funciona en modo inmediato: toda la interfaz se reconstruye en cada frame dentro de eframe::App::update. Los widgets son llamadas a funciones que devuelven un Response que se inspecciona de inmediato.
Sus datos viven en self y se pasan mediante referencias mutables, por lo que el borrow checker mantiene sincronizados el modelo y la vista. eframe::run_native aloja la ventana y el bucle de eventos. A continuación exploraremos la paleta de widgets y el sistema de diseño.
Aprende Rust con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 39
- Lecciones
- 144
Preguntas frecuentes
¿La lección «Conceptos básicos de la interfaz de usuario en modo inmediato» es gratis?
Sí — el texto completo de «Conceptos básicos de la interfaz de usuario en modo inmediato» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Learn Rust Coding, actualiza a CoddyKit PRO. El curso de Learn Rust Coding incluye 4 lecciones en total.
¿Qué aprenderé en «Conceptos básicos de la interfaz de usuario en modo inmediato»?
Comprenda cómo renderiza egui Practicas Learn Rust Coding con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Learn Rust Coding?
No se requiere experiencia previa. Learn Rust Coding en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Conceptos básicos de la interfaz de usuario en modo inmediato»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Learn Rust Coding?
Sí. Cada lección de Learn Rust Coding incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Conceptos básicos de la interfaz de usuario en modo inmediato
- Widgets y distribución
- Gestionar el estado de la aplicación
- Empaquetar una aplicación de escritorio