上一篇 多視窗應用的實作與視窗管理 (理論篇) 提到了如何開發多視窗的功能，在進行實作的範例之前，筆者先帶大家看一下 Electron 提供的視窗 API 功能，介紹完後我們會基於 React 與 Electron 的整合：打造動態的用戶界面，將計時器加入多視窗的功能～

視窗 API

在 Electron 應用中，視窗管理 是開發桌面應用的核心環節之一。Electron 提供了豐富的視窗相關 API，讓開發者能夠靈活地創建、管理和控制視窗的行為與外觀。這篇文章將帶讀者全面了解這些 API，幫助讀者在開發多視窗應用時更加得心應手。

想了解詳細的說明可以參考官方文件

BrowserWindow 基礎 API

BrowserWindow 是 Electron 中創建和管理視窗的核心類。每個視窗都是 BrowserWindow 的物件。以下是一些常用的 BrowserWindow API：

創建視窗

要創建視窗，你需要使用 new BrowserWindow(options) 來創建一個新視窗

const { BrowserWindow } = require('electron');

let mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
  },
});

這個 API 接受一個配置物件，允許你設置視窗的寬高、邊框、透明度等屬性。常用的選項包括：

• width：視窗的寬度（默認值 800）
• height：視窗的高度（默認值 600）
• frame：是否顯示視窗的邊框，設置為 false 時會創建無邊框視窗。
• transparent：設置視窗背景是否透明。
• alwaysOnTop：設置視窗是否總是在其他視窗上方。
• fullscreen：是否啟動全屏模式。

載入內容

視窗創建後，你需要為其載入網頁內容，這可以是本地文件，也可以是遠端的 URL。

mainWindow.loadFile('index.html');  // 載入本地 HTML 文件
mainWindow.loadURL('https://example.com');  // 或者載入 URL

獲取視窗信息

BrowserWindow 提供了多個 API 來獲取視窗的狀態和屬性。

• getBounds(): 返回視窗的尺寸和位置

const bounds = mainWindow.getBounds();
console.log(bounds); // { x: 100, y: 200, width: 800, height: 600 }

• getPosition(): 獲取視窗左上角的位置（x, y）

const [x, y] = mainWindow.getPosition();

• getSize(): 獲取視窗的尺寸（寬度和高度）

const [width, height] = mainWindow.getSize();

• isFocused(): 判斷視窗是否被滑鼠點擊到

const focused = mainWindow.isFocused();

• isVisible(): 判斷視窗是否可見

const visible = mainWindow.isVisible();

視窗狀態控制 API

上一篇文章 多視窗應用的實作與視窗管理 (理論篇) 也有提到部分的 API 功能

視窗顯示與隱藏

• show(): 顯示視窗

mainWindow.show();

• hide(): 隱藏視窗

mainWindow.hide();

• minimize(): 最小化視窗

mainWindow.minimize();

• maximize(): 最大化視窗

mainWindow.maximize();

• restore(): 將視窗從最小化或最大化狀態恢復

mainWindow.restore();

• setFullScreen(): 啟動或退出全螢幕模式

mainWindow.setFullScreen(true);  // 啟動全螢幕
mainWindow.setFullScreen(false); // 退出全螢幕

• isMinimized(): 判斷視窗是否處於最小化狀態

const isMinimized = mainWindow.isMinimized();

視窗關閉

• close(): 關閉視窗

mainWindow.close();

注意，當調用 close() 時，會觸發視窗的 close 事件。如果想在關閉前進行額外的操作，可以攔截這個事件

mainWindow.on('close', (event) => {
  event.preventDefault();  // 防止視窗被關閉
  console.log('視窗關閉事件已觸發');
});

• destroy(): 強制銷毀視窗，不會觸發 close 事件

mainWindow.destroy();

視窗尺寸與位置

• setBounds(bounds): 設置視窗的尺寸與位置，bounds 是一個包含 x、y、width 和 height 的物件

mainWindow.setBounds({ x: 200, y: 200, width: 1024, height: 768 });

• setPosition(x, y): 設置視窗的位置

mainWindow.setPosition(100, 100);

• setSize(width, height): 設置視窗的大小

mainWindow.setSize(1280, 720);

• center(): 將視窗移動到螢幕的中央位置

mainWindow.center();

• setMinimumSize(width, height): 設置視窗的最小大小

mainWindow.setMinimumSize(400, 300);

• setMaximumSize(width, height): 設置視窗的最大大小

mainWindow.setMaximumSize(1600, 1200);

進階視窗控制 API

無邊框視窗與透明視窗

在某些場景下，我們可能需要無邊框視窗（例如自定義樣式的應用）或透明視窗（例如桌面小工具）

• frame: false: 創建無邊框視窗

let framelessWindow = new BrowserWindow({
  width: 800,
  height: 600,
  frame: false,
});

• transparent: true: 創建透明背景的視窗

let transparentWindow = new BrowserWindow({
  width: 800,
  height: 600,
  transparent: true,
  frame: false,  // 通常無邊框視窗會與透明視窗結合使用
});

視窗的總是置頂

• alwaysOnTop: 屬性允許視窗始終保持在其他視窗的上方，這對於工具類應用非常實用

mainWindow.setAlwaysOnTop(true);  // 設置視窗總是在最前
mainWindow.setAlwaysOnTop(false); // 取消置頂

視窗置頂層級控制

• setAlwaysOnTop(): 可以接收第二個參數來指定層級，例如 normal、floating、modal-panel 等

mainWindow.setAlwaysOnTop(true, 'screen-saver');  // 設置在螢幕保護程式上方

虛擬桌面與多顯示器管理

• getAllWindows(): 返回應用中當前打開的所有 BrowserWindow 物件

const allWindows = BrowserWindow.getAllWindows();
console.log(allWindows);  // 列出所有視窗

• getFocusedWindow(): 返回當前處於被滑鼠點擊狀態的視窗

const focusedWindow = BrowserWindow.getFocusedWindow();

• getPrimaryDisplay(): 返回主顯示器的資訊（例如解析度）

const { screen } = require('electron');
const primaryDisplay = screen.getPrimaryDisplay();
console.log(primaryDisplay);

• getAllDisplays(): 返回所有連接的顯示器

const displays = screen.getAllDisplays();

總結

Electron 提供了強大且豐富的 視窗 API，這些 API 讓開發者能夠全面控制視窗的行為、外觀和狀態。從基礎的視窗創建與控制，到進階的無邊框、透明視窗，以及視窗之間的通信與多顯示器管理，這些工具為開發靈活的多視窗應用提供了充足的支持。

通過靈活運用這些 API，你可以創建功能豐富且靈活的多視窗桌面應用，滿足各種場景的需求。掌握這些 API 是開發 Electron 程式的基礎，也是提升使用者體驗的關鍵。