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 作为布局和样式技术。

这意味着您可以重新利用网络知识,使用 divspanimgstylebutton等构建应用程序。

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

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

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

相关推荐
Pomelo_刘金9 小时前
用 DDD 把「闹钟」需求一点点捏出来
架构·rust·领域驱动设计
Pomelo_刘金9 小时前
Clean Architecture 整洁架构:借一只闹钟讲明白「整洁架构」的来龙去脉
后端·架构·rust
HX43615 小时前
MP - List (not just list)
android·ios·全栈
a cool fish(无名)19 小时前
rust-方法语法
开发语言·后端·rust
a cool fish(无名)1 天前
rust-参考与借用
java·前端·rust
叶 落2 天前
[Rust 基础课程]猜数字游戏-获取用户输入并打印
rust·rust基础
RustFS2 天前
RustFS 如何修改默认密码?
rust
景天科技苑2 天前
【Rust线程池】如何构建Rust线程池、Rayon线程池用法详细解析
开发语言·后端·rust·线程池·rayon·rust线程池·rayon线程池
绅士玖3 天前
🔐 JWT 登录鉴权实战:从前端到Mock的全流程解析 🚀
前端·全栈
该用户已不存在3 天前
Zig想要取代Go和Rust,它有资格吗
前端·后端·rust