Tauriでウィンドウサイズを変更する

やりたいこと

Tauriでウィンドウサイズを変更したい

やり方

初期ウィンドウサイズを指定する

/src-tauri/tauri.conf.jsonのwindows欄にウィンドウ幅と高さの初期値が書かれています
ここの値を書き換えてやればそのサイズで表示してくれます

/src-tauri/tauri.conf.json

{
  ...
  "app": {
    "windows": [
      {
        "title": "tauri-clock",
        "width": 400,
        "height": 95
      }
    ],
  },
  ...
}

フロントエンドから動的に変更する

core:windowプラグインから動的にウィンドウサイズを変更できます

permissionを与える

permissionが必要なので、default.jsonからpermissionを与えます

/src-tauri/capability/default.json

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "opener:default",
    "core:window:allow-set-size"
  ]
}

フロントエンドにサイズ変更を書く

getCurrentWindow()で現在のウィンドウを取得して、setSize()するだけです。サイズはPhysicalSizeクラスかLogicalSizeクラスかで指定します。PhysicalSizeはモニタの実寸に合わせた大きさでLogicalSizeは画素数ベースの大きさになるようです

/src/App.tsx

import { getCurrentWindow, LogicalSize } from "@tauri-apps/api/window";

const currentWindow = getCurrentWindow();
async function resizeWindow(width: number, height: number) {
  const appWindow = getCurrentWindow();
  await appWindow.setSize(new LogicalSize(width, height));
}
resizeWindow(920, 95);

まとめ

簡単ですね
レッツトライ