Creando un Panel de Controles Interactivo con Iced en Rust

En el mundo del desarrollo de interfaces gráficas en Rust, Iced es una librería poderosa inspirada en el modelo Elm. En este artículo, exploraremos cómo crear un panel de controles simple pero funcional, con elementos como botones, sliders, checkboxes y texto editable. Ideal para dashboards o herramientas de configuración.

¿Por qué Iced para paneles de controles?

• Reactivo y eficiente: Usa un arquitectura basada en mensajes y estado inmutable.
• Cross-platform: Funciona en Windows, macOS y Linux con renderizado GPU.
• Personalizable: Fácil agregar temas y layouts responsivos.

Instalación y Configuración Inicial

Agrega las dependencias a tu Cargo.toml:

[dependencies]
iced = { version = "0.12", features = ["wgpu", "image"] }

Ejecuta cargo build para descargarlas.

Estructura Básica de la Aplicación

Una app Iced requiere implementar tres traits: Message, Update y View. Aquí un esqueleto:

use iced::{
    element::Column, Executor, Sandbox, Settings,
    widget::{button, checkbox, slider, text, text_input},
};

#[derive(Debug, Clone)]
enum Message {
    Toggle(bool),
    SliderChange(f32),
    ButtonPressed,
}

pub struct PanelApp {
    checked: bool,
    value: f32,
}

impl Sandbox for PanelApp {
    type Executor = iced::executor::Default;
    type Message = Message;
    type Theme = iced::Theme;

    fn new() -> Self {
        Self {
            checked: false,
            value: 50.0,
        }
    }

    fn title(&self) -> String {
        String::from("Panel de Controles")
    }

    fn update(&mut self, message: Message) {
        match message {
            Message::Toggle(checked) => self.checked = checked,
            Message::SliderChange(value) => self.value = value,
            Message::ButtonPressed => println!("¡Botón presionado!"),
        }
    }

    fn view(&self) -> iced::Element<Message> {
        Column::new()
            .spacing(10)
            .padding(20)
            .push(text("Panel de Controles en Rust"))
            .push(checkbox("Activar opción", self.checked, Message::Toggle))
            .push(slider(0.0..=100.0, self.value, Message::SliderChange))
            .push(button("Acción").on_press(Message::ButtonPressed))
            .into()
    }
}

pub fn main() -> iced::Result {
    PanelApp::run(Settings::default())
}

Agregando Más Controles al Panel

Expande el panel con un text_input para entradas de texto:

// En la struct
input_value: String,

// En update
Message::InputChanged(String) => self.input_value = input.clone(),

// En view
.push(text_input("Ingresa texto:", &self.input_value, Message::InputChanged))

• Layout: Usa Column o Row para organizar en paneles.
• Estilos: Personaliza con .style(MyStyle).
• Eventos: Todos los controles emiten Message para updates reactivos.

Ejecución y Pruebas

Corre cargo run y verás un panel interactivo. Prueba moviendo el slider, toggling el checkbox y presionando el botón. ¡Perfecto para prototipos rápidos!

Recursos adicionales: Docs de Iced y ejemplos en GitHub.

¡Comparte tus creaciones en los comentarios!