tauri如何实现窗口拖动，自定义标题栏

news2024/11/15 14:02:51

文章目录

一、tauri是什么？
二、封装好的标题栏，引用修改即可使用
三相关配置实现细节
- 实现窗口拖动

一、tauri是什么？

Tauri是一个开源框架，用于创建跨平台的桌面应用程序。它使用Rust编程语言，并结合了现有的Web技术，如HTML、CSS和JavaScript。Tauri旨在提供一个快速、可靠和安全的方式来构建本地应用程序，同时保持Web开发的灵活性和易用性。它支持多个操作系统和架构，包括Windows、macOS和Linux。Tauri的目标是帮助开发者轻松创建高效的桌面应用程序，并提供一个统一的开发体验，使得跨平台开发变得更加简单和方便。

二、封装好的标题栏，引用修改即可使用

我这里前端使用的是vue框架，代码如下

<template>
  <div data-tauri-drag-region class="titlebar">
    <slot class="titlebar-title" name="title"></slot>
    <div class="titlebar-menu">
      <slot name="menu"></slot>
    </div>
    <div class="titlebar-right">
      <div class="titlebar-button" id="titlebar-minimize" @click="appWindow.minimize()">
        <MinusOutlined style="color: #FFF;font-size: 13px"/>
      </div>
      <div class="titlebar-button" id="titlebar-maximize" @click="appWindow.toggleMaximize()"> 
        <BorderOutlined style="color: #FFF;font-size: 13px"/>
      </div>
      <div class="titlebar-button" id="titlebar-close" @click="appWindow.close()">
        <CloseOutlined style="color: #FFF;font-size: 13px"/>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { appWindow } from '@tauri-apps/api/window'
import { MinusOutlined,BorderOutlined,CloseOutlined } from "@ant-design/icons-vue"; 
</script>
<style scoped>
.titlebar-right{
  position: absolute; /* 设置为绝对定位 */
  top: 0px; /* 顶部距离为0 */
  right: 0px; /* 右侧距离为0 */
}
.titlebar-menu{
  display: flex;
  align-items: center;
}
.titlebar {
  height: 46px;
  width: 100%;
  background: #000000;
  display: flex;
  /* justify-content: space-between; */
  flex-direction: row;
  align-items: center;
  position: relative;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 46px;
}
.titlebar-button:hover {
  background: #432f55;
}
.titlebar-title{
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 7px;
  margin-left: 7px;
}
</style>

这里我的窗口右上角图标使用的是ant-design-vue框架带的。使用的时候只需要引入就可以，可以自行修改

      <Titlebar>
      </Titlebar>

三相关配置实现细节

修改tauri.conf.json配置文件，赋予相关权限，并关闭系统自带标题栏

"tauri": {
  "allowList": {
    ...
    "window": {
        "all": false,
        "close": true,
        "hide": true,
        "show": true,
        "maximize": true,
        "minimize": true,
        "unmaximize": true,
        "unminimize": true,
        "startDragging": true
      }
  }
  ...

  "windows": [
    {
      "decorations": false,
      ...
    }
  ]
}