Tauri 实战总结 系列二(窗口定制)

Tauri 实战总结 系列二(窗口定制)_第1张图片

窗口定制

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

实现效果

Tauri 实战总结 系列二(窗口定制)_第2张图片

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()}> minimize
appWindow.toggleMaximize()}> maximize
appWindow.hide()}> close
); }; 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"
  1. 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!");
}
  1. 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");
}

你可能感兴趣的:(Tauri,Tauri,实战总结,前端)