效果
本文测试通过的 Tauri 版本为 1.0
和 1.2
。

鼠标穿透
依赖
在 cargo.toml
中添加
1 2 3 4
| windows = { version = "0.43.0", features = [ "Win32_Foundation", "Win32_UI_WindowsAndMessaging", ] }
|
代码
初始化窗口时通过 setup
传闭包拿到 window
进行操作。只支持 Windows。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| tauri::Builder::default() .setup(|app| { let window = app.get_window("main").unwrap(); #[cfg(windows)] { use windows::Win32::Foundation::HWND; let hwnd = window.hwnd().unwrap().0; let hwnd = HWND(hwnd); unsafe { let mut style_ex = WINDOW_EX_STYLE(GetWindowLongW(hwnd, GWL_EXSTYLE) as u32); style_ex |= WS_EX_APPWINDOW | WS_EX_COMPOSITED | WS_EX_LAYERED | WS_EX_TRANSPARENT | WS_EX_TOPMOST; use windows::Win32::UI::WindowsAndMessaging::*; let nindex = GWL_EXSTYLE; let _pre_val = SetWindowLongA(hwnd, nindex, style_ex.0 as i32); } } Ok(()) }) .invoke_handler(tauri::generate_handler![...]) .run(tauri::generate_context!()) .expect("error while running tauri application");
|
官方的实现目前还没有进入 tauri,只能先凑合用用。
Hi, since tauri-apps/tao#421 was merged into tao
, can that function be exposed in tauri's api?
透明窗口
窗口设置
为了实现透明窗口,还需要修改 tauri.config.json
。当然,直接修改 window 或者通过 tauri::Builder
应该也是可以的。
1 2 3 4 5 6 7 8 9 10 11
| "tauri": { …, "windows": [ { "fullscreen": true, "resizable": false, "transparent": true, "alwaysOnTop": true } ] }
|
CSS
另外,不要忘记修改需要透明的地方的 CSS。如果你使用了 SvelteKit 模板,可以在 +layout.svelte
中添加:
1 2 3 4 5
| <style> main { background: transparent; } </style>
|
以上。🪟