Dioxus、Freya学习——rsx!

已于 2024-02-27 11:38:02 修改
阅读量674 收藏 7
点赞数 12
文章标签： 学习
于 2024-02-25 00:58:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012456479/article/details/136278012
版权

示例代码：

#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]

use freya::prelude::*;

fn main() {
    launch_with_props(app, "Counter", (400.0, 350.0));
}

fn app() -> Element {
    let mut count = use_signal(|| 0);

    rsx!(
        rect {
            height: "50%",
            width: "100%",
            main_align: "center",
            cross_align: "center",
            background: "rgb(0, 119, 182)",
            color: "white",
            shadow: "0 4 20 5 rgb(0, 0, 0, 80)",
            label {
                font_size: "75",
                font_weight: "bold",
                "{count}"
            }
        }
        rect {
            height: "50%",
            width: "100%",
            main_align: "center",
            cross_align: "center",
            direction: "horizontal",
            Button {
                onclick: move |_| count += 1,
                label { "Increase" }
            }
            Button {
                onclick: move |_| count -= 1,
                label { "Decrease" }
            }
        }
    )
}

显示效果：在这里插入图片描述

rsx!宏展开后，等价代码：

use freya::prelude::*;

fn main() {
    launch_with_props(app, "Counter", (400.0, 350.0));
}

fn app() -> Element {
    let mut count = use_signal(|| 0);
    Some({
        static TEMPLATE: dioxus_core::Template = dioxus_core::Template {
            name: "examples/counter.rs:15:5:283",
            roots: &[
                dioxus_core::TemplateNode::Element {
                    tag: dioxus_elements::rect::TAG_NAME,
                    namespace: dioxus_elements::rect::NAME_SPACE,
                    attrs: &[
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::height.0,
                            namespace: dioxus_elements::rect::height.1,
                            value: "50%",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::width.0,
                            namespace: dioxus_elements::rect::width.1,
                            value: "100%",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::main_align.0,
                            namespace: dioxus_elements::rect::main_align.1,
                            value: "center",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::cross_align.0,
                            namespace: dioxus_elements::rect::cross_align.1,
                            value: "center",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::background.0,
                            namespace: dioxus_elements::rect::background.1,
                            value: "rgb(0, 119, 182)",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::color.0,
                            namespace: dioxus_elements::rect::color.1,
                            value: "white",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::shadow.0,
                            namespace: dioxus_elements::rect::shadow.1,
                            value: "0 4 20 5 rgb(0, 0, 0, 80)",
                        },
                    ],
                    children: &[
                        dioxus_core::TemplateNode::Element {
                            tag: dioxus_elements::label::TAG_NAME,
                            namespace: dioxus_elements::label::NAME_SPACE,
                            attrs: &[
                                dioxus_core::TemplateAttribute::Static {
                                    name: dioxus_elements::label::font_size.0,
                                    namespace: dioxus_elements::label::font_size.1,
                                    value: "75",
                                },
                                dioxus_core::TemplateAttribute::Static {
                                    name: dioxus_elements::label::font_weight.0,
                                    namespace: dioxus_elements::label::font_weight.1,
                                    value: "bold",
                                },
                            ],
                            children: &[
                                dioxus_core::TemplateNode::DynamicText {
                                    id: 0usize,
                                },
                            ],
                        },
                    ],
                },
                dioxus_core::TemplateNode::Element {
                    tag: dioxus_elements::rect::TAG_NAME,
                    namespace: dioxus_elements::rect::NAME_SPACE,
                    attrs: &[
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::height.0,
                            namespace: dioxus_elements::rect::height.1,
                            value: "50%",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::width.0,
                            namespace: dioxus_elements::rect::width.1,
                            value: "100%",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::main_align.0,
                            namespace: dioxus_elements::rect::main_align.1,
                            value: "center",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::cross_align.0,
                            namespace: dioxus_elements::rect::cross_align.1,
                            value: "center",
                        },
                        dioxus_core::TemplateAttribute::Static {
                            name: dioxus_elements::rect::direction.0,
                            namespace: dioxus_elements::rect::direction.1,
                            value: "horizontal",
                        },
                    ],
                    children: &[
                        dioxus_core::TemplateNode::Dynamic {
                            id: 1usize,
                        },
                        dioxus_core::TemplateNode::Dynamic {
                            id: 2usize,
                        },
                    ],
                },
            ],
            node_paths: &[&[0u8, 0u8, 0u8], &[1u8, 0u8], &[1u8, 1u8]],
            attr_paths: &[],
        };
        dioxus_core::VNode::new(
            None,
            TEMPLATE,
            Box::new([
                dioxus_core::DynamicNode::Text(
                    dioxus_core::VText::new((count).to_string().to_string()),
                ),
                dioxus_core::DynamicNode::Component({
                    use dioxus_core::prelude::Properties;
                    (fc_to_builder(Button)
                        .onclick(EventHandler::new(move |_| count += 1))
                        .children(
                            Some({
                                static TEMPLATE: dioxus_core::Template = dioxus_core::Template {
                                    name: "examples/counter.rs:15:5:933",
                                    roots: &[
                                        dioxus_core::TemplateNode::Element {
                                            tag: dioxus_elements::label::TAG_NAME,
                                            namespace: dioxus_elements::label::NAME_SPACE,
                                            attrs: &[],
                                            children: &[
                                                dioxus_core::TemplateNode::Text {
                                                    text: "Increase",
                                                },
                                            ],
                                        },
                                    ],
                                    node_paths: &[],
                                    attr_paths: &[],
                                };
                                dioxus_core::VNode::new(
                                    None,
                                    TEMPLATE,
                                    Box::new([]),
                                    Box::new([]),
                                )
                            }),
                        )
                        .build())
                        .into_vcomponent(Button, "Button")
                }),
                dioxus_core::DynamicNode::Component({
                    use dioxus_core::prelude::Properties;
                    (fc_to_builder(Button)
                        .onclick(EventHandler::new(move |_| count -= 1))
                        .children(
                            Some({
                                static TEMPLATE: dioxus_core::Template = dioxus_core::Template {
                                    name: "examples/counter.rs:15:5:1051",
                                    roots: &[
                                        dioxus_core::TemplateNode::Element {
                                            tag: dioxus_elements::label::TAG_NAME,
                                            namespace: dioxus_elements::label::NAME_SPACE,
                                            attrs: &[],
                                            children: &[
                                                dioxus_core::TemplateNode::Text {
                                                    text: "Decrease",
                                                },
                                            ],
                                        },
                                    ],
                                    node_paths: &[],
                                    attr_paths: &[],
                                };
                                dioxus_core::VNode::new(
                                    None,
                                    TEMPLATE,
                                    Box::new([]),
                                    Box::new([]),
                                )
                            }),
                        )
                        .build())
                        .into_vcomponent(Button, "Button")
                }),
            ]),
            Box::new([]),
        )
    })
}

