--- highlight: atom-one-dark --- ![tauri](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/637878cc7c1b4a6fac1e40508394b548~tplv-k3u1fbpfcp-zoom-1.image) ## 窗口定制 `Tauri` 生成的窗口顶部会有默认的标题栏，默认的效果有时候不符合我们项目需要，接下来我们来实现下如何自定义标题栏。示例源码地址：[tauri-study-examples](https://github.com/wkl007/tauri-study-examples)。 ### 实现效果 ![image-20230102184405613](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbd1b8829fd14ef999a5af1d7df976de~tplv-k3u1fbpfcp-zoom-1.image) ### 1. 添加窗口在 `tauri.conf.json` 里添加窗口 ``` { "window":[ { "label": "customization", "url": "/customization", "fullscreen": false, "width": 800, "height": 600, "center": true, "resizable": true, "skipTaskbar": false, "visible": false, "decorations": false } ] } ``` ### 2. HTML 添加标题栏 ``` import { Button } from 'antd'; import { WebviewWindow } from '@tauri-apps/api/window'; import { appWindow } from '@tauri-apps/api/window'; const CustomizationPage = () => { return (

appWindow.minimize()}>

appWindow.toggleMaximize()}>

appWindow.hide()}>

); }; export default CustomizationPage; ``` ### 3. CSS 配置 ``` .titlebar { position: fixed; top: 0; right: 0; left: 0; display: flex; justify-content: flex-end; height: 30px; background: #329ea3; user-select: none; } .titlebar-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .titlebar-button:hover { background: #5bbec3; } ``` ### 4. window-shadows 配置（可选）经过上述三步配置后已经可以实现自定义标题栏的效果，但在 `win11` 系统上自定义窗口没有圆角及阴影的效果，接下来我们实现该效果。 0. 在 `src-tauri/Cargo.toml` 添加依赖项 ``` [dependencies] ... window-shadows = "0.2.1" ``` 2. 在 `src-tauri/src` 下添加 `utils.rs` 文件 ``` use tauri::{Manager, Runtime}; use window_shadows::set_shadow; pub fn set_window_shadow(app: &tauri::App) { let window = app.get_window("customization").unwrap(); set_shadow(&window, true).expect("Unsupported platform!"); } ``` 3. 在 `main.rs` 文件中使用 ``` use crate::{ utils::{set_window_shadow} }; mod utils; fn main() { tauri::Builder::default() .setup(|app| { set_window_shadow(app); Ok(()) }) .invoke_handler(tauri::generate_handler![]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } ```