[−][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 |
Element | A generic |
Hasher | The hasher used to compare layouts. |
Layout | The computed bounds of a |
Node | The visual requirements of a |
Point | A 2D point. |
Rectangle | A rectangle. |
Style | The appearance of a |
UserInterface | A set of interactive graphical elements with a specific |
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. |