【08】Tauri 应用篇 - 透明及磨砂背景 #12

lencx · 2022-07-03T07:38:39Z

lencx
Jul 3, 2022
Maintainer

官方文档是第一手学习资料，当文档不能满足需要时，了解其生态，或者阅读一些源码，可能会有意想不到的收获。

源码阅读

通过阅读 wry 源码示例可知 Tauri 应用的背景分三层：

第一层是 window
第二层是 webview
第三层是 html

fn main() -> wry::Result<()> {
  use wry::{
    application::{
      event::{Event, WindowEvent},
      event_loop::{ControlFlow, EventLoop},
      window::WindowBuilder,
    },
    webview::WebViewBuilder,
  };

  let event_loop = EventLoop::new();
  let window = WindowBuilder::new()
    .with_decorations(false)
    // ✅ 第一层：
    // There are actually three layer of background color when creating webview window.
    // The first is window background...
    .with_transparent(true)
    .build(&event_loop)
    .unwrap();

  let _webview = WebViewBuilder::new(window)?
    // ✅ 第二层：
    // The second is on webview...
    .with_transparent(true)
    // ✅ 第三层：
    // And the last is in html.
    .with_url(
      r#"data:text/html,
            <!doctype html>
            <html>
              <body style="background-color:rgba(87,87,87,0.5);">hello</body>
              <script>
                window.onload = function() {
                  document.body.innerText = `hello, ${navigator.userAgent}`;
                };
              </script>
            </html>"#,
    )?
    .build()?;

  event_loop.run(move |event, _, control_flow| {
    *control_flow = ControlFlow::Wait;

    match event {
      Event::WindowEvent {
        event: WindowEvent::CloseRequested,
        ..
      } => *control_flow = ControlFlow::Exit,
      _ => {}
    }
  });
}

所以如果我们想要实现磨砂或半透明应用应该从这三方面的配置入手。

透明背景

tauri.conf.json 配置

在官方文档 tauri.conf.json 窗口配置中有 transparent 字段，设置为 true 启用透明度。（默认为 false，不启用）

注意：在 macOS 上，需要从 tauri.conf.json > tauri > macOSPrivateApi 启用 macos-private-api ，默认为 false，不启用。（警告：在 macOS 上使用私有 API 的应用程序会被 App Store 拒绝）

macOSPrivateApi 设置为 true 时：

启用透明背景 API
将 fullScreenEnabled 首选项设置为 true

{
  "tauri": {
    "macOSPrivateApi": true,
    "windows": [
      {
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false,
        "title": "Oh My Box",
        "transparent": true
      }
    ]
  }
}

html 配置

窗口配置中的 transparent 是开启第一层（window）和第二层（webview）的透明度。如果透明度未生效，请检查 html 是否设置了不透明背景色，将其修改为 RGBA 或 transparent。也可以通过 css 文件设置 body 样式。

<!DOCTYPE html>
<html>
  <body style="background-color: rgba(87,87,87,0.5);">
    <div id="root"></div>
  </body>
</html>

注意：在 macOS 中使用透明背景在页面跳转时会出现残影，暂未了解到相关解决方案

磨砂背景

透明背景虽然很酷，但实用性低。因为在使用应用时很容易受到桌面背景的干扰，所以磨砂背景更符合使用场景。

官网并没有给出磨砂背景的相关配置，直接在第三层 html 中使用 css 属性实现模糊效果也会存在一些问题，具体原因可以查看 Blurry and translucent background on a transparent window，issues 中作者提到可能会在 tauri v2 版本中支持此功能，过渡方案可以使用 tauri-apps/window-vibrancy 插件。所以接下来的配置将围绕 tauri-apps/window-vibrancy 进行：

Step 1

安装 window-vibrancy 依赖，推荐使用 cargo edit（该工具扩展了 Cargo，允许你通过从命令行修改 Cargo.toml 文件来添加、删除和升级依赖项）：

# 1. 命令进入 src-tauri 目录
cd src-tauri

# 2. 安装 window-vibrancy
cargo add window-vibrancy

安装完成后会在 Cargo.toml > dependencies 中看到该依赖。

Step 2

在 src-tauri/src 下新建 setup.rs 文件：

