Pixel-widgets

pixel-widgets 是一个专注于图形应用程序兼容性的基于组件的用户界面库。

特性

• 非常紧凑且易于使用的 API
• API 不可知渲染
• 基于 Component 的工作流程
• CSS 样式的 样式化
• 许多内置 小部件
• 包含基于 wgpu 的渲染器

概述

pixel-widgets 中的用户界面由 Component 组成。这些组件管理自己的状态，并在状态发生变化时生成 UI 元素。每个组件实现一些方法

• view - 此方法为当前组件状态渲染 UI 元素。当状态更新时，视图将重新渲染。方法
• update - UI 元素生成消息，这些消息将传递给更新方法。在此处，组件将根据这些消息更新其内部状态。

快速入门

此示例演示了如何在包含的沙盒中定义组件并运行它。如果您想在您的游戏引擎中使用 pixel-widgets，则需要更多的工作。

use pixel_widgets::prelude::*;

// The main component for our simple application
struct Counter {
    initial_value: i32,
}

然后，我们必须定义一个消息类型。消息类型应该能够告诉我们 UI 中发生了什么。

// The message type that will be used in our `Counter` component.
#[derive(Clone)]
enum Message {
    UpPressed,
    DownPressed,
}

最后，我们必须实现 Component

use pixel_widgets::prelude::*;

// The main component for our simple application
#[derive(Default)]
struct Counter {
    initial_value: i32,
}

// The message type that will be used in our `Counter` component.
#[derive(Clone)]
enum Message {
    UpPressed,
    DownPressed,
}

impl Component for Counter {
    type State = i32;
    type Message = Message;
    type Output = ();

    // Creates the state of our component when it's first constructed.
    fn mount(&self) -> Self::State {
        self.initial_value
    }

    // Generates the widgets for this component, based on the current state.
    fn view<'a>(&'a self, state: &'a i32) -> Node<'a, Message> {
        // You can build the view using declarative syntax with the view! macro,
        //  but you can also construct widgets using normal rust code.
        view! {
            Column => {
                Button { text: "Up", on_clicked: Message::UpPressed }
                Text { val: format!("Count: {}", *state) }
                Button { text: "Down", on_clicked: Message::DownPressed }
            }
        }
    }

    // Updates the component state based on a message.
    fn update(&self, message: Message, mut state: State<i32>, _context: Context<Message, ()>) {
        match message {
            Message::UpPressed => *state += 1,
            Message::DownPressed => *state -= 1,
        }
    }
}

#[tokio::main]
async fn main() {
    use winit::window::WindowBuilder;

    Sandbox::new(
        Counter { initial_value: 15 }, 
        StyleBuilder::default(), 
        WindowBuilder::new()
            .with_title("Counter")
            .with_inner_size(winit::dpi::LogicalSize::new(240, 240))
    )
    .await
    .expect("failed to load style")
    .run()
    .await;
}

示例

如果您想了解更多示例，请查看 Git 仓库中的 示例目录。