Widgets y distribución
Cree botones, entradas y paneles
Widgets y distribución es una lección gratuita de Learn Rust Coding en CoddyKit. Esta es la lección 2 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.
La paleta de widgets
egui incluye un amplio conjunto de widgets integrados: etiquetas, encabezados, botones, casillas de verificación, botones de opción, controles deslizantes, valores arrastrables, ediciones de texto, cuadros combinados y mucho más.
Cada uno es un método de Ui y devuelve un Response. Las interfaces se componen llamándolos en secuencia, en lugar de instanciar clases.
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 y el trait Widget
Los métodos prácticos, como ui.button, envuelven estructuras de widgets más completas. Para los widgets configurables, construya la estructura y pásela a ui.add.
Cualquier elemento que implemente el trait Widget funciona con ui.add, incluidos sus propios widgets personalizados. Este es el núcleo extensible de la API de egui.
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(); }Diseño vertical y horizontal
De forma predeterminada, un Ui distribuye los widgets de arriba abajo. Llame a ui.horizontal(|ui| ...) para colocarlos de izquierda a derecha dentro de una fila.
Estos closures de diseño se pueden anidar libremente, lo que le permite crear filas de columnas y columnas de filas mediante un flujo de control normal de Rust.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Columnas
Para diseños de varias columnas con espaciado uniforme, ui.columns(n, |cols| ...) le proporciona un slice de valores Ui, uno por columna.
Cada columna tiene el mismo ancho y usted añade widgets en cols[i]. Esto resulta práctico para paneles o formularios contiguos.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Paneles
La estructura de nivel superior se crea con paneles: TopBottomPanel para barras de menú y de estado, SidePanel para la navegación y CentralPanel para el contenido principal.
Añada primero los paneles laterales y superiores; el CentralPanel ocupa el espacio restante. El orden importa porque cada panel se apropia de su borde.
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");
});Áreas de desplazamiento
Cuando el contenido supera el espacio disponible, envuélvalo en un ScrollArea. Este recorta el desbordamiento y añade barras de desplazamiento automáticamente.
Utilice .auto_shrink([false, false]) para que ocupe toda la región en lugar de ajustarse al contenido, y .stick_to_bottom(true) para las vistas de registros.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Cuadrículas para formularios
egui::Grid alinea los widgets en una tabla ordenada de filas y columnas, ideal para formularios de etiqueta y valor.
Añada las celdas de izquierda a derecha y llame a ui.end_row() para iniciar la siguiente fila. egui mantiene las columnas alineadas entre las filas automáticamente.
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();
});Espaciado y alineación
Para un control preciso, utilice auxiliares de espaciado: ui.add_space(pixels) inserta un espacio y ui.separator() dibuja una línea divisoria.
Para alinear el contenido, utilice ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...), que es la forma habitual de desplazar los botones hasta el borde derecho de una fila.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Ventanas flotantes
Además de los paneles, egui::Window crea una ventana flotante móvil y redimensionable dentro de su aplicación. Es ideal para paletas de herramientas y cuadros de diálogo.
Vincule su visibilidad a un bool con .open(&mut self.show) para que el botón de cierre alterne su estado.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Estilos y apariencia
La apariencia de cada widget está determinada por ctx.style() y sus Visuals. Cambie de tema con ctx.set_visuals(egui::Visuals::dark()) o light().
Puede ajustar globalmente el espaciado, el redondeado y los colores modificando el estilo, para proporcionar a toda la aplicación una apariencia personalizada y coherente.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Componerlo todo
Las aplicaciones reales anidan estas primitivas: un panel superior con el menú, un panel lateral izquierdo de navegación y un panel central que contiene una cuadrícula dentro de un área de desplazamiento.
Como el diseño consiste simplemente en closures anidados y un flujo de control normal, reestructurar una pantalla es una modificación del código, no una operación de cirugía sobre un árbol.
Comprobación rápida
¿Qué panel debe añadir en último lugar?
Resumen
egui ofrece etiquetas, controles deslizantes, ediciones de texto y mucho más: todos son métodos de Ui que devuelven un Response, con ui.add para los widgets configurables.
El diseño se construye a partir de closures anidados: horizontal, vertical, columns, Grid y ScrollArea. Los paneles y Window definen la estructura de nivel superior, y Visuals controla el estilo. A continuación: gestionar el estado de la aplicación de forma ordenada.
Preguntas frecuentes
¿La lección «Widgets y distribución» es gratis?
Sí — el texto completo de «Widgets y distribución» 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 «Widgets y distribución»?
Cree botones, entradas y paneles 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 2 de 4.
¿Cuánto tiempo toma la lección «Widgets y distribución»?
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