Taffy
Taffy 是一个灵活、高性能、跨平台的 UI 布局库,使用 Rust 编写。
它目前实现了 CSS 块级、Flexbox 和 CSS Grid 布局算法。计划支持其他布局范式。有关未来开发计划的更多信息,请参阅 路线图 issue。
这个 crate 是一个跨团队协作项目,旨在作为其他 UI 和 GUI 库的依赖项使用。 目前,它为以下项目提供支持:
- Dioxus:一个类似 React 的库,用于使用 Rust 构建快速、可移植和美观的用户界面
- Bevy:一个符合人体工程学的、以 ECS 为核心的 Rust 游戏引擎
- 通过 Floem UI 框架支持 Lapce 文本编辑器
- 通过 GPUI UI 框架支持 Zed 文本编辑器
用法
use taffy::prelude::*;
// 首先创建一个 TaffyTree 实例
let mut tree : TaffyTree<()> = TaffyTree::new();
// 使用 `TaffyTree.new_leaf` 和 `TaffyTree.new_with_children` 创建节点树。
// 这些函数都会返回一个可用于引用该节点的节点 ID
// Style 结构体用于指定样式信息
let header_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: length(100.0) },
..Default::default()
},
).unwrap();
let body_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: auto() },
flex_grow: 1.0,
..Default::default()
},
).unwrap();
let root_node = tree
.new_with_children(
Style {
flex_direction: FlexDirection::Column,
size: Size { width: length(800.0), height: length(600.0) },
..Default::default()
},
&[header_node, body_node],
)
.unwrap();
// 在树的根节点上调用 compute_layout 以运行布局算法
tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap();
// 使用 `TaffyTree.layout` 检查计算后的布局
assert_eq!(tree.layout(root_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(root_node).unwrap().size.height, 600.0);
assert_eq!(tree.layout(header_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(header_node).unwrap().size.height, 100.0);
assert_eq!(tree.layout(body_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(body_node).unwrap().size.height, 500.0); // 这个值并未显式设置,而是由 Taffy 计算得出
其他语言的绑定
- 通过 stretchable 支持 Python
- 正在进行的 C 绑定
- 正在进行的 WASM 绑定
学习资源
Taffy 忠实地实现了 Flexbox 和 CSS Grid 规范,因此为网页设计的文档应该可以直接应用于 Taffy 的实现。对于单个样式属性的参考文档,我们推荐 MDN 文档(例如 这个页面 介绍了 width
属性)。通常可以通过搜索引擎搜索 "MDN property-name" 找到这些页面。
如果你对 CSS 布局的指南级文档感兴趣,我们推荐以下资源:
Flexbox
- Flexbox Froggy。这是一个交互式教程/游戏,让你以有趣的方式学习 Flexbox 的基本部分。
- CSS Tricks 的 Flexbox 完全指南。这是一份详细的指南,包含插图和对不同 Flexbox 属性及其工作原理的全面书面解释。
CSS Grid
- CSS Grid Garden。这是一个交互式教程/游戏,让你以有趣的方式学习 CSS Grid 的基本部分。
- CSS Tricks 的 CSS Grid 完全指南。这是一份详细的指南,包含插图和对不同 CSS Grid 属性及其工作原理的全面书面解释。
基准测试(对比 Yoga)
- 在配备 M1 Pro 处理器的 2021 款 MacBook Pro 上使用 criterion 运行
- 基准测试仅测量布局计算。不测量树的创建。
- Yoga 基准测试通过 yoga crate(Rust 绑定)运行
- 大多数流行网站似乎有 3,000 到 10,000 个节点(尽管它们还需要文本布局,这是 yoga 和 taffy 都没有实现的)。
请注意,下表包含多个不同的单位(毫秒与微秒)
基准测试 | 节点数 | 深度 | Yoga (ba27f9d) | Taffy (71027a8) |
---|---|---|---|---|
yoga 'huge nested' | 1,000 | 3 | 364.60 µs | 329.04 µs |
yoga 'huge nested' | 10,000 | 4 | 4.1988 ms | 4.3486 ms |
yoga 'huge nested' | 100,000 | 5 | 45.804 ms | 38.559 ms |
big trees (wide) | 1,000 | 1 | 737.77 µs | 505.99 µs |
big trees (wide) | 10,000 | 1 | 7.1007 ms | 8.3395 ms |
big trees (wide) | 100,000 | 1 | 135.78 ms | 247.42 ms |
big trees (deep) | 4,000 | 12 | 2.2333 ms | 1.7400 ms |
big trees (deep) | 10,000 | 14 | 5.9477 ms | 4.4445 ms |
big trees (deep) | 100,000 | 17 | 76.755 ms | 63.778 ms |
super deep | 1,000 | 1,000 | 555.32 µs | 472.85 µs |
贡献
欢迎贡献:
如果你想使用、改进或构建 taffy
,欢迎加入讨论,开启 issue 或提交 PR。
如果你对如何使用 taffy
有疑问,请开启 讨论,以便我们能以其他人也能找到的方式回答你的问题。