使用 Rust Tauri 創建一個啓動欄應用程序
在這篇文章中我們使用 Rust Tauri 來構建一個類似的 “啓動欄” 類型的應用程序。
搭建一個基本的 Tauri 應用程序
我們將使用 tauri 和 create-tauri-app 工具來快速搭建項目。使用 cargo 安裝 create-tauri-app，並使用以下命令選項運行它：
cargo install create-tauri-app
> cargo create-tauri-app
✔ Project name · tauri-launch
✔ Choose your package manager · cargo
✔ Choose your UI template · vanilla運行後，應該在當前目錄中看到一個新文件夾 tauri-launch，這就是我們的項目目錄。
爲了確保一切都正確設置，應該能夠在項目目錄中運行以下命令。
cargo tauri dev你會看到下面這些：
啓用我們需要的模塊
Tauri 包含大量可以爲應用程序提供更多功能的特性。對於啓動欄類型的應用程序，我們需要啓用全局快捷方式，顧名思義，它將允許我們爲窗口分配全局快捷方式。
在你的 src-tauri/Cargo.toml 文件中，修改 tauri 依賴項，現在應該是這樣的：
tauri = {
version = "1.2",
features = ["shell-open", "global-shortcut"]
}從快捷方式啓動
啓用快捷方式後，我們需要添加一些代碼來註冊快捷方式並在調用時顯示 / 隱藏窗口。
首先，我們將修改 src-tauri/tauri.config.json 文件，給我們的窗口一個標籤，我們可以用它來獲取窗口的句柄。
在文件的底部，你會發現一個 windows 列表。修改這裏的窗口項，添加 label 項。可以使用任何字母數字字符串，在這種情況下，我們將其稱爲 “launcher”。
"windows": [
{
"label": "launcher",
... // 其他窗口選項
}
]接下來，我們將修改 src-tauri/src/main.rs 文件，以便它註冊快捷方式並顯示 / 隱藏我們的窗口。
// 我們想要註冊爲快捷鍵的組合鍵
const SHORTCUT: &str = "Ctrl+f";
fn register_shortcut(app: &mut App) -> Result<(), tauri::Error> {
let app_handle = app.app_handle();
let mut shortcuts = app_handle.global_shortcut_manager();
if !shortcuts.is_registered(SHORTCUT)? {
shortcuts.register(
SHORTCUT,
move || toggle_launchbar(&app_handle)
)?;
}
Ok(())
}// 這應該與你的“tauri.config.json”中的“label”匹配。
const WINDOW: &str = "launcher";
fn toggle_launchbar(app: &AppHandle) {
// Grab a handle to the window
let window = app.get_window(WINDOW)
.expect("Did you label your window?");
// 檢查當前是否可見，如果可見則隱藏。
if let Ok(true) = window.is_visible() {
let _ = window.hide();
} else {
let _ = window.show();
}
}fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.setup(move |app: &mut App| {
if let Err(err) = register_shortcut(app) {
eprintln!("Unable to register shortcut: {err}");
}
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}現在運行應用程序。一旦窗口彈出，嘗試我們在代碼中分配的 Ctrl+f 快捷鍵。你應該能夠在顯示或隱藏主窗口。
這是一個很好的開始，但是這個窗口太大了，對我們光滑的啓動條來說太笨重了。
窗口美學
"windows": [
{
"label": "launcher",
"height": 128,
"width": 640,
...
}
]調整尺寸後，我們的窗戶有點皺了。讓我們做一點拋光，給我們的啓動欄一個漂亮的新外觀，首先，我們把窗戶上的裝飾品拿掉。如果你花了一些時間研究窗口配置的文檔，將注意到幾個有用的選項，即透明、裝飾、中心和可見。
-
將 transparent 設置爲 true 將允許窗口具有透明度。
-
將 decorations 設置爲 false 將關閉窗口邊框和標題欄。
-
將 center 設置爲 true 將在啓動時自動將窗口居中。
-
將 visible 設置爲 false 將在啓動時自動隱藏窗口。
將這些添加到窗口配置中並運行應用程序，看看會發生什麼。你可以隨意使用其他窗口配置選項，看看它們是如何影響窗口的。
如果你熟悉 Spotlight 或其他啓動欄類型的應用程序，我們將需要圓角化並添加一些透明度。讓我們進入 HTML 和 CSS 來調整啓動欄的外觀。
修改外觀
在 src/index.html 文件中，我選擇刪除除文本輸入之外的所有內容。
<body>
<input type="text" id="launcher" />
</body>並更新 CSS，使頁面符合我們爲窗口配置設置的尺寸。輸入框也被最大化，以填充整個空間，並有一個漂亮的邊界半徑，使啓動條有圓角。CSS 的重要部分如下所示：
html, body {
margin: 0;
padding: 0;
width: 640px;
height: 128px;
}
input {
border-radius: 8px;
border: 1px solid #000;
box-sizing: border-box;
font-size: 4em;
outline: none;
padding: 0 0.4em;
height: 100%;
width: 100%;
}
// 根據用戶偏好更改配色方案
@media (prefers-color-scheme: dark) {
input {
color: #ffffff;
background-color: #0f0f0fdd;
}
}
@media (prefers-color-scheme: light) {
input {
color: #0f0f0f;
background-color: #ffffffdd;
}
}通過 cargo tauri dev 運行應用程序，你應該會看到如下內容：
探測提交
我們需要更新 Javascript 和 Rust 代碼，以便從窗口探測到提交，並將輸入框文本發送回 Rust 端以滿足我們的處理需求。
需要調整了 create-tauri-app 生成的 javascript 代碼，以偵聽輸入框中的按鍵，並且只在接收到 Enter 鍵時調用 tauri 命令。
const { invoke } = window.__TAURI__.tauri;
let inputEl;
async function greet() {
// 將輸入發送到Rust端
await invoke("greet", { name: inputEl.value });
// 重置輸入框
inputEl.value = "";
}
window.addEventListener("DOMContentLoaded", () => {
inputEl = document.getElementById("launcher");
// 添加一個keyup監聽器並等待按下“Enter”
inputEl.addEventListener(
"keyup",
(event) => {
if (event.key === "Enter") {
greet();
}
});
});現在實現了客戶端，我們可以調整 Rust 代碼，這樣我們就可以將結果輸出到 stdout 中，並在完成時隱藏窗口。
#[tauri::command]
fn greet(window: tauri::Window, name: &str) {
println!("Input received: {}", name);
toggle_launchbar(&window.app_handle());
}本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/zSKmqopDLTbKYONWxQGFiQ