透明及磨砂背景下的 Tauri 应用程序

在 Tauri 开发中，处理应用程序的视觉美感至关重要。其中一个关键方面是管理窗口背景，它可以极大地影响用户体验。在这篇文章中，我们将探讨如何在 Tauri 应用中实现透明和磨砂背景，并提供一些实际示例。

了解 Tauri 的窗口背景

在 Tauri 中，窗口背景由 decorations 选项控制。此选项接受以下值：

• default：使用平台默认设置。
• full：显示完整窗口边框和标题栏。
• none：隐藏窗口边框和标题栏，实现无边框窗口。
• transparent：实现透明窗口，允许底层内容透视。
• unstyled：隐藏窗口边框，但保留标题栏。

实现透明背景

要创建透明背景，请将 decorations 选项设置为 "transparent"。这将允许底层内容透视窗口，创造一种无缝的视觉效果。

use tauri::{App, Manager, Window, WindowBuilder};

fn main() {
    tauri::Builder::default()
        .manage(Manager::with_data(vec![]))
        .on_window_event(|event| match event.event() {
            Window::Event::Destroyed(_) => event.window().close(),
            _ => (),
        })
        .run(WindowBuilder::new(
            "my_app",
            tauri::window::Size::default(),
            WindowBuilderOptions {
                decorations: false,
                transparent: true,
                ..Default::default()
            },
        ));
}

实现磨砂背景

创建磨砂背景需要一点 CSS 魔术。Tauri 允许使用 CSS 样式自定义窗口的外观。要实现磨砂效果，请添加以下样式到您的 index.html 文件中：

<style>
  #root {
    background-color: rgba(0, 0, 0, 0.6);
  }
</style>

请注意，background-color 的 rgba 值控制磨砂的强度，其中最后一个值表示透明度。

应用中的示例

透明任务管理器

一个透明的任务管理器可以增强您的工作流程，因为它允许您在浏览其他窗口的同时监控系统活动。

use tauri::{App, Manager, Window, WindowBuilder};

fn main() {
    tauri::Builder::default()
        .manage(Manager::with_data(vec![]))
        .on_window_event(|event| match event.event() {
            Window::Event::Destroyed(_) => event.window().close(),
            _ => (),
        })
        .run(WindowBuilder::new(
            "task_manager",
            tauri::window::Size::new(500, 300),
            WindowBuilderOptions {
                decorations: false,
                transparent: true,
                ..Default::default()
            },
        ));
}

磨砂媒体播放器

一个磨砂媒体播放器可以提供一种身临其境的体验，因为它使您能够专注于正在播放的内容，同时仍然可以看到背景活动。

use tauri::{App, Manager, Window, WindowBuilder};

fn main() {
    tauri::Builder::default()
        .manage(Manager::with_data(vec![]))
        .on_window_event(|event| match event.event() {
            Window::Event::Destroyed(_) => event.window().close(),
            _ => (),
        })
        .run(WindowBuilder::new(
            "media_player",
            tauri::window::Size::default(),
            WindowBuilderOptions {
                decorations: false,
                transparent: true,
                css: Some("src/style.css"),
                ..Default::default()
            },
        ));
}

---