Tauri 中的 Window API 提供了用于管理应用程序窗口的 JavaScript 接口。它允许开发人员在 Tauri 应用程序中创建、操作和控制窗口和 Webview。本文档记录了 Window API 的功能、接口和用法模式。有关管理应用程序整体状态的 App API 的信息,请参阅 App API。
Window API 主要包含两个模块
window 模块,提供坐标系实用程序和与窗口相关的类型webviewWindow 模块,提供创建和管理 Webview 窗口的核心功能这些模块提供了对窗口的全面控制,包括:
来源:examples/api/src/views/Window.svelte1-388
与窗口交互的主要类是 WebviewWindow。Tauri 应用程序中的每个窗口都由一个 WebviewWindow 实例表示,它提供了操作该窗口属性和行为的方法。
Tauri 中的每个窗口都有一个唯一的标签作为其标识符。创建窗口、获取现有窗口的引用或在进行窗口间通信时定位特定窗口时使用此标签。
Tauri 支持两种坐标系:
Window API 提供了用于处理这两种系统的类。
两种坐标类型都提供了转换方法:
PhysicalPosition.toLogical() 和 PhysicalSize.toLogical() 转换为逻辑坐标LogicalPosition.toPhysical() 和 LogicalSize.toPhysical() 转换为物理坐标来源:examples/api/src/views/Window.svelte1-139
要创建新窗口,请使用唯一的标签实例化 WebviewWindow 类。
第二个参数是一个选项对象,可以自定义窗口的许多方面。
窗口在其生命周期中会发出各种事件。
创建窗口时可以监听这些事件。
来源:examples/api/src/views/Window.svelte188-200
控制窗口尺寸和屏幕位置
| 方法 | 描述 |
|---|---|
setSize(size) | 设置窗口大小 |
innerSize() | 获取内容区域大小 |
outerSize() | 获取整个窗口大小(包括装饰) |
setPosition(position) | 设置窗口位置 |
innerPosition() | 获取内容区域位置 |
outerPosition() | 获取整个窗口位置 |
center() | 将窗口置于屏幕中央 |
示例
设置最小或最大尺寸限制
控制窗口的视觉特性
| 方法 | 描述 |
|---|---|
setDecorations(decorations) | 切换窗口边框 |
setResizable(resizable) | 允许/禁止窗口调整大小 |
setTitle(title) | 设置窗口标题 |
setFullscreen(fullscreen) | 切换全屏模式 |
setIcon(path) | 设置窗口图标 |
setBackgroundColor(color) | 设置窗口背景色 |
setTheme(theme) | 设置亮色/暗色主题 |
setEffects(effects) | 应用视觉效果(特定于平台) |
示例
来源:examples/api/src/views/Window.svelte142-186 examples/api/src/views/Window.svelte296-340 examples/api/src/views/Window.svelte442-455
控制窗口如何行为
| 方法 | 描述 |
|---|---|
setAlwaysOnTop(alwaysOnTop) | 保持窗口置于其他窗口之上 |
setAlwaysOnBottom(alwaysOnBottom) | 保持窗口置于其他窗口之下 |
setContentProtected(protected) | 防止屏幕截图 |
setMaximizable(maximizable) | 允许/禁止最大化 |
setMinimizable(minimizable) | 允许/禁止最小化 |
setClosable(closable) | 允许/禁止关闭 |
minimize() | 最小化窗口 |
maximize() | 最大化窗口 |
unminimize() | 从最小化状态恢复 |
unmaximize() | 从最大化状态恢复 |
show() | 显示窗口 |
hide() | 隐藏窗口 |
setEnabled(enabled) | 启用/禁用窗口输入 |
close() | 关闭窗口 |
示例
来源:examples/api/src/views/Window.svelte148-182 examples/api/src/views/Window.svelte460-477
请求用户关注(闪烁或在任务栏中弹跳)
控制鼠标光标
| 方法 | 描述 |
|---|---|
setCursorIcon(icon) | 更改光标图标 |
setCursorPosition(position) | 将光标移动到指定位置 |
setCursorGrab(grab) | 锁定光标(限制在窗口内) |
setCursorVisible(visible) | 显示/隐藏光标 |
setIgnoreCursorEvents(ignore) | 将光标事件传递给窗口 |
来源:examples/api/src/views/Window.svelte92-120 examples/api/src/views/Window.svelte664-702
设置任务栏/Dock 进度指示器
来源:examples/api/src/views/Window.svelte707-731
应用特定于平台的视觉效果
来源:examples/api/src/views/Window.svelte262-293 examples/api/src/views/Window.svelte735-743
窗口会发出各种事件,您可以监听这些事件。
监听事件
来源:examples/api/src/views/Window.svelte224-230
获取所有窗口的引用
来源:examples/api/src/views/Window.svelte19-22
窗口可以使用事件进行通信。
窗口可以使用物理坐标和逻辑坐标进行定位和缩放。
在坐标系统之间进行转换
来源:examples/api/src/views/Window.svelte110-113 examples/api/src/views/Window.svelte621-631
一些 Window API 功能是特定于平台的。
| 功能 | Windows | macOS | Linux | iOS | Android |
|---|---|---|---|---|---|
| 窗口效果 | ✓ (Mica、Blur 等) | ✓ (Vibrancy) | ✓ (有限) | ✗ | ✗ |
| 进度条 | ✓ | ✓ | ✓ (有限) | ✗ | ✗ |
| 标题栏样式 | ✓ (有限) | ✓ | ✓ (有限) | ✗ | ✗ |
| Badge API | ✓ (Overlay) | ✓ (Badge) | ✓ (有限) | ✓ | ✗ |
| 用户关注 | ✓ | ✓ | ✓ | ✗ | ✗ |
Windows 特有的效果
mica:半透明材质,融合了桌面壁纸acrylic:更透明的模糊效果tabbed:窗口的标签页样式blur:基本模糊效果macOS 特有的效果
titlebar:模糊标题栏selection:选中文字后面的模糊menu:菜单后面的模糊popover:弹出窗口后面的模糊sidebar:侧边栏模糊headerView:标题栏视图模糊sheet:工作表模糊windowBackground:窗口背景模糊hudWindow:HUD 窗口模糊fullScreenUI:全屏 UI 模糊tooltip:工具提示模糊contentBackground:内容背景模糊underWindowBackground:窗口背景下的模糊underPageBackground:页面背景下的模糊