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

最新推荐文章于 2024-05-14 12:56:46 发布

小黑ii

最新推荐文章于 2024-05-14 12:56:46 发布

阅读量2.7k

点赞数 3

分类专栏： Tauri 文章标签： Tauri 实战总结前端

本文链接：https://blog.csdn.net/qq_35844177/article/details/128523569

版权

Tauri 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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 (
    <div className="customization-page">
      <div data-tauri-drag-region className="titlebar">
        <div
          className="titlebar-button"
          id="titlebar-minimize"
          onClick={() => appWindow.minimize()}>
          <img
            src="https://api.iconify.design/mdi:window-minimize.svg"
            alt="minimize"
          />
        </div>
        <div
          className="titlebar-button"
          id="titlebar-maximize"
          onClick={() => appWindow.toggleMaximize()}>
          <img
            src="https://api.iconify.design/mdi:window-maximize.svg"
            alt="maximize"
          />
        </div>
        <div
          className="titlebar-button"
          id="titlebar-close"
          onClick={() => appWindow.hide()}>
          <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
        </div>
      </div>
    </div>
  );
};

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

在 src-tauri/Cargo.toml 添加依赖项

[dependencies]
...
window-shadows = "0.2.1"

在 src-tauri/src 下添加 utils.rs 文件

use tauri::{Manager, Runtime};
use window_shadows::set_shadow;

pub fn set_window_shadow<R: Runtime>(app: &tauri::App<R>) {
  let window = app.get_window("customization").unwrap();

  set_shadow(&window, true).expect("Unsupported platform!");
}

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