use tauri::{App, Manager};
use window_vibrancy::{self, NSVisualEffectMaterial};

/// setup
pub fn init(app: &mut App) -> std::result::Result<(), Box<dyn std::error::Error>> {
    let win = app.get_window("main").unwrap();

    // 仅在 macOS 下执行
    #[cfg(target_os = "macos")]
    window_vibrancy::apply_vibrancy(&win, NSVisualEffectMaterial::FullScreenUI)
        .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");

    // 仅在 windows 下执行
    #[cfg(target_os = "windows")]
    window_vibrancy::apply_blur(&win, Some((18, 18, 18, 125)))
        .expect("Unsupported platform! 'apply_blur' is only supported on Windows");

    Ok(())
}

代码中的 #[cfg(target_os)] 是指条件编译，仅在目标的操作系统中执行相关代码，可以查看 conditional compilation - target_os 了解更多。

Step 3

在 src-tauri/src/main.rs 中使用 setup.rs：

mod setup;

fn main() {
    let context = tauri::generate_context!();
    tauri::Builder::default()
        .setup(setup::init)
        .run(context)
        .expect("error while running OhMyBox application");
}

setup 是一个 Rust 模块，简单来讲就是按照逻辑单元或功能模块进行代码拆分。可以查看 rust-by-example - mod 了解更多。

相关阅读

NSVisualEffectView (apple developer) - 为界面中的视图添加半透明和活力效果

lixiaowei11111 · 2024-09-30T10:20:44Z

lixiaowei11111
Sep 30, 2024

大佬你好,想问一下你知道下面这个webview窗口的左右下为什么会多出一点来吗,这个是tauri v2版本上的

setup.rs
`use super::core::init;
use tauri::{App, Manager};
use window_vibrancy::{self, NSVisualEffectMaterial};
/// setup
pub fn init(app: &mut App) -> std::result::Result<(), Box> {
tauri::async_runtime::block_on(async {
init::on_app_init(&app).await;
});
let win = (&app).get_webview_window("main").unwrap();

// 仅在 macOS 下执行
#[cfg(target_os = "macos")]
window_vibrancy::apply_vibrancy(&win, NSVisualEffectMaterial::FullScreenUI)
    .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");

// 仅在 windows 下执行
#[cfg(target_os = "windows")]
window_vibrancy::apply_blur(&win, Some((18, 18, 18, 125)))
    .expect("Unsupported platform! 'apply_blur' is only supported on Windows");

Ok(())

}
tauri.conf.json{
"productName": "mini-hosts",
"version": "0.1.0",
"identifier": "com.mini-hosts.app",
"build": {
"beforeDevCommand": "pnpm dev",
"devUrl": "http://localhost:1420",
"beforeBuildCommand": "pnpm build",
"frontendDist": "../dist"
},
"app": {
"windows": [
{
"title": "mini-hosts",
"width": 800,
"height": 600,
"transparent": true
}
],
"security": {
"csp": null
}
},
"bundle": {
"active": true,
"targets": "all",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/[email protected]",
"icons/icon.icns",
"icons/icon.ico"
]
}
}`

2 replies

KiWi233333 Oct 24, 2024

应该tauri.conf.json中的app.windows[0].shadow影响到了

lixiaowei11111 Oct 31, 2024

谢谢大佬,刚刚试了一下设置shadow:false还是存在上述的问题,我这边的解决方案是设置decorations:false,然后自己自定义了一个titlebar, 问题已解决https://v2.tauri.app/reference/config/#decorations

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

【08】Tauri 应用篇 - 透明及磨砂背景 #12

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

【08】Tauri 应用篇 - 透明及磨砂背景 #12

lencx Jul 3, 2022 Maintainer

源码阅读

透明背景

tauri.conf.json 配置

html 配置

磨砂背景

Step 1

Step 2

Step 3

相关阅读

Replies: 1 comment · 2 replies

lixiaowei11111 Sep 30, 2024

KiWi233333 Oct 24, 2024

lixiaowei11111 Oct 31, 2024

lencx
Jul 3, 2022
Maintainer

Replies: 1 comment 2 replies

lixiaowei11111
Sep 30, 2024