[−][src]Crate iced

Iced is a renderer-agnostic GUI library focused on simplicity and type-safety. Inspired by Elm.

Features

Simple, easy-to-use, renderer-agnostic API
Responsive, flexbox-based layouting
Type-safe, reactive programming model
Built-in widgets
Custom widget support

Check out the repository and the examples for more details!

Usage

Inspired by The Elm Architecture, Iced expects you to split user interfaces into four different concepts:

State — the state of your application
Messages — user interactions or meaningful events that you care about
View logic — a way to display your state as widgets that may produce messages on user interaction
Update logic — a way to react to messages and update your state

We can build something to see how this works! Let's say we want a simple counter that can be incremented and decremented using two buttons.

We start by modelling the state of our application:

use iced::button;

struct Counter {
    // The counter value
    value: i32,

    // The local state of the two buttons
    increment_button: button::State,
    decrement_button: button::State,
}

Next, we need to define the possible user interactions of our counter: the button presses. These interactions are our messages:

#[derive(Debug, Clone, Copy)]
pub enum Message {
    IncrementPressed,
    DecrementPressed,
}

Now, let's show the actual counter by putting it all together in our view logic:

use iced::{Button, Column, Text};
use iced_wgpu::Renderer; // Iced does not include a renderer! We need to bring our own!

impl Counter {
    pub fn view(&mut self) -> Column<Message, Renderer> {
        // We use a column: a simple vertical layout
        Column::new()
            .push(
                // The increment button. We tell it to produce an
                // `IncrementPressed` message when pressed
                Button::new(&mut self.increment_button, "+")
                    .on_press(Message::IncrementPressed),
            )
            .push(
                // We show the value of the counter here
                Text::new(&self.value.to_string()).size(50),
            )
            .push(
                // The decrement button. We tell it to produce a
                // `DecrementPressed` message when pressed
                Button::new(&mut self.decrement_button, "-")
                    .on_press(Message::DecrementPressed),
            )
    }
}

Finally, we need to be able to react to any produced messages and change our state accordingly in our update logic:

impl Counter {
    // ...

    pub fn update(&mut self, message: Message) {
        match message {
            Message::IncrementPressed => {
                self.value += 1;
            }
            Message::DecrementPressed => {
                self.value -= 1;
            }
        }
    }
}

And that's everything! We just wrote a whole user interface. Iced is now able to:

Take the result of our view logic and layout its widgets.
Process events from our system and produce messages for our update logic.
Draw the resulting user interface using our chosen renderer.

Check out the UserInterface type to learn how to wire everything up!

Re-exports

pub use stretch::geometry::Size;

pub use stretch::number::Number;

pub use widget::*;

Modules

input	Map your system events into input events that the runtime can understand.
renderer	Write your own renderer.
widget	Use the built-in widgets or create your own.

Structs

Cache	Reusable data of a specific `UserInterface`.
Element	A generic `Widget`.
Hasher	The hasher used to compare layouts.
Layout	The computed bounds of a `Node` and its children.
Node	The visual requirements of a `Widget` and its children.
Point	A 2D point.
Rectangle	A rectangle.
Style	The appearance of a `Node`.
UserInterface	A set of interactive graphical elements with a specific `Layout`.

Enums

Align	Alignment on the cross axis of a container.
Event	A user interface event.
Justify	Distribution on the main axis of a container.
MouseCursor	The state of the mouse cursor.