xilem 0.4.0

A next-generation cross-platform Rust UI framework.
Documentation 
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

// Copyright 2024 the Xilem Authors
// SPDX-License-Identifier: Apache-2.0

//! Flex properties can be set in Xilem.

use masonry::properties::types::AsUnit;
use masonry::properties::types::{CrossAxisAlignment, MainAxisAlignment};
use winit::error::EventLoopError;
use xilem::view::{FlexExt as _, FlexSpacer, Label, button, flex_row, label, sized_box};
use xilem::{EventLoop, WidgetView, WindowOptions, Xilem};

/// A component to make a bigger than usual button.
fn big_button(
    label: impl Into<Label>,
    callback: impl Fn(&mut i32) + Send + Sync + 'static,
) -> impl WidgetView<i32> {
    sized_box(button(label.into(), callback))
        .width(40.px())
        .height(40.px())
}

fn app_logic(data: &mut i32) -> impl WidgetView<i32> + use<> {
    // This is the flex view, alternatives are `flex_col` or `flex` which allows dynamically switching the axis
    flex_row((
        FlexSpacer::Fixed(30.px()),
        big_button("-", |data| {
            *data -= 1;
        }),
        FlexSpacer::Flex(1.0),
        label(format!("count: {data}")).text_size(32.).flex(5.0),
        FlexSpacer::Flex(1.0),
        big_button("+", |data| {
            *data += 1;
        }),
        FlexSpacer::Fixed(30.px()),
    ))
    .cross_axis_alignment(CrossAxisAlignment::Center)
    .main_axis_alignment(MainAxisAlignment::Center)
}

fn main() -> Result<(), EventLoopError> {
    let app = Xilem::new_simple(0, app_logic, WindowOptions::new("Centered Flex"));
    app.run_in(EventLoop::with_user_event())?;
    Ok(())
}