1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
# Overview
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:
```rust
#[derive(Default)]
struct Counter {
value: i32,
}
```
Next, we need to define the possible user interactions of our counter: the button presses. These interactions are our __messages__:
```rust
#[derive(Debug, Clone, Copy)]
pub enum Message {
Increment,
Decrement,
}
```
Now, let's show the actual counter by putting it all together in our __view logic__:
```rust
use iced::widget::{button, column, text, Column};
impl Counter {
pub fn view(&self) -> Column<Message> {
// We use a column: a simple vertical layout
column![
// The increment button. We tell it to produce an
// `Increment` message when pressed
button("+").on_press(Message::Increment),
// We show the value of the counter here
text(self.value).size(50),
// The decrement button. We tell it to produce a
// `Decrement` message when pressed
button("-").on_press(Message::Decrement),
]
}
}
```
Finally, we need to be able to react to any produced __messages__ and change our __state__ accordingly in our __update logic__:
```rust
impl Counter {
// ...
pub fn update(&mut self, message: Message) {
match message {
Message::Increment => {
self.value += 1;
}
Message::Decrement => {
self.value -= 1;
}
}
}
}
```
And that's everything! We just wrote a whole user interface. Let's run it:
```rust
fn main() -> iced::Result {
iced::run("A cool counter", Counter::update, Counter::view)
}
```
Iced will automatically:
1. Take the result of our __view logic__ and layout its widgets.
1. Process events from our system and produce __messages__ for our __update logic__.
1. Draw the resulting user interface.
Read the [book], the [documentation], and the [examples] to learn more!
[book]: https://book.iced.rs/
[documentation]: https://docs.rs/iced/
[examples]: https://github.com/iced-rs/iced/tree/master/examples#examples
[The Elm Architecture]: https://guide.elm-lang.org/architecture/
|
