窗口自定义
Tauri 提供了许多选项来定制应用程序窗口的外观和感受。您可以创建自定义标题栏、透明窗口、强制尺寸限制等等。
有三种方式可以更改窗口配置
这些窗口功能的一个常见用途是创建自定义标题栏。本教程将引导您完成该过程。
在您的 tauri.conf.json
中将 decorations
设置为 false
"tauri": { "windows": [ { "decorations": false } ]}
在能力文件中添加窗口权限。
默认情况下,所有插件命令都被阻止且无法访问。您必须在您的 capabilities
配置中定义权限列表。
有关更多信息,请参阅功能概述,并参阅分步指南以使用插件权限。
{ "$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": { "windows": [ { "title": "Transparent Titlebar Window", "width": 800, "height": 600 } ],}
将 cocoa
crate 添加到依赖项中,以便我们可以使用它来调用 macOS 原生 API
[target."cfg(target_os = \"macos\")".dependencies]cocoa = "0.26"
创建主窗口并更改其背景颜色
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