Rust跨平台GUI开发工具Dioxus-CLI的使用：快速构建高性能Web与桌面应用

Rust跨平台GUI开发工具Dioxus-CLI的使用：快速构建高性能Web与桌面应用

📦✨ Dioxus CLI

为Dioxus项目提供强力工具支持

dioxus-cli是一个帮助Dioxus项目快速上手的工具，灵感来自wasm-pack和webpack。它处理构建、打包、开发和发布流程，简化开发工作。

安装

安装稳定版本（推荐）

cargo install dioxus-cli

通过git安装最新的开发版本

要获取最新的bug修复和功能，可以从git安装开发版本。不过这个版本没有经过完整测试，意味着虽然你获得了最新的bug修复，但也可能遇到更多问题。

cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli

这将从master分支下载CLI，并安装到Cargo的全局二进制目录（默认是~/.cargo/bin/）。

从本地文件夹安装

注意：CLI在debug模式下构建项目时会失败。这个问题正在调查中。

cargo install --path .

开始使用

使用dx new初始化一个新的Dioxus项目。它会从dioxus-template仓库克隆模板。

或者，你可以指定模板路径：

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

运行dx --help查看所有可用命令列表。此外，你可以运行dx <command> --help获取特定命令的帮助。

Dioxus配置文件

你可以使用Dioxus.toml文件进行进一步配置。有些字段是必填的，但CLI工具会告诉你哪些字段缺失。

你可以使用dx config init project-name创建一个已经设置好所有字段的Dioxus.toml，或者使用这个基本模板（仅包含必填字段）开始：

[application]
name = "project-name"
# 目前支持的平台：web, desktop
default_platform = "web"

[web.app]
title = "Hello"

[web.resource.dev]

完整示例

下面是一个使用Dioxus-CLI创建跨平台GUI应用的完整示例：

  1. 首先安装Dioxus CLI：
cargo install dioxus-cli
  1. 创建一个新项目：
dx new my-app
cd my_app
  1. 编辑src/main.rs文件：
use dioxus::prelude::*;

fn main() {
    // 启动应用
    dioxus::desktop::launch(App);
}

// 定义App组件
fn App(cx: Scope) -> Element {
    // 使用状态管理计数
    let count = use_state(&cx, || 0);

    // 构建UI
    cx.render(rsx! {
        div {
            h1 { "Hello Dioxus!" }
            p { "Count: {count}" }
            button {
                onclick: move |_| count.set(count + 1),
                "Click me!"
            }
        }
    })
}
  1. 编辑Dioxus.toml配置文件：
[application]
name = "my_app"
default_platform = "desktop"  # 设置为桌面应用

[desktop]
# 桌面应用特定配置
name = "My App"
version = "0.1.0"
  1. 运行应用：
dx serve

这个示例创建了一个简单的计数器应用，可以通过Dioxus-CLI构建为跨平台的Web或桌面应用。点击按钮会增加计数，展示了Dioxus的响应式状态管理功能。


1 回复

Rust跨平台GUI开发工具Dioxus-CLI的使用：快速构建高性能Web与桌面应用

以下是内容中提供的计数器示例代码：

// src/app.rs
use dioxus::prelude::*;

pub fn App(cx: Scope) -> Element {
    let mut count = use_state(cx, || 0);

    cx.render(rsx! {
        div {
            h1 { "计数器: {count}" }
            button { onclick: move |_| count += 1, "增加" }
            button { onclick: move |_| count -= 1, "减少" }
        }
    })
}

下面是一个完整的使用Dioxus-CLI开发的Todo应用示例：

// src/main.rs
use dioxus::prelude::*;
use dioxus_desktop::Config;

fn main() {
    // 启动桌面应用
    dioxus_desktop::launch_cfg(app, Config::default());
}

// src/app.rs
use dioxus::prelude::*;

#[derive(Clone, Debug, Default)]
struct TodoItem {
    id: usize,
    title: String,
    completed: bool,
}

pub fn App(cx: Scope) -> Element {
    // 使用共享状态管理Todo列表
    let todos = use_ref(cx, || {
        let mut items = Vec::new();
        items.push(TodoItem {
            id: 1,
            title: "学习Dioxus".into(),
            completed: false,
        });
        items
    });

    // 处理新增Todo
    let handle_submit = move |value: String| {
        todos.write().push(TodoItem {
            id: todos.read().len() + 1,
            title: value,
            completed: false,
        });
    };

    cx.render(rsx! {
        div {
            h1 { "Todo应用" }
            
            // 添加Todo的表单
            AddTodo { on_add: handle_submit }
            
            // Todo列表
            ul {
                todos.read().iter().map(|todo| rsx! {
                    TodoItemView {
                        key: "{todo.id}",
                        item: todo.clone(),
                        on_toggle: move |id| {
                            if let Some(item) = todos.write().iter_mut().find(|i| i.id == id) {
                                item.completed = !item.completed;
                            }
                        }
                    }
                })
            }
        }
    })
}

// 添加Todo的组件
#[inline_props]
fn AddTodo(cx: Scope, on_add: fn(String)) -> Element {
    let mut value = use_state(cx, || String::new());

    cx.render(rsx! {
        div {
            input {
                r#type: "text",
                value: "{value}",
                oninput: move |e| value.set(e.value.clone())
            }
            button {
                onclick: move |_| {
                    if !value.is_empty() {
                        on_add(value.to_string());
                        value.set(String::new());
                    }
                },
                "添加"
            }
        }
    })
}

// 单个Todo项的组件
#[inline_props]
fn TodoItemView(
    cx: Scope,
    item: TodoItem,
    on_toggle: fn(usize),
) -> Element {
    cx.render(rsx! {
        li {
            input {
                r#type: "checkbox",
                checked: "{item.completed}",
                onclick: move |_| on_toggle(item.id)
            }
            span {
                // 根据完成状态显示不同样式
                style: if item.completed { "text-decoration: line-through" } else { "" },
                "{item.title}"
            }
        }
    })
}

这个完整示例展示了：

  1. 状态管理 - 使用use_ref管理Todo列表
  2. 组件化 - 拆分为AddTodo和TodoItemView组件
  3. 事件处理 - 处理表单提交和复选框点击事件
  4. 条件渲染 - 根据完成状态显示不同样式

要运行这个示例：

  1. 创建新项目：
dx new todo_app
cd todo_app
  1. 添加桌面支持：
cargo add dioxus-desktop

  1. 将上述代码分别放入src/main.rs和src/app.rs

  2. 运行桌面应用：

dx desktop

或者运行Web版本：

dx serve
回到顶部