跳到內容
Tauri
指南 參考 部落格 發布

視窗自訂

Tauri 提供了許多選項來自訂應用程式視窗的外觀和風格。您可以建立自訂標題列、擁有透明視窗、強制大小限制等等。

設定

有三種方式可以更改視窗配置

用法

建立自訂標題列

這些視窗功能的一個常見用途是建立自訂標題列。這個簡短的教學將引導您完成該過程。

tauri.conf.json

在您的 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啟用 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

新增此 CSS 範例，以將其保持在螢幕頂部並設定按鈕樣式

.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  user-select: none;
  -webkit-user-select: none;
}
.titlebar-button:hover {
  background: #5bbec3;
}

HTML

將此程式碼放在您的 <body> 標籤的頂部

<div data-tauri-drag-region class="titlebar">
  <div class="titlebar-button" id="titlebar-minimize">
    <img
      src="https://api.iconify.design/mdi:window-minimize.svg"
      alt="minimize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-maximize">
    <img
      src="https://api.iconify.design/mdi:window-maximize.svg"
      alt="maximize"
    />
  </div>
  <div class="titlebar-button" id="titlebar-close">
    <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
  </div>
</div>

請注意，您可能需要將其餘內容向下移動，以使標題列不會覆蓋它。

JavaScript

使用此程式碼片段使按鈕正常運作

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

data-tauri-drag-region 的手動實作

對於您自訂拖曳行為的用例，您可以手動新增一個具有 window.startDragging 的事件監聽器，而不是使用 data-tauri-drag-region。

HTML

從上一節的程式碼中，我們移除 data-tauri-drag-region 並新增一個 id

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

Javascript

將事件監聽器新增到標題列元素

// ...
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) 具有自訂視窗背景顏色的透明標題列

我們將從 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