RSX 构建界面 - 技术栈

构建界面

Dioxus 是一个声明式框架。这意味着，我们无需告诉 Dioxus 要做什么（例如，"创建一个元素 "或 "将颜色设置为红色"），只需使用 RSX 声明我们想要的用户界面。

rust 复制代码

// 定义一个组件，渲染一个包含文本 "Hello, world!"的 div
fn App() -> Element {
    rsx! {
        div { "Hello, world!" }
    }
}

在这里，我们使用 *rsx!*宏来声明我们需要一个包含文本 "Hello, world!"的 div 元素。Dioxus 接收 RSX，并以此构建用户界面。

使用热加载功能编辑 RSX

使用 dx serve 时，只要编辑和保存文件，应用程序的 RSX 就会自动热加载。您可以编辑 RSX 结构、添加新元素和样式标记，而无需完全重建。

无论何时编辑 Rust 代码，dx 都会自动强制 "完全重建 "应用程序。

有关哪些内容可以热加载，哪些不可以热加载的深入指南，请查看参考资料中的热加载指南。

RSX 只是 HTML

Dioxus 提供了 rsx！{} 宏，用于在应用程序中组装元素。rsx！{} 宏主要使用 HTML：网页、桌面和移动 Dioxus 第一方呈现器均使用 HTML 和 CSS 作为布局和样式技术。

这意味着您可以重新利用网络知识，使用 div 、span 、img 、style 、button等构建应用程序。

RSX 语法是 Rust 的一种 "严格 " 形式，它使用 Rust 的 Struct 语法来组装元素：

rust 复制代码

rsx! {
    div {
        class: "bg-red-100"
    }
}

RSX 中的元素与 Rust 的结构体语法略有不同：它们也可以包含紧跟在最终属性之后的子结构体。

rust 复制代码

rsx! {
    div { class: "bg-red-100",
        button {
            onclick: move |_| info!("Clicked"),
            "Click me!"
        }
    }
}

此外，RSX 中所有带引号的字符串都会自动隐含* format!()*，因此您可以在标记之外定义一个变量，并将其用于字符串中，而无需明确调用格式：

rust 复制代码

rsx! {
    div { "Breed: {breed}" }
}

任何可以渲染为字符串的表达式都可以直接包含在 RSX 中。RSX 还接受 Option<Element> 和元素迭代器:

rust 复制代码

rsx! {
    // Anything that's `Display`
    {"Something"}

    // Optionals
    {show_title.then(|| rsx! { "title!" } )}

    // And iterators
    ul {
        {(0..5).map(|i| rsx! { "{i}" })}
    }
}

Dioxus 为这些常见情况提供了两种语法糖：for 循环和 if 链。这些块直接返回所包含的 RSX。

rust 复制代码

rsx! {
    if show_title {
        "title!"
    }

    ul {
        for item in 0..5 {
            "{item}"
        }
    }
}

对于列表，Dioxus 使用 key 属性来确保在渲染之间比较正确的元素。如果您忘记为列表项添加 key 属性，可能会遇到性能和状态管理问题。通常情况下，您可以找到一个唯一的键来区分列表项：

rust 复制代码

rsx! {
    for user in users {
        div {
            key: "{user.id}",
            "{user.name}"
        }
    }
}

为我们的 HotDog 应用程序添加用户界面

让我们为应用程序添加一个基本的用户界面。我们将添加一个标题、一张狗照片的主体图像和一些基本按钮。

rust 复制代码

#[component]
fn App() -> Element {
    rsx! {
        div { id: "title",
            h1 { "HotDog! 🌭" }
        }
        div { id: "dogview",
            img { src: "https://images.dog.ceo/breeds/pitbull/dog-3981540_1280.jpg" }
        }
        div { id: "buttons",
            button { id: "skip", "skip" }
            button { id: "save", "save!" }
        }
    }
}

我们的应用程序即将完成！

遗憾的是，它还不是很美观。让我们继续设计我们的应用程序。