DioxusLabs/taffy

来源：https://github.com/DioxusLabs/taffy
GitHub CI (https://github.com/DioxusLabs/taffy/actions/workflows/ci.yml)
crates.io (https://crates.io/crates/taffy)
docs.rs (https://docs.rs/taffy)
Crates.io 最低支持的 Rust 版本 (MSRV)

Taffy 是一个用 Rust (https://www.rust-lang.org) 编写的灵活、高性能、跨平台的 UI 布局库。
目前它实现了 CSS Block、Flexbox 和 CSS Grid 布局算法，并计划支持其他范式。有关此信息及未来其他开发计划，请参阅路线图议题 (https://github.com/DioxusLabs/taffy/issues/345)。

这个 crate 是一个协作性的、跨团队项目，旨在作为其他 UI 和 GUI 库的依赖项使用。目前，它支持以下项目：

• Servo (https://github.com/servo/servo)：一个替代性网络浏览器
• Blitz (https://github.com/DioxusLabs/blitz)：一个高度模块化的 Web 引擎
• Bevy (https://bevyengine.org/)：一个符合人体工程学、ECS 优先的 Rust 游戏引擎
• Takumi (https://github.com/kane50613/takumi)：将你的 React 组件渲染为图像
• iocraft (https://github.com/ccbrown/iocraft)：为终端打造精美界面
• Slint (https://github.com/slint-ui/slint)：一个用于构建原生用户界面的声明式 GUI 工具包
• Lapce (https://lapce.dev/) 文本编辑器，通过 Floem (https://github.com/lapce/floem) UI 框架
• Zed (https://zed.dev/) 文本编辑器，通过 GPUI (https://github.com/zed-industries/zed/tree/main/crates/gpui) UI 框架

用法

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 (https://github.com/mortencombat/stretchable) 支持 Python
• 进行中的 C 绑定 (https://github.com/DioxusLabs/taffy/pull/404)
• 进行中的 WASM 绑定 (https://github.com/DioxusLabs/taffy/pull/394)

学习资源

Taffy 忠实地实现了 Flexbox 和 CSS Grid 规范，因此为 Web 设计的文档可以轻松地应用于 Taffy 的实现。

关于各个样式属性的参考文档，我们推荐 MDN 文档（例如，关于 width 属性的此页面 (https://developer.mozilla.org/en-US/docs/Web/CSS/width)）。这样的页面通常可以通过搜索引擎搜索 “MDN 属性名” 来找到。

如果你对 CSS 布局的指南级文档感兴趣，我们推荐以下资源：

Flexbox

• Flexbox Froggy (https://flexboxfroggy.com/)。这是一个互动式教程/游戏，让你在有趣、吸引人的方式中学习 Flexbox 的核心部分。
• CSS Tricks 的 Flexbox 完全指南 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)。这是一份带有插图和全面文字解释的详细指南，涵盖不同的 Flexbox 属性及其工作原理。

CSS Grid

• CSS Grid Garden (https://cssgridgarden.com/)。这是一个互动式教程/游戏，让你在有趣、吸引人的方式中学习 CSS Grid 的核心部分。
• CSS Tricks 的 CSS Grid 完全指南 (https://css-tricks.com/snippets/css/complete-guide-grid/)。这是一份带有插图和全面文字解释的详细指南，涵盖不同的 CSS Grid 属性及其工作原理。

基准测试（与 Yoga (https://github.com/facebook/yoga) 对比）

• 在搭载 M1 Pro 处理器的 2021 款 MacBook Pro 上使用 criterion (https://github.com/bheisler/criterion.rs) 运行
• 基准测试仅测量布局计算。它们不测量树的创建。
• Yoga 基准测试通过 yoga (https://github.com/bschwind/yoga-rs) crate（Rust 绑定）运行
• 大多数热门网站似乎有 3,000 到 10,000 个节点（尽管它们还需要文本布局，而 Yoga 和 Taffy 都未实现此功能）。 请注意，下表包含多种不同的单位（毫秒 vs. 微秒）。

贡献

欢迎贡献 (https://github.com/DioxusLabs/taffy/blob/main/CONTRIBUTING.md)：如果你想要使用、改进或构建 taffy，欢迎加入对话、提交议题 (https://github.com/DioxusLabs/taffy/issues) 或提交 PR (https://github.com/DioxusLabs/taffy/pulls)。

如果你对如何使用 taffy 有疑问，请开一个讨论 (https://github.com/DioxusLabs/taffy/discussions)，这样我们就可以以其他人也能找到的方式回答你的问题。