跳转到内容
Tauri

窗口自定义

Tauri 提供了众多选项来自定义应用窗口的外观和感觉。您可以创建自定义标题栏、实现透明窗口、强制尺寸限制等功能。

配置

有三种方式来更改窗口配置

用法

创建自定义标题栏

这些窗口功能的一个常见用途是创建自定义标题栏。本简短教程将引导您完成这个过程。

tauri.conf.json

在您的 tauri.conf.json 中将 decorations 设置为 false

tauri.conf.json
"tauri": {
"windows": [
{
"decorations": false
}
]
}

权限

在功能文件中添加窗口权限。

默认情况下,所有插件命令都被阻止并且无法访问。您必须在您的 capabilities 配置中定义一个权限列表。

更多信息请参阅 功能概述使用插件权限的分步指南

src-tauri/capabilities/default.json
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "main-capability",
"description": "Capability for the main window",
"windows": ["main"],
"permissions": ["core:window:default", "core:window:allow-start-dragging"]
}
权限描述
core:window:default插件的默认权限。除 window:allow-start-dragging 外。
core:window:allow-close启用不带任何预配置范围的关闭命令。
core:window:allow-minimize启用不带任何预配置范围的缩小命令。
core:window:allow-start-dragging启用不带任何预配置范围的开始拖拽命令。
core:window:allow-maximize启用不带任何预配置范围的切换到全屏命令。
core:window:allow-internal-maximize启用不带任何预配置范围的内部切换到全屏命令。

CSS

将此 CSS 示例添加以使它保持在屏幕顶部并对按钮进行样式设计

.titlebar {
height: 30px;
background: #329ea3;
user-select: none;
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.titlebar-button {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
user-select: none;
-webkit-user-select: none;
}
.titlebar-button:hover {
background: #5bbec3;
}

HTML

将此内容放入 HTML `` 标签的顶部

<div data-tauri-drag-region class="titlebar">
<div class="titlebar-button" id="titlebar-minimize">
<img
src="https://api.iconify.design/mdi:window-minimize.svg"
alt="minimize"
/>
</div>
<div class="titlebar-button" id="titlebar-maximize">
<img
src="https://api.iconify.design/mdi:window-maximize.svg"
alt="maximize"
/>
</div>
<div class="titlebar-button" id="titlebar-close">
<img src="https://api.iconify.design/mdi:close.svg" alt="close" />
</div>
</div>

请注意,可能需要将其他内容向下移动,以免标题栏覆盖内容。

JavaScript

使用此代码片段以使按钮正常工作

import { getCurrentWindow } from '@tauri-apps/api/window';
// when using `"withGlobalTauri": true`, you may use
// const { getCurrentWindow } = window.__TAURI__.window;
const appWindow = getCurrentWindow();
document
.getElementById('titlebar-minimize')
?.addEventListener('click', () => appWindow.minimize());
document
.getElementById('titlebar-maximize')
?.addEventListener('click', () => appWindow.toggleMaximize());
document
.getElementById('titlebar-close')
?.addEventListener('click', () => appWindow.close());

请注意,如果您使用的是基于 Rust 的前端,可以将上面的代码复制到您的 index.html 文件中的 `