跳到内容
Tauri

窗口自定义

Tauri 提供了许多选项来定制应用程序窗口的外观和感受。您可以创建自定义标题栏、透明窗口、强制尺寸限制等等。

有三种方式可以更改窗口配置

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

在您的 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启用 start_dragging 命令,无需任何预配置范围。
core:window:allow-toggle-maximize启用 toggle_maximize 命令,无需任何预配置范围。
core:window:allow-internal-toggle-maximize启用 internal_toggle_maximize 命令,无需任何预配置范围。

添加此 CSS 示例以使其保持在屏幕顶部并设置按钮样式

.titlebar {
height: 30px;
background: #329ea3;
user-select: none;
display: grid;
grid-template-columns: auto max-content;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.titlebar > .controls {
display: flex;
}
.titlebar button {
appearance: none;
padding: 0;
margin: 0;
border: none;
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
background-color: transparent;
}
.titlebar button:hover {
background: #5bbec3;
}

将此放在您的 <body> 标签顶部

<div class="titlebar">
<div data-tauri-drag-region></div>
<div class="controls">
<button id="titlebar-minimize" title="minimize">
<!-- https://api.iconify.design/mdi:window-minimize.svg -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path fill="currentColor" d="M19 13H5v-2h14z" />
</svg>
</button>
<button id="titlebar-maximize" title="maximize">
<!-- https://api.iconify.design/mdi:window-maximize.svg -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path fill="currentColor" d="M4 4h16v16H4zm2 4v10h12V8z" />
</svg>
</button>
<button id="titlebar-close" title="close">
<!-- https://api.iconify.design/mdi:close.svg -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"
/>
</svg>
</button>
</div>
</div>

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

使用此代码片段使按钮生效

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 文件中的 <script> 元素中。

对于需要自定义拖动行为的用例,您可以手动添加事件监听器并使用 window.startDragging,而不是使用 data-tauri-drag-region

从上一节的代码中,我们删除了 data-tauri-drag-region 并添加了一个 id

<div data-tauri-drag-region class="titlebar">
<div id="titlebar" class="titlebar">
<!-- ... -->
</div>
</div>

为标题栏元素添加事件监听器

// ...
document.getElementById('titlebar')?.addEventListener('mousedown', (e) => {
if (e.buttons === 1) {
// Primary (left) button
e.detail === 2
? appWindow.toggleMaximize() // Maximize on double click
: appWindow.startDragging(); // Else start dragging
}
});

我们将创建主窗口并从 Rust 端更改其背景颜色。

tauri.conf.json 文件中删除主窗口

tauri.conf.json
"tauri": {
"windows": [
{
"title": "Transparent Titlebar Window",
"width": 800,
"height": 600
}
],
}

cocoa crate 添加到依赖项中,以便我们可以使用它来调用 macOS 原生 API

src-tauri/Cargo.toml
[target."cfg(target_os = \"macos\")".dependencies]
cocoa = "0.26"

创建主窗口并更改其背景颜色

src-tauri/src/lib.rs
use tauri::{TitleBarStyle, WebviewUrl, WebviewWindowBuilder};
pub fn run() {
tauri::Builder::default()
.setup(|app| {
let win_builder =
WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
.title("Transparent Titlebar Window")
.inner_size(800.0, 600.0);
// set transparent title bar only when building for macOS
#[cfg(target_os = "macos")]
let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);
let window = win_builder.build().unwrap();
// set background color only when building for macOS
#[cfg(target_os = "macos")]
{
use cocoa::appkit::{NSColor, NSWindow};
use cocoa::base::{id, nil};
let ns_window = window.ns_window().unwrap() as id;
unsafe {
let bg_color = NSColor::colorWithRed_green_blue_alpha_(
nil,
50.0 / 255.0,
158.0 / 255.0,
163.5 / 255.0,
1.0,
);
ns_window.setBackgroundColor_(bg_color);
}
}
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

© 2025 Tauri 贡献者。CC-BY / MIT