如何在macOS上修改窗口控件位置？用Tauri实现仿原生效果

实现思路与方案 #

在Tauri中没有直接对应Electron trafficLightPosition的配置，但可以通过两种方式实现控件位置的自定义：

• 方案一：隐藏原生控件，自定义实现
  将窗口的titleBarStyle设置为Hidden，完全隐藏原生标题栏和交通灯控件，然后在前端页面中自行实现样式匹配macOS的控制按钮，并通过Tauri的窗口API绑定对应功能，这样就能自由调整按钮位置（比如像Apple Notes那样嵌入自定义标题栏）。

  1. 修改Tauri配置文件tauri.conf.json：

  {
    "tauri": {
      "windows": [
        {
          "title": "你的应用名称",
          "width": 800,
          "height": 600,
          "titleBarStyle": "Hidden",
          "decorations": true
        }
      ]
    }
  }
  

  2. 前端实现按钮与功能绑定：

  import { appWindow } from '@tauri-apps/api/window'
  
  // 绑定最小化功能
  document.querySelector('#min-btn').addEventListener('click', () => {
    appWindow.minimize()
  })
  
  // 绑定最大化/还原功能
  document.querySelector('#max-btn').addEventListener('click', async () => {
    const isMaximized = await appWindow.isMaximized()
    isMaximized ? appWindow.unmaximize() : appWindow.maximize()
  })
  
  // 绑定关闭功能
  document.querySelector('#close-btn').addEventListener('click', () => {
    appWindow.close()
  })
  

  3. 添加CSS保证可拖动区域：

  .custom-titlebar {
    -webkit-app-region: drag; /* 标记标题栏区域可拖动窗口 */
    padding: 8px;
    display: flex;
    align-items: center;
  }
  .custom-titlebar button {
    -webkit-app-region: no-drag; /* 按钮区域取消拖动，避免点击冲突 */
  }
  

• 方案二：Overlay模式下的视觉偏移
  如果你想保留原生控件，仅调整视觉位置，可以在titleBarStyle: 'Overlay'的基础上，给页面主体添加左侧内边距，让内容区域偏移，从而让控件看起来处于不同的位置。但这种方式仅能做简单偏移，无法实现嵌入自定义栏的效果。

  示例CSS：

  body {
    padding-left: 72px; /* 根据需求调整偏移量 */
  }
  

注意点 #

• 自定义控件时尽量匹配macOS原生交互逻辑，比如悬停效果、拖动窗口的行为，保证用户体验一致
• 使用Hidden模式时，务必正确设置可拖动区域，避免窗口无法拖动

内容的提问来源于stack exchange，提问作者Ostap Brehin