特性
- 简单、易用、功能齐全的 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将自动:
- 获取我们__视图逻辑__的结果并布局其小部件。
- 处理来自我们系统的事件,并为我们的__更新逻辑__生成__消息__。
- 绘制最终的用户界面。
实现细节
Iced最初诞生于尝试将Elm和[The Elm Architecture]的简洁性引入到Coffee,这是我正在开发的一个2D游戏引擎。
库的核心部分是在2019年5月的这个拉取请求中实现的。第一个alpha版本最终作为一个与渲染器无关的GUI库发布。该库并未提供渲染器,而是在ggez
(一个游戏库)的基础上实现了当前的tour示例。
从那时起,重点转向提供一个包含电池的、面向最终用户的GUI库,同时保持生态系统的模块化:
贡献 / 反馈
我们非常感谢您的贡献!如果您想贡献,请阅读我们的贡献指南以获取更多详细信息。
我们也欢迎您的反馈!您可以在我们的Discourse论坛创建一个新主题,或者加入我们的Discord服务器进行交流。
赞助商
Iced的开发由Kraken.com的Cryptowatch团队赞助。