<div align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/dc8025d5-e05e-4248-9605-2a288132cec6.svg" width="140px" />

Iced

[][documentation]

一个专注于简洁性和类型安全的 Rust 跨平台 GUI 库。 灵感来自 Elm。

<a href="https://iced.rs/examples/todos.mp4"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/9f7fb123-b827-4997-b33e-39546a473c86.gif" width="275px"> </a> <a href="https://iced.rs/examples/tour.mp4"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/5607650b-1675-4495-aa4c-b033cd65975c.gif" width="273px"> </a> </div>

特性

• 简单、易用、功能齐全的 API
• 类型安全的响应式编程模型
• [跨平台支持]（Windows、macOS、Linux 和 Web）
• 响应式布局
• 内置组件（包括[文本输入]、[可滚动区域]等！）
• 自定义组件支持（创建你自己的组件！）
• [带性能指标的调试覆盖层]
• 对异步操作的一流支持（使用 futures！）
• [模块化生态系统]，分为可重用的部分：
  • 一个[与渲染器无关的本地运行时]，可与现有系统集成
  • 两个[内置渲染器]，利用 [wgpu] 和 [tiny-skia]
    • [iced_wgpu] 支持 Vulkan、Metal 和 DX12
    • [iced_tiny_skia] 提供软件替代方案作为备选
  • 一个[窗口外壳]
  • 一个利用 DOM 的[Web 运行时]

Iced 目前是实验性软件。 [查看路线图]、[查看问题]，并[随时贡献！] [跨平台支持]: https://raw.githubusercontent.com/iced-rs/iced/master/docs/images/todos_desktop.jpg [文本输入]: https://iced.rs/examples/text_input.mp4 [可滚动内容]: https://iced.rs/examples/scrollable.mp4 [带性能指标的调试覆盖层]: https://iced.rs/examples/debug.mp4 [模块化生态系统]: ECOSYSTEM.md [与渲染器无关的原生运行时]: runtime/ [wgpu]: https://github.com/gfx-rs/wgpu [tiny-skia]: https://github.com/RazrFalcon/tiny-skia [iced_wgpu]: wgpu/ [iced_tiny_skia]: tiny_skia/ [内置渲染器]: ECOSYSTEM.md#Renderers [窗口外壳]: winit/ [dodrio]: https://github.com/fitzgen/dodrio [Web运行时]: https://github.com/iced-rs/iced_web [查看路线图]: ROADMAP.md [查看问题]: https://github.com/iced-rs/iced/issues [欢迎贡献！]: #contributing--feedback

概述

受[The Elm Architecture]启发，Iced期望你将用户界面拆分为四个不同的概念：

• 状态 — 你的应用程序的状态
• 消息 — 你关心的用户交互或重要事件
• 视图逻辑 — 一种将你的__状态__显示为可能在用户交互时产生__消息__的小部件的方式
• 更新逻辑 — 一种对__消息__做出反应并更新你的__状态__的方式

让我们来构建一些东西，看看这是如何工作的！假设我们想要一个简单的计数器，可以通过两个按钮来增加和减少。

我们首先对应用程序的__状态__进行建模：

#[derive(Default)]
struct Counter {
    value: i32,
}

接下来，我们需要定义计数器的可能用户交互：按钮按压。这些交互就是我们的__消息__：

#[derive(Debug, Clone, Copy)]
pub enum Message {
    Increment,
    Decrement,
}

现在，让我们在__视图逻辑__中将所有内容组合在一起，展示实际的计数器：

use iced::widget::{button, column, text, Column};

impl Counter {
    pub fn view(&self) -> Column<Message> {
        // 我们使用一个列：一个简单的垂直布局
        column![
            // 增加按钮。我们告诉它在按下时产生一个
            // `Increment`消息
            button("+").on_press(Message::Increment),

            // 我们在这里显示计数器的值
            text(self.value).size(50),

            // 减少按钮。我们告诉它在按下时产生一个
            // `Decrement`消息
            button("-").on_press(Message::Decrement),
        ]
    }
}

最后，我们需要能够在__更新逻辑__中对任何产生的__消息__做出反应，并相应地改变我们的__状态__：

impl Counter {
    // ...

    pub fn update(&mut self, message: Message) {
        match message {
            Message::Increment => {
                self.value += 1;
            }
            Message::Decrement => {
                self.value -= 1;
            }
        }
    }
}

就是这样！我们刚刚编写了一个完整的用户界面。让我们运行它：

fn main() -> iced::Result {
    iced::run("一个酷炫的计数器", Counter::update, Counter::view)
}

Iced将自动：

1. 获取我们__视图逻辑__的结果并布局其小部件。
2. 处理来自我们系统的事件，并为我们的__更新逻辑__生成__消息__。
3. 绘制最终的用户界面。

阅读书籍、文档和示例以了解更多信息！

实现细节

Iced最初诞生于尝试将Elm和[The Elm Architecture]的简洁性引入到Coffee，这是我正在开发的一个2D游戏引擎。

库的核心部分是在2019年5月的这个拉取请求中实现的。第一个alpha版本最终作为一个与渲染器无关的GUI库发布。该库并未提供渲染器，而是在ggez（一个游戏库）的基础上实现了当前的tour示例。

从那时起，重点转向提供一个包含电池的、面向最终用户的GUI库，同时保持生态系统的模块化：

<p align="center"> <a href="ECOSYSTEM.md"> <img alt="Iced生态系统" src="https://yellow-cdn.veclightyear.com/835a84d5/eac30c8b-dd51-4837-a78d-faaf5419e695.png" width="80%"> </a> </p>

贡献 / 反馈

我们非常感谢您的贡献！如果您想贡献，请阅读我们的贡献指南以获取更多详细信息。

我们也欢迎您的反馈！您可以在我们的Discourse论坛创建一个新主题，或者加入我们的Discord服务器进行交流。

赞助商

Iced的开发由Kraken.com的Cryptowatch团队赞助。