Tauri窗口与界面管理：打造专业桌面应用体验 (入门系列五)

窗口管理是桌面应用的核心特性之一，良好的窗口管理可以显著提升用户体验。在Web开发中，我们通常被限制在浏览器窗口内，但Tauri允许前端开发者控制应用窗口的方方面面，从而创造出更加原生的体验。

窗口配置基础

初始窗口配置

在tauri.conf.json文件中，我们可以配置应用启动时的主窗口。Tauri v2提供了更丰富的窗口配置选项：

{"app": {"windows": [{"label": "main",  // 窗口唯一标识符"title": "My Tauri App",  // 窗口标题"width": 800,  // 窗口宽度"height": 600,  // 窗口高度"x": null,  // 窗口X坐标，null表示自动"y": null,  // 窗口Y坐标，null表示自动"center": true,  // 是否居中显示"resizable": true,  // 是否可调整大小"minWidth": 400,  // 最小宽度"minHeight": 200,  // 最小高度"maxWidth": null,  // 最大宽度，null表示不限制"maxHeight": null,  // 最大高度，null表示不限制"fullscreen": false,  // 是否全屏"focus": true,  // 创建时是否获得焦点"maximized": false,  // 是否最大化"visible": true,  // 是否可见"decorations": true,  // 是否显示窗口装饰"alwaysOnTop": false,  // 是否置顶"skipTaskbar": false,  // 是否在任务栏隐藏"transparent": false,  // 是否透明"shadow": true,  // 是否显示阴影"theme": null,  // 窗口主题，"light"或"dark""closable": true,  // 是否可关闭"fileDropEnabled": true,  // 是否允许拖放文件"acceptFirstMouse": false,  // macOS上是否接受首次鼠标点击"tabbingIdentifier": null,  // macOS上的标签标识符"titleBarStyle": "Visible",  // 标题栏样式，"Visible"、"Transparent"或"Overlay""hiddenTitle": false,  // macOS上是否隐藏标题"url": "index.html",  // 加载的URL或本地文件路径"userAgent": null,  // 自定义用户代理"incognito": false,  // 是否使用隐身模式"contentProtected": false,  // 是否保护窗口内容不被截图"cursor": null,  // 默认鼠标指针样式"windowEffects": null,  // 窗口视觉效果设置"maximizable": true,  // 是否可最大化"minimizable": true,  // 是否可最小化"webviewAttributes": {}  // WebView的额外属性}]}
}

这些配置选项让你能够精确控制窗口的外观和行为。每个选项都有其特定用途：

• 基本属性：width、height、title等控制窗口的基本外观
• 位置控制：x、y、center决定窗口的初始位置
• 大小限制：minWidth、minHeight、maxWidth、maxHeight控制窗口大小范围
• 状态控制：maximized、fullscreen、visible等控制窗口的初始状态
• 外观设置：decorations、transparent、shadow等控制窗口的视觉效果
• 行为控制：resizable、closable、fileDropEnabled等控制窗口的交互行为

窗口标识符

每个窗口都需要一个唯一的标识符（label），这是通过API操作窗口的关键。默认主窗口的标识符是main。如果你需要创建多窗口应用，需要为每个窗口指定唯一的标识符：

{"app": {"windows": [{"label": "main",  // 主窗口标识符"title": "主窗口"},{"label": "settings",  // 设置窗口标识符"title": "设置","width": 500,"height": 400,"visible": false  // 初始不可见}]}
}

窗口父子关系

Tauri v2支持设置窗口的父子关系，这对于创建模态窗口或工具窗口特别有用：

{"app": {"windows": [{"label": "main","title": "主窗口"},{"label": "modal","title": "模态窗口","parent": "main",  // 指定父窗口"width": 400,"height": 300,"decorations": false,  // 无边框窗口"transparent": true,  // 透明背景"alwaysOnTop": true  // 保持在最上层}]}
}

窗口操作API

Tauri提供了丰富的窗口操作API，让你可以从前端控制窗口行为。在Tauri v2中，这些API更加类型安全和易用。

基本窗口操作

import { Window } from '@tauri-apps/api/window';// 获取当前窗口实例
const window = Window.getCurrent();// 基本窗口操作
async function windowControls() {// 最小化await window.minimize();// 最大化await window.maximize();// 恢复原始大小await window.unmaximize();// 切换全屏await window.setFullscreen(true);// 关闭窗口await window.close();// 获取窗口状态const isMaximized = await window.isMaximized();const isFullscreen = await window.isFullscreen();const isVisible = await window.isVisible();// 设置窗口大小await window.setSize(new LogicalSize(800, 600));// 设置窗口位置await window.setPosition(new LogicalPosition(100, 100));// 设置窗口标题await window.setTitle('新标题');// 设置窗口焦点await window.setFocus();// 设置窗口置顶await window.setAlwaysOnTop(true);// 设置窗口透明度await window.setOpacity(0.8);
}

窗口状态监听

Tauri v2提供了更强大的事件监听系统，让你能够响应窗口的各种状态变化：

import { Window } from '@tauri-apps/api/window';function setupWindowListeners() {const window = Window.getCurrent();// 窗口移动const unlisten1 = window.onMoved(({ x, y }) => {console.log(`窗口移动到 (${x}, ${y})`);});// 窗口缩放const unlisten2 = window.onResized(({ width, height }) => {console.log(`窗口大小调整为 ${width}x${height}`);});// 窗口焦点变化const unlisten3 = window.onFocusChanged(({ focused }) => {console.log(`窗口${focused ? '获得' : '失去'}焦点`);});// 窗口即将关闭const unlisten4 = window.onCloseRequested((event) => {// 阻止默认关闭行为event.preventDefault();// 显示确认对话框if (confirm('确定要关闭吗？')) {window.close();}});// 窗口主题变化const unlisten5 = window.onThemeChanged(({ theme }) => {console.log(`窗口主题变为: ${theme}`);});// 窗口缩放比例变化const unlisten6 = window.onScaleFactorChanged(({ scaleFactor }) => {console.log(`窗口缩放比例变为: ${scaleFactor}`);});// 清理监听器return () => {unlisten1();unlisten2();unlisten3();unlisten4();unlisten5();unlisten6();};
}

多窗口管理

Tauri v2提供了更强大的多窗口管理能力，支持创建、查找和控制多个窗口：

import { Window } from '@tauri-apps/api/window';async function openSettingsWindow() {// 检查窗口是否已存在const existingWindow = Window.getByLabel('settings');if (existingWindow) {// 如果已存在，激活它await existingWindow.setFocus();return existingWindow;}// 创建新窗口const settingsWindow = new Window('settings', {url: 'settings.html',  // 加载的HTML文件title: '应用设置',width: 500,height: 400,center: true,resizable: true,parent: Window.getCurrent(),  // 设置父窗口decorations: false,  // 无边框窗口transparent: true,  // 透明背景alwaysOnTop: true  // 保持在最上层});// 监听窗口事件settingsWindow.once('tauri://created', () => {console.log('设置窗口已创建');});settingsWindow.once('tauri://error', (e) => {console.error('设置窗口创建失败:', e);});return settingsWindow;
}// 获取所有窗口
async function getAllWindows() {const windows = await Window.getAll();console.log('所有窗口:', windows.map(w => w.label));
}// 获取主窗口
async function getMainWindow() {const mainWindow = await Window.getByLabel('main');return mainWindow;
}

窗口间通信

Tauri v2提供了多种窗口间通信的方式：

通过事件通信

import { Window } from '@tauri-apps/api/window';
import { emit, listen } from '@tauri-apps/api/event';// 在主窗口中发送事件
function sendDataToSettings(data) {emit('data-to-settings', data);
}// 在设置窗口中监听事件
function listenForData() {return listen('data-to-settings', (event) => {console.log('收到数据:', event.payload);// 处理数据...});
}

通过窗口API直接发送

import { Window } from '@tauri-apps/api/window';// 在一个窗口中向另一个窗口发送消息
async function sendMessageToMain(message) {const mainWindow = await Window.getByLabel('main');if (mainWindow) {await mainWindow.emit('message-from-settings', message);}
}

自定义窗口

无边框窗口

Tauri v2提供了更灵活的无边框窗口配置，让你能够创建完全自定义的窗口界面：

{"app": {"windows": [{"decorations": false,  // 禁用标准窗口装饰"transparent": true,   // 启用透明背景"titleBarStyle": "Overlay",  // 使用覆盖式标题栏"shadow": true,  // 保留窗口阴影"contentProtected": true  // 保护窗口内容}]}
}

然后在前端实现自定义标题栏：

<template><div class="custom-titlebar"><div class="titlebar-drag-region"></div><div class="window-title">{{ title }}</div><div class="window-controls"><button @click="minimize" class="control-button"><span>🗕</span></button><button @click="toggleMaximize" class="control-button"><span>{{ isMaximized ? '🗗' : '🗖' }}</span></button><button @click="close" class="control-button close"><span>✕</span></button></div></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Window } from '@tauri-apps/api/window';const title = ref('My Custom App');
const isMaximized = ref(false);
const window = Window.getCurrent();async function minimize() {await window.minimize();
}async function toggleMaximize() {if (isMaximized.value) {await window.unmaximize();isMaximized.value = false;} else {await window.maximize();isMaximized.value = true;}
}async function close() {await window.close();
}let unlisten;onMounted(async () => {// 监听窗口状态变化unlisten = await window.onResized(() => {// 检查是否最大化isMaximized.value = await window.isMaximized();});
});onUnmounted(() => {if (unlisten) unlisten();
});
</script><style scoped>
.custom-titlebar {height: 32px;background: #2b2b2b;display: flex;justify-content: space-between;align-items: center;color: white;user-select: none;position: fixed;top: 0;left: 0;right: 0;z-index: 1000;
}.titlebar-drag-region {position: absolute;top: 0;left: 0;right: 0;height: 100%;-webkit-app-region: drag; /* 允许拖拽 */
}.window-title {margin-left: 12px;font-size: 12px;
}.window-controls {display: flex;-webkit-app-region: no-drag; /* 按钮区域不可拖拽 */
}.control-button {width: 46px;height: 32px;border: none;background: transparent;color: white;font-size: 12px;display: flex;justify-content: center;align-items: center;cursor: pointer;
}.control-button:hover {background: rgba(255, 255, 255, 0.1);
}.control-button.close:hover {background: #e81123;
}
</style>

系统托盘

Tauri v2提供了更强大的系统托盘功能，支持自定义图标、菜单和事件处理：

// src-tauri/src/main.rs
use tauri::{CustomMenuItem, SystemTray, SystemTrayMenu, SystemTrayMenuItem, SystemTrayEvent,Manager
};fn main() {// 定义托盘菜单项let quit = CustomMenuItem::new("quit".to_string(), "退出");let show = CustomMenuItem::new("show".to_string(), "显示窗口");let hide = CustomMenuItem::new("hide".to_string(), "隐藏窗口");let settings = CustomMenuItem::new("settings".to_string(), "设置");// 创建托盘菜单let tray_menu = SystemTrayMenu::new().add_item(show).add_item(hide).add_native_item(SystemTrayMenuItem::Separator).add_item(settings).add_native_item(SystemTrayMenuItem::Separator).add_item(quit);// 创建系统托盘let system_tray = SystemTray::new().with_menu(tray_menu).with_icon(tauri::Icon::Raw(include_bytes!("../icons/icon.png").to_vec()));tauri::Builder::default().system_tray(system_tray).on_system_tray_event(|app, event| match event {// 处理托盘菜单点击SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {"quit" => {app.exit(0);}"show" => {let window = app.get_window("main").unwrap();window.show().unwrap();window.set_focus().unwrap();}"hide" => {let window = app.get_window("main").unwrap();window.hide().unwrap();}"settings" => {let window = app.get_window("main").unwrap();window.emit("open-settings", ()).unwrap();}_ => {}},// 托盘图标左键点击SystemTrayEvent::LeftClick { .. } => {let window = app.get_window("main").unwrap();if window.is_visible().unwrap() {window.hide().unwrap();} else {window.show().unwrap();window.set_focus().unwrap();}}// 托盘图标右键点击SystemTrayEvent::RightClick { .. } => {// 可以在这里显示自定义菜单}_ => {}}).run(tauri::generate_context!()).expect("error while running tauri application");
}

在前端监听托盘事件：

import { Window } from '@tauri-apps/api/window';
import { listen } from '@tauri-apps/api/event';// 监听设置菜单点击事件
listen('open-settings', () => {// 打开设置窗口openSettingsWindow();
});

窗口内容管理

单页面应用与路由

对于单页面应用（SPA），你可以利用前端路由管理不同页面，而不是创建多个窗口：

// Vue Router示例
import { createRouter, createWebHashHistory } from 'vue-router';const router = createRouter({history: createWebHashHistory(), // 使用Hash模式路由routes: [{ path: '/', component: Home },{ path: '/settings', component: Settings },{ path: '/profile', component: Profile }]
});

窗口内加载URL

Tauri v2提供了更灵活的URL加载方式：

import { Window } from '@tauri-apps/api/window';// 创建窗口并加载外部URL
const docsWindow = new Window('docs', {url: 'https://tauri.app/docs/',title: 'Tauri文档',
});// 在现有窗口中加载新URL
async function navigateToHelp() {const window = Window.getCurrent();await window.loadUrl('/help.html');
}

嵌入网页内容

Tauri v2支持在应用中嵌入外部网页内容，并提供了更好的安全控制：

<template><div class="webview-container"><iframe :src="url" class="webview"@load="onFrameLoad"sandbox="allow-same-origin allow-scripts"></iframe></div>
</template><script setup>
import { ref } from 'vue';const url = ref('https://tauri.app');function onFrameLoad(event) {console.log('Frame loaded:', event);
}
</script><style scoped>
.webview-container {width: 100%;height: 100%;overflow: hidden;
}.webview {width: 100%;height: 100%;border: none;
}
</style>

响应式设计与窗口缩放

动态调整布局

Tauri v2提供了更好的窗口缩放事件支持，让你能够实现更流畅的响应式设计：

<template><div class="app-container" :class="{ 'compact': isCompact }"><div class="sidebar" v-if="!isCompact"><!-- 侧边栏内容 --></div><div class="main-content"><!-- 主要内容 --></div></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Window } from '@tauri-apps/api/window';const isCompact = ref(false);
const window = Window.getCurrent();
let unlisten;async function checkWindowSize() {const { width } = await window.innerSize();isCompact.value = width < 768;
}onMounted(async () => {await checkWindowSize();unlisten = await window.onResized(() => {checkWindowSize();});
});onUnmounted(() => {if (unlisten) unlisten();
});
</script><style scoped>
.app-container {display: flex;height: 100vh;
}.sidebar {width: 250px;background: #f5f5f5;
}.main-content {flex: 1;
}.compact .main-content {width: 100%;
}
</style>

保存和恢复窗口状态

Tauri v2提供了更可靠的窗口状态管理：

import { Window } from '@tauri-apps/api/window';
import { Store } from 'tauri-plugin-store-api';// 创建存储
const store = new Store('window-state.dat');// 保存窗口状态
async function saveWindowState() {try {const window = Window.getCurrent();const position = await window.outerPosition();const size = await window.outerSize();const isMaximized = await window.isMaximized();await store.set('windowState', {x: position.x,y: position.y,width: size.width,height: size.height,isMaximized});await store.save();} catch (error) {console.error('保存窗口状态失败:', error);}
}// 恢复窗口状态
async function restoreWindowState() {try {const window = Window.getCurrent();const state = await store.get('windowState');if (state) {// 先设置位置和大小if (state.width && state.height) {await window.setSize(new LogicalSize(state.width, state.height));}if (state.x !== undefined && state.y !== undefined) {await window.setPosition(new LogicalPosition(state.x, state.y));}// 然后处理最大化状态if (state.isMaximized) {await window.maximize();}}} catch (error) {console.error('恢复窗口状态失败:', error);}
}// 在窗口即将关闭时保存状态
Window.getCurrent().onCloseRequested(async (event) => {// 保存窗口状态await saveWindowState();
});// 应用启动时恢复状态
document.addEventListener('DOMContentLoaded', async () => {await restoreWindowState();
});

小结

作为前端开发者，Tauri的窗口管理功能让你能够打造专业级的桌面应用体验。通过本文介绍的技术，你可以：

• 配置和控制窗口的基本属性
• 创建多窗口应用并实现窗口间通信
• 设计自定义无边框窗口和标题栏
• 添加系统托盘功能
• 管理窗口内容和导航
• 实现响应式设计以适应窗口缩放
• 保存和恢复窗口状态

这些能力使你能够超越传统Web应用的限制，创建具有原生应用外观和体验的桌面软件。

在下一篇文章中，我们将探讨Tauri的系统集成功能，包括通知、快捷键和自动启动等特性。