dioxus 简单试用

dioxus 是提供了cli 工具的，可以加速应用的开发, 同时也包含一个模版项目可以使用

工具安装

cargo install dioxus-cli

创建&简单项目试用

clone项目
目前cli 似乎与官方说明的不太一致，可以先创建一个cargo 项目，然后执行dx create

 

dx create --template gh:dioxuslabs/dioxus-template

项目结构

├── Cargo.lock

├── Cargo.toml

├── Dioxus.toml

├── README.md

├── input.css

├── src

│   └── main.rs

└── tailwind.config.js

核心代码
src/main.rs

 
#![allow(non_snake_case)]

use dioxus_router::prelude::*;

use dioxus::prelude::*;

use log::LevelFilter;

fn main() {

    // Init debug

    dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");

    // 桌面应用

    dioxus_desktop::launch(app);
 
}

// 类似yew 的开发模式

fn app(cx: Scope) -> Element {

    render!{

        Router::<Route> {}

    }

}

// 基于路由的开发模式，还是比较方便的

#[derive(Clone, Routable, Debug, PartialEq)]

enum Route {

    #[route("/")]

    Home {},

    #[route("/blog/:id")]

    Blog { id: i32 },

}
 
#[component]

fn Blog(cx: Scope, id: i32) -> Element {

    render! {

        Link { to: Route::Home {}, "Go to counter" }

        "Blog post {id}"

    }

}
 
#[component]

fn Home(cx: Scope) -> Element {

    let mut count = use_state(cx, || 0);

    cx.render(rsx! {

        Link {

            to: Route::Blog {

                id: *count.get()

            },

            "Go to blog"

        }

        div {

            h1 { "High-Five counter: {count}" }

            button { onclick: move |_| count += 1, "Up high!" }

            button { onclick: move |_| count -= 1, "Down low!" }

        }

    })

}