糖浆

糖浆是一个灵活、高性能、跨平台的 UI 布局库，用 Rust 编写。

它目前实现了 CSS 的 块、Flexbox 和 CSS Grid 布局算法。计划支持其他范式。有关此及其他未来开发计划的信息，请参阅 路线图问题。

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

• Dioxus：一个类似 React 的库，用于使用 Rust 构建快速、便携且美观的用户界面
• Bevy：一个易于使用、以 ECS 为先的 Rust 游戏引擎
• Lapce 文本编辑器，通过 Floem UI 框架
• Zed 文本编辑器，通过 GPUI UI 框架

用法

use taffy::prelude::*;

// First create an instance of TaffyTree
let mut tree : TaffyTree<()> = TaffyTree::new();

// Create a tree of nodes using `TaffyTree.new_leaf` and `TaffyTree.new_with_children`.
// These functions both return a node id which can be used to refer to that node
// The Style struct is used to specify styling information
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();

// Call compute_layout on the root of your tree to run the layout algorithm
tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap();

// Inspect the computed layout using `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); // This value was not set explicitly, but was computed by Taffy

其他语言的绑定

• 通过 stretchable 实现 Python 绑定
• 进行中 C 绑定
• 进行中 WASM 绑定

学习资源

糖浆忠实实现了 Flexbox 和 CSS Grid 规范，因此为网络设计的文档应该可以干净地翻译到糖浆的实现中。关于个别样式属性的参考文档，我们建议使用 MDN 文档（例如 此页 上的 width 属性）。通常可以通过使用搜索引擎搜索“MDN 属性名”来找到此类页面。

如果您对 CSS 布局的指南级别文档感兴趣，则我们建议以下资源

Flexbox

• Flexbox Froggy。这是一个交互式教程/游戏，可以让您以有趣、引人入胜的方式学习 Flexbox 的基本部分。
• 《Flexbox 完全指南》 由 CSS Tricks 提供。这是一份包含插图和详细书面解释不同 Flexbox 属性及其工作原理的详细指南。

CSS 网格

• CSS 网格花园。这是一个交互式教程/游戏，以有趣和引人入胜的方式让您学习 CSS 网格的基本部分。
• 《CSS 网格完全指南》 由 CSS Tricks 提供。这是一份包含插图和详细书面解释不同 CSS 网格属性及其工作原理的详细指南。

基准测试（与 Yoga 比较）

• 在 2021 款 MacBook Pro（搭载 M1 Pro 处理器）上运行，使用 criterion
• 这些基准测试仅测量布局计算，不测量树创建。
• Yoga 基准测试通过 yoga crate（Rust 绑定）运行
• 大多数流行的网站似乎有 3,000 到 10,000 个节点（尽管它们还需要文本布局，yoga 和 taffy 都没有实现）。

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

贡献

欢迎贡献：如果您想使用、改进或构建 taffy，请随时加入讨论，打开 问题 或提交 PR。如果您对如何使用 taffy 有疑问，请打开 讨论，这样我们就可以以其他人可以找到的方式回答您的问题。