最终数据结构：

Some(
    VNode {
        vnode: VNodeInner {
            key: None,
            template: Cell {
                value: Template {
                    name: "examples/counter.rs:15:16:294",
                    roots: [
                        Element {
                            tag: "rect",
                            namespace: None,
                            attrs: [
                                Static {
                                    name: "height",
                                    value: "50%",
                                    namespace: None,
                                },
                                Static {
                                    name: "width",
                                    value: "100%",
                                    namespace: None,
                                },
                                Static {
                                    name: "main_align",
                                    value: "center",
                                    namespace: None,
                                },
                                Static {
                                    name: "cross_align",
                                    value: "center",
                                    namespace: None,
                                },
                                Static {
                                    name: "background",
                                    value: "rgb(0, 119, 182)",
                                    namespace: None,
                                },
                                Static {
                                    name: "color",
                                    value: "white",
                                    namespace: None,
                                },
                                Static {
                                    name: "shadow",
                                    value: "0 4 20 5 rgb(0, 0, 0, 80)",
                                    namespace: None,
                                },
                            ],
                            children: [
                                Element {
                                    tag: "label",
                                    namespace: None,
                                    attrs: [
                                        Static {
                                            name: "font_size",
                                            value: "75",
                                            namespace: None,
                                        },
                                        Static {
                                            name: "font_weight",
                                            value: "bold",
                                            namespace: None,
                                        },
                                    ],
                                    children: [
                                        DynamicText {
                                            id: 0,
                                        },
                                    ],
                                },
                            ],
                        },
                        Element {
                            tag: "rect",
                            namespace: None,
                            attrs: [
                                Static {
                                    name: "height",
                                    value: "50%",
                                    namespace: None,
                                },
                                Static {
                                    name: "width",
                                    value: "100%",
                                    namespace: None,
                                },
                                Static {
                                    name: "main_align",
                                    value: "center",
                                    namespace: None,
                                },
                                Static {
                                    name: "cross_align",
                                    value: "center",
                                    namespace: None,
                                },
                                Static {
                                    name: "direction",
                                    value: "horizontal",
                                    namespace: None,
                                },
                            ],
                            children: [
                                Dynamic {
                                    id: 1,
                                },
                                Dynamic {
                                    id: 2,
                                },
                            ],
                        },
                    ],
                    node_paths: [
                        [
                            0,
                            0,
                            0,
                        ],
                        [
                            1,
                            0,
                        ],
                        [
                            1,
                            1,
                        ],
                    ],
                    attr_paths: [],
                },
            },
            dynamic_nodes: [
                Text(
                    VText {
                        value: "0",
                    },
                ),
                Component(
                    VComponent {
                        name: "Button",
                    },
                ),
                Component(
                    VComponent {
                        name: "Button",
                    },
                ),
            ],
            dynamic_attrs: [],
        },
        mount: Cell {
            value: MountId(
                18446744073709551615,
            ),
        },
    },
)

