windui 0.6.0

轻量跨平台桌面 GUI：tiny-skia 渲染 + 平台原生窗口/文字（Windows: Win32+DirectWrite；macOS: Cocoa+CoreText）
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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107

//! Phase 5 验证：ScrollView + Tabs + Divider + Dialog。
//!
//! 主界面截屏：cargo run --example phase5_containers -- --screenshot artifacts/phase5.png
//! 对话框截屏：cargo run --example phase5_containers -- --dialog --screenshot artifacts/phase5_dialog.png

use windui::prelude::*;

fn list_item(i: usize) -> Element {
    Element::row()
        .width_match()
        .height(40)
        .cross(Align::Center)
        .padding_xy(12, 0)
        .bg(if i.is_multiple_of(2) {
            Color::WHITE
        } else {
            Color::hex(0xF7F9FB)
        })
        .child(
            Element::label(format!("列表项 #{i:02} — 可滚动内容"))
                .font_size(15.0)
                .fg(Color::hex(0x2D3436))
                .weight(1.0),
        )
        .child(Element::label("›").font_size(18.0).fg(Color::hex(0xAAB0B8)))
}

fn main() {
    let dialog_open = std::env::args().any(|a| a == "--dialog");
    let show = signal(dialog_open);
    let tab = signal(0usize);

    // 列表页：滚动容器装入 20 个条目
    let mut list = Element::scroll().fill().bg(Color::WHITE).corner(8.0);
    for i in 0..20 {
        list = list.child(list_item(i));
    }
    let page_list = Element::col().fill().child(list);

    let show2 = show;
    let page_about = Element::col()
        .fill()
        .padding(16)
        .spacing(12)
        .child(
            Element::label("windui")
                .font_size(24.0)
                .fg(Color::hex(0x1A1A2E))
                .height(32)
                .width_match(),
        )
        .child(
            Element::label("轻量 Windows GUI：Win32 + tiny-skia + DirectWrite")
                .font_size(14.0)
                .fg(Color::hex(0x636E72))
                .height(22)
                .width_match(),
        )
        .child(Element::divider())
        .child(Element::button("打开对话框").on_click(move |_| show2.set(true)));

    let tabs = Element::tabs(tab, vec![("列表", page_list), ("关于", page_about)]);

    let show3 = show;
    let dialog = Element::dialog(
        show,
        Element::col()
            .width(300)
            .bg(Color::WHITE)
            .corner(12.0)
            .padding(20)
            .spacing(14)
            .child(
                Element::label("提示")
                    .font_size(20.0)
                    .fg(Color::hex(0x1A1A2E))
                    .height(28)
                    .width_match(),
            )
            .child(
                Element::label("这是一个模态对话框，遮罩会吞掉下层点击。")
                    .font_size(14.0)
                    .fg(Color::hex(0x636E72))
                    .height(40)
                    .width_match(),
            )
            .child(
                Element::row()
                    .width_match()
                    .height(40)
                    .child(Element::button("关闭").on_click(move |_| show3.set(false))),
            ),
    );

    // 根：主界面 + 叠加对话框
    let ui = Element::stack()
        .fill()
        .bg(Color::hex(0xEFF1F4))
        .child(Element::col().fill().padding(16).child(tabs))
        .child(dialog);

    App::new("Phase 5 — 容器与导航", 480, 440)
        .bg(Color::hex(0xEFF1F4))
        .screenshot_from_args()
        .content(ui)
        .run();
}