Skip to content
Tauri 中文网
指南 手册 公告 🌐 Nodejs.cn

窗口自定义

Tauri 提供了很多自定义应用窗口外观和感觉的选项。你可以创建自定义标题栏、使用透明窗口、强制尺寸限制等等。

🌐 Tauri provides lots of options for customizing the look and feel of your app’s window. You can create custom titlebars, have transparent windows, enforce size constraints, and more.

配置

Section titled “配置”

🌐 Configuration

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

🌐 There are three ways to change the window configuration:

使用

Section titled “使用”

🌐 Usage

创建自定义标题栏

Section titled “创建自定义标题栏”

🌐 Creating a Custom Titlebar

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

🌐 A common use of these window features is creating a custom titlebar. This short tutorial will guide you through that process.

tauri.conf.json

Section titled “tauri.conf.json”

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

🌐 Set decorations to false in your tauri.conf.json:

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

权限

Section titled “权限”

🌐 Permissions

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

🌐 Add window permissions in capability file.

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

🌐 By default, all plugin commands are blocked and cannot be accessed. You must define a list of permissions in your capabilities configuration.

有关更多信息，请参见功能概览，有关使用插件权限的分步指南，请参见分步指南。

🌐 See the Capabilities Overview for more information and the step by step guide to use plugin permissions.

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启用 close 命令，无需任何预配置范围。
core:window:allow-minimize启用 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

Section titled “CSS”

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

🌐 Add this CSS sample to keep it at the top of the screen and style the buttons:

.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;
}

HTML

Section titled “HTML”

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

🌐 Put this at the top of your <body> tag:

<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>

请注意，你可能需要将其余内容向下移动，以便标题栏不会覆盖它。

🌐 Note that you may need to move the rest of your content down so that the titlebar doesn’t cover it.

JavaScript

Section titled “JavaScript”

使用此代码片段使按钮工作：

🌐 Use this code snippet to make the buttons work:

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> 元素。

🌐 Note that if you are using a Rust-based frontend, you can copy the code above into a <script> element in your index.html file.

data-tauri-drag-region 的手动实现

Section titled “data-tauri-drag-region 的手动实现”

🌐 Manual Implementation of data-tauri-drag-region

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

🌐 For use cases where you customize the drag behavior, you can manually add an event listener with window.startDragging instead of using data-tauri-drag-region.

HTML

Section titled “HTML”

从上一节的代码中，我们移除 data-tauri-drag-region 并添加一个 id：

🌐 From the code in the previous section, we remove data-tauri-drag-region and add an id:

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

Javascript

Section titled “Javascript”

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

🌐 Add an event listener to the titlebar element:

// ...
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
  }
});

(macOS) 具有自定义窗口背景颜色的透明标题栏

Section titled “(macOS) 具有自定义窗口背景颜色的透明标题栏”

🌐 (macOS) Transparent Titlebar with Custom Window Background Color

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

🌐 We are going to create the main window and change its background color from the Rust side.

从 tauri.conf.json 文件中移除主窗口：

🌐 Remove the main window from the tauri.conf.json file:

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

将 cocoa crate 添加到依赖中，以便我们可以用它来调用 macOS 本地 API：

🌐 Add cocoa crate to dependencies so that we can use it to call the macOS native API:

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

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

🌐 Create the main window and change its background color:

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");
}

Tauri 中文网 - 粤ICP备13048890号
Nodejs.cn 旗下网站