RSX 构建界面

构建界面

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

// 定义一个组件，渲染一个包含文本 "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 语法来组装元素：

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

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

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

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

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

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

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。

rsx! {
    if show_title {
        "title!"
    }

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

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

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

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

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

#[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!" }
        }
    }
}

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

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