如何在Dioxus中点击按钮关闭当前窗口并打开新窗口？

实现思路 #

Dioxus桌面端的窗口管理依赖dioxus-desktop提供的WindowHandle，通过以下两步实现需求：

• 通过use_window钩子获取当前窗口句柄，调用close()方法关闭当前窗口
• 使用dioxus-desktop::launch或WindowBuilder创建并启动新窗口的Dioxus应用实例

修改后的代码实现 #

首先确保Cargo.toml包含dioxus-desktop依赖：

[dependencies]
dioxus = { version = "0.5", features = ["desktop"] }
dioxus-desktop = "0.5"
# 其他原有依赖保持不变

然后调整MainArea组件代码：

use crate::components::project_button::ProjectButton;
use dioxus::prelude::*;
use dioxus_desktop::use_window; // 引入窗口操作钩子
use dioxus_free_icons::icons::fa_solid_icons::{FaCodeBranch, FaFolderOpen, FaPlus};
use rfd::FileDialog;

// 示例新窗口组件，可根据实际需求替换
#[component]
fn NewProjectWindow() -> Element {
    rsx!(
        main {
            class: "p-10 flex-grow min-w-500px flex flex-col items-center pt-32",
            header { class: "text-2xl font-bold", "New Project Setup" }
            p { class: "mt-4 text-gray-600", "Configure your project parameters here..." }
        }
    )
}

#[component]
pub fn MainArea() -> Element {
    let window = use_window(); // 获取当前窗口句柄

    rsx!(
        main {
            class: "p-10 flex-grow min-w-500px flex flex-col items-center pt-32",
            header {
                class: "text-2xl font-bold text-center w-full",
                "Welcome to Aster MDA"
            }
            p {
                class: "text-gray-600 text-xs text-center w-full mt-6",
                "Automatically create a new project."
            }
            p {
                class: "text-gray-600 text-xs text-center w-full mt-2",
                "Open an existing project from disk or version control."
            }
            div {
                class: "flex justify-center mt-6",
                ProjectButton {
                    icon: FaPlus,
                    color: "text-blue-500",
                    label: "New Project",
                    onclick: Some(EventHandler::from(move |_| {
                        // 关闭当前窗口
                        window.close();
                        // 启动新窗口，加载自定义组件
                        dioxus_desktop::launch(NewProjectWindow);
                    })),
                },
                ProjectButton {
                    icon: FaFolderOpen,
                    color: "text-blue-500",
                    label: "Open",
                    onclick: Some(EventHandler::from(move |_| {
                        let path = FileDialog::new()
                            .add_filter("image", &["png", "jpg", "jpeg", "gif"])
                            .set_directory("/")
                            .pick_files();

                        println!("picked images: {:?}", path);
                    })),
                },
                ProjectButton {
                    icon: FaCodeBranch,
                    color: "text-blue-500",
                    label: "Open from VCS",
                    onclick: Some(EventHandler::from(move |_| {})),
                },
            }
        }
    )
}

关键细节说明 #

• use_window()仅能在Dioxus桌面环境的组件中使用，确保你的应用通过dioxus-desktop启动
• 若需自定义新窗口的标题、尺寸等属性，可使用WindowBuilder配置：

  use dioxus_desktop::WindowBuilder;
  
  // 替换launch代码为：
  WindowBuilder::new()
      .with_title("New Project Wizard")
      .with_inner_size(800, 600)
      .launch(NewProjectWindow);
  

• 如需在新窗口中传递数据，可通过组件Props或全局共享状态（如use_shared_state）实现

内容的提问来源于stack exchange，提问作者Astertechs