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 都没有实现的）。

请注意，下表包含多个不同的单位（毫秒与微秒）

贡献

欢迎贡献： 如果你想使用、改进或构建 taffy，欢迎加入讨论，开启 issue 或提交 PR。 如果你对如何使用 taffy 有疑问，请开启 讨论，以便我们能以其他人也能找到的方式回答你的问题。