类似于JSON的数据结构：

{
  "Some": {
    "VNode": {
      "vnode": {
        "key": null,
        "template": {
          "value": {
            "name": "examples/counter.rs:15:16:294",
            "roots": [
              {
                "tag": "rect",
                "namespace": null,
                "attrs": [
                  {
                    "name": "height",
                    "value": "50%",
                    "namespace": null
                  },
                  {
                    "name": "width",
                    "value": "100%",
                    "namespace": null
                  },
                  {
                    "name": "main_align",
                    "value": "center",
                    "namespace": null
                  },
                  {
                    "name": "cross_align",
                    "value": "center",
                    "namespace": null
                  },
                  {
                    "name": "background",
                    "value": "rgb(0, 119, 182)",
                    "namespace": null
                  },
                  {
                    "name": "color",
                    "value": "white",
                    "namespace": null
                  },
                  {
                    "name": "shadow",
                    "value": "0 4 20 5 rgb(0, 0, 0, 80)",
                    "namespace": null
                  }
                ],
                "children": [
                  {
                    "tag": "label",
                    "namespace": null,
                    "attrs": [
                      {
                        "name": "font_size",
                        "value": "75",
                        "namespace": null
                      },
                      {
                        "name": "font_weight",
                        "value": "bold",
                        "namespace": null
                      }
                    ],
                    "children": [
                      {
                        "id": 0
                      }
                    ]
                  }
                ]
              },
              {
                "tag": "rect",
                "namespace": null,
                "attrs": [
                  {
                    "name": "height",
                    "value": "50%",
                    "namespace": null
                  },
                  {
                    "name": "width",
                    "value": "100%",
                    "namespace": null
                  },
                  {
                    "name": "main_align",
                    "value": "center",
                    "namespace": null
                  },
                  {
                    "name": "cross_align",
                    "value": "center",
                    "namespace": null
                  },
                  {
                    "name": "direction",
                    "value": "horizontal",
                    "namespace": null
                  }
                ],
                "children": [
                  {
                    "id": 1
                  },
                  {
                    "id": 2
                  }
                ]
              }
            ],
            "node_paths": [
              [
                0,
                0,
                0
              ],
              [
                1,
                0
              ],
              [
                1,
                1
              ]
            ],
            "attr_paths": []
          }
        },
        "dynamic_nodes": [
          {
            "Text": {
              "value": "0"
            }
          },
          {
            "Component": {
              "name": "Button"
            }
          },
          {
            "Component": {
              "name": "Button"
            }
          }
        ],
        "dynamic_attrs": []
      },
      "mount": {
        "value": {
          "MountId": 18446744073709551615
        }
      }
    }
  }
}
ikun-fans
关注
【Rust日报】2023-09-27 dioxus -- 适用于桌面、Web、移动端等的全栈 GUI 库
Rust语言学习交流
09-29 817
dioxus -- 适用于桌面、Web、移动端等的全栈 GUI 库Dioxus 是一个可移植的、高性能的、符合人体工程学的框架，使用 Rust 语言构建跨平台的用户界面。Dioxus 可用于生成 网页前端、桌面应用、静态网站、移动端应用、TUI程序、等多类平台应用。如果你能够熟悉使用 React 框架，那 Dioxus 对你来说将非常简单。fn app(cx: Scope) -> Eleme...
Dioxus、Freya学习——介绍
u012456479的博客
02-27 1058
Dioxus 是一款用于构建跨平台用户界面的框架，API和设计都是React风格的。Freya是基于Dioxus，主要是在渲染层使用Skia而不是依赖Web技术。主要的区别是：Freya可以独立运行在端上，不需要依赖系统Webview之类。
Dioxus 框架快速上手教程
gitblog_01108的博客
08-09 715
Dioxus 框架快速上手教程 dioxus该全栈图形用户界面（GUI）库可用于开发桌面、Web、移动设备以及更多平台上的应用程序。项目地址:https://gitcode.com/gh_mirrors/di/dioxus 1. 项目目录结构及介绍 当你克隆或下载 Dioxus 项目后，通常你会看到一个典型的 Rust 项目结构： my_dioxus_app/ │ ├── Cargo.toml ...
双嘉宾登台的超人气演讲！两位创始人深入解读Dioxus架构演进思路：关注开发者体验，打造APP开发未来
GOSIM2023的博客
07-07 3495
Dioxus是一个用Rust编程语言构建跨平台应用开源框架，可以帮助开发者构建跨网页、桌面和移动设备的APP，并且只需用一套代码。只需要构建一次，就可以在任何地方发布。目前，Dioxus支持各种各样的平台，比如Mac、Windows、Linux、Android、和 iOS。Jonathon介绍了使用Dioxus构建新应用时的便利性，这全得益于一个命令行工具的存在，DX（Developer Experience），Jonathon 对其命名解释道：“因为我们热爱开发者的体验。”
Dioxus 环境安装
bjxingch的博客
07-15 416
Dioxus
Dioxus快速入门与实践指南
gitblog_00598的博客
08-09 546
Dioxus快速入门与实践指南 dioxus该全栈图形用户界面（GUI）库可用于开发桌面、Web、移动设备以及更多平台上的应用程序。项目地址:https://gitcode.com/gh_mirrors/di/dioxus 项目介绍 Dioxus 是一个受React启发的Rust库，专为构建跨平台应用程序而设计。它涵盖了桌面、Web、移动等多个领域，提供了一种简洁、高效的开发体验。Dioxus通...
freya.rar_freya
07-14
算少数点的潮流，已经通过了编译，直接MATLAB上粘贴运行
iOS 12.5.6免电脑越狱工具-Freya
11-10
iOS 12.5.6终于有免电脑越狱工具了！这是未签名版，需要自签！稳定支持各种插件！越狱环境绝无虚假！白苹果几率超低，快来下载吧！
freya
03-15
【弗雷亚——一款强大的文件管理工具】 "弗雷亚"（Freya）并非一个标准的IT行业术语，但它可能是指某款名为“Freya”的软件或应用，尤其是在提到文件管理方面。在Linux世界中，"Freya"可能是Elementary OS的一个...
Freya
10-28
标题“Freya”很可能指的是一个名为“Freya”的字体资源，这是一款可能被设计用于图形设计、排版或网页设计的字体。在IT领域，字体是计算机系统中用于表示文本的图形元素，它们的设计和风格可以极大地影响文本的...
Hanthana:Elementary OS Freya 的漂亮主题（稳定版）
06-09
汉萨纳（Hanthana）是一款专为 Elementary OS Freya 设计的美观主题，它以其稳定性和出色的用户体验而受到用户的欢迎。Elementary OS Freya 是一个基于 Ubuntu 的轻量级操作系统，其界面设计简洁、优雅，深受Linux...
RUST语言跨平台GUI框架Dioxus制作桌面应用入门教程（一）
zazl168的专栏
01-14 5658
构建外观和使用体验在各操作系统上都相同的独立原生桌面应用程序。使用 Dioxus desktop 构建的应用程序使用系统 WebView 来渲染页面。这使得应用程序的最终体积比使用其他 WebView 渲染器的应用程序小得多（通常小于 5MB）。尽管桌面应用程序是在 WebView 中渲染的，但您的 Rust 代码是本机运行的。这意味着浏览器 API 不可用，因此渲染 WebGL、Canvas 等不像在 Web 上那样容易。
Dioxus有Web，Liveview，Fullstack，Desktop，TUI，分别是什么？
最新发布
DXB2021的博客
08-17 935
Dioxus 是一个使用 Rust 编写的跨平台前端框架，它允许开发者使用 Rust 的性能和类型安全特性来构建用户界面。Dioxus 旨在提供类似于 React 的声明式 UI 构建体验，并支持多种不同的界面类型。Dioxus 的设计哲学是“一个代码库，到处运行”，意味着你可以使用相同的逻辑代码来为不同的平台构建用户界面。这为 Rust 开发者提供了一个强大而灵活的工具，以满足不同的开发需求。请注意，Dioxus 是一个不断发展的项目，其特性和能力可能会随着时间而变化。和 GitHub 仓库。
探索Dioxus：构建高性能React原生应用的新框架
gitblog_00052的博客
03-19 851
探索Dioxus：构建高性能React原生应用的新框架 dioxus该全栈图形用户界面（GUI）库可用于开发桌面、Web、移动设备以及更多平台上的应用程序。项目地址:https://gitcode.com/gh_mirrors/di/dioxus 是一个现代的、轻量级的、用于构建跨平台UI的库，灵感来源于React。它以其高性能、简洁的API和丰富的生态系统，为开发者提供了一种高效开发原生应用的...
RUST语言跨平台GUI框架Dioxus制作桌面应用入门教程之编写第一个组件（二）
zazl168的专栏
01-14 4214
本节将教您如何创建一个显示故事帖子的内容组件。首先，让我们定义如何显示帖子。Dioxus 是一个声明式框架。这意味着我们不必告诉 Dioxus 要做什么（例如“创建一个元素”或“将颜色设置为红色”），而是简单地声明我们希望 UI 的外观。
探索未来UI开发新纪元：Dioxus开源项目深度剖析
gitblog_00594的博客
08-09 1147
探索未来UI开发新纪元：Dioxus开源项目深度剖析 dioxus该全栈图形用户界面（GUI）库可用于开发桌面、Web、移动设备以及更多平台上的应用程序。项目地址:https://gitcode.com/gh_mirrors/di/dioxus 在现代软件开发的快车道上，寻找一个能横跨Web、桌面、移动等多平台，且兼顾高性能与简洁代码的框架，成为了开发者心中的理想之选。今天，让我们一起深入了解【...
【Rust 日报】2023-2-24 Dioxus 0.3 发布，巨大的更新
Rust语言学习交流
02-24 1312
ascii-d - 画ASCII示意图的工具Rust写的画ASCII示意图的工具。支持各大平台。程序员的最爱啊。https://github.com/huytd/ascii-d/raw/master/_meta/toolbar-final.gifDioxus 0.3 发布，巨大的更新Dioxus 是新出的与 Yew 类似的 Rust Web 前端框架（为什么这么多，百花齐放的感觉，难道是天下苦js...
【Rust日报】2022-1-4 Dioxus v0.1 发布
Rust语言学习交流
01-04 1027
Dioxus v0.1 发布Dioxus 是一个新的 Rust GUI 工具包，用于 Web、桌面、移动、SSR、TUI，关注开发人员体验，有下面几点优势：熟悉：提供类似 React 的心...
探索Dioxus的无限可能：实例项目一览
gitblog_00047的博客
05-23 559
探索Dioxus的无限可能：实例项目一览 去发现同类优质开源项目:https://gitcode.com/ 在这个快速发展的前端世界中，Dioxus以其独特的魅力和卓越的性能引起了广泛的兴趣。这个开源库为构建高性能、跨平台的应用提供了全新的解决方案。让我们一起深入了解一下这些由Dioxus驱动的示例项目，它们将揭示Dioxus的强大之处，激发你的创新灵感。 1. 项目介绍 本仓库是一个丰富多彩的D...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>