Rust 高效能的跨平台 GUI 框架，上手簡單！

在Rust中建立美觀、即時反饋的使用者介面一直是一個挑戰，直到 egui 的出現。 egui 是一個即時模式(immediate mode)的GUI庫，它的易用性和跨平台能力使其成為Rust社群中的寵兒。今天，我們將深入探究 egui 的設計理念、核心功能與整合方法，並透過例項來展示其在實際套用開發中的魅力。

設計哲學

egui 的核心設計理念旨在提供一個簡單、響應式、可移植並且易於整合的GUI庫。它是完全用Rust寫成的，並且沒有使用 unsafe 程式碼塊，確保了安全性。 egui 不僅可以執行在Web上，還可以原生執行在各大作業系統和遊戲引擎中。

ui.heading("My egui Application");
ui.horizontal(|ui| {
ui.label("Your name: ");
ui.text_edit_singleline(&mut name);
});
ui.add(egui::Slider::new(&mut age, 0..=120).text("age"));
if ui.button("Increment").clicked() {
age += 1;
}
ui.label(format!("Hello '{}', age {}", name, age));


上面的程式碼演示了如何使用 egui 建立一個簡單的使用者介面。我們可以看到，布局的建立非常直觀，並采用了Rust的閉包來組織程式碼，這讓邏輯變得更加連貫，也更易理解。

核心特性

egui 提供了一系列基礎和高級控制項，如標簽（label）、文本按鈕（text button）、超連結（hyperlink）、核取方塊（checkbox）、圓鈕（radio button）、滾軸（slider）、文字編輯器（text editing）等等，所有這些控制項都支持簡單的即時互動。此外，它也支持圖片展示、自訂繪制、多行文本編輯、文字選擇及圖形渲染等功能。

安裝與快速開始

要開始使用 egui ，首先需要將其添加到你的 Cargo.toml 檔中的依賴項。官方文件和範例都可以在 egui 的GitHub倉庫中找到。

為了執行Web範例，你可以使用官方為Web套用準備的樣版eframe_template。如果你想要整合 egui 到現有的引擎，可以檢視其豐富的整合選項。例如，它支持與 winit 、 glow 及 WebGPU 等庫和框架的整合。

易於整合

egui 的另一大特點是輕松整合。無論是將其嵌入到你喜愛的遊戲引擎，還是在你的平台中使用它， egui 都提供了一系列的官方和第三方整合。其中包含了對Amethyst、Bevy、SDL2、glfw等遊戲或者渲染框架的整合支持。

示範計畫與社群支持

想要更深入的了解 egui 的實際套用？可以參考其Web範例，線上執行 egui 的demo，體驗它的平滑互動和渲染效果。此外，你也可以參與到 egui 的GitHub討論中，或加入Discord伺服器與社群交流。

範例：建立一個簡單的互動式計數器

讓我們透過實踐感受 egui 的能力。以下是一個簡單的範例，我們將建立一個可以遞增數位的按鈕：

use eframe::egui::{self, CentralPanel, Context, Layout};
fnmain() {
let name = "World";
letmut age = 30;
eframe::run_native(
"My Egui Window",
Default::default(),
Box::new(|cc| Box::new(MyEguiApp::new(cc))),
);
}
structMyEguiApp {
name: String,
age: u8,
}
impl MyEguiApp {
fnnew(_cc: &eframe::CreationContext<'_>) -> Self {
Self {
name: "World".to_owned(),
age: 30,
}
}
fnui(&mutself, ctx: &Context) {
CentralPanel::default().show(ctx, |ui| {
ui.heading("My egui Application");
ui.horizontal(|ui| {
ui.label("Your name: ");
ui.text_edit_singleline(&mutself.name);
});
ui.add(egui::Slider::new(&mutself.age, 0..=120).text("age"));
if ui.button("Increment").clicked() {
self.age += 1;
}
ui.label(format!("Hello '{}', age {}", self.name, self.age));
});
}
}
impl eframe::App for MyEguiApp {
fnupdate(&mutself, ctx: &Context, frame: &mut eframe::Frame) {
self.ui(ctx);
}
}










在這個範例中，我們建立了一個視窗，其中包含一個文字域用於編輯名字，一個滾軸用於選擇年齡，以及一個按鈕用於年齡遞增。每次點選按鈕時，年齡的數位就會遞增。

結論

egui 以其即時模式、跨平台能力、簡單的整合方式和易用性，為Rust界帶來了一股新風。不論你是在尋找一個簡潔的GUI庫用於開發小型套用，還是希望建立一個在遊戲引擎中執行的復雜使用者介面， egui 都能為你的計畫提供強大的支持。它的設計理念、詳盡的文件、生動的範例以及活躍的社群，都證明了 egui 是Rust生態中一個值得關註的出色計畫。

文章精選

點 擊 關 註 並 掃 碼 添 加 進 交 流 群

領 取 「Rust 語 言 」 學 習 資 料

關註公眾號並回復 「egui」 立即獲取計畫地址。