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

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

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

相关推荐
寻月隐君6 小时前
Rust 异步编程实践:从 Tokio 基础到阻塞任务处理模式
后端·rust·github
萧曵 丶10 小时前
Rust 中的返回类型
开发语言·后端·rust
浪裡遊12 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
受之以蒙14 小时前
Rust & WASM 之 wasm-bindgen 基础:让 Rust 与 JavaScript 无缝对话
前端·笔记·rust
Elixin14 小时前
第一章:环境搭建
rust
一只叫煤球的猫1 天前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
Pomelo_刘金1 天前
Rust 宣布发布1.88.0
rust
寻月隐君1 天前
告别 Vec!掌握 Rust bytes 库,解锁零拷贝的真正威力
后端·rust·github
小Lu的开源日常1 天前
是时候开始 Build in Public「公开构建」了
产品·全栈·运营
大卫小东(Sheldon)2 天前
GIM 1.5发布了! 支持Windows系统了
git·ai·rust