Tauri 实战总结 系列二（窗口定制）

窗口定制

Tauri 生成的窗口顶部会有默认的标题栏，默认的效果有时候不符合我们项目需要，接下来我们来实现下如何自定义标题栏。示例源码地址：tauri-study-examples。

实现效果

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 系统上自定义窗口没有圆角及阴影的效果，接下来我们实现该效果。

1. 在 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");
}