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));
1
2
3
4
5
6
7
8
9
10

上面的代码演示了如何使用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};

fn main() {
    let name = "World";
    let mut age = 30;

    eframe::run_native(
        "My Egui Window",
        Default::default(),
        Box::new(|cc| Box::new(MyEguiApp::new(cc))),
    );
}

struct MyEguiApp {
    name: String,
    age: u8,
}

impl MyEguiApp {
    fn new(_cc: &eframe::CreationContext<'_>) -> Self {
        Self {
            name: "World".to_owned(),
            age: 30,
        }
    }
    
    fn ui(&mut self, ctx: &Context) {
        CentralPanel::default().show(ctx, |ui| {
            ui.heading("My egui Application");

            ui.horizontal(|ui| {
                ui.label("Your name: ");
                ui.text_edit_singleline(&mut self.name);
            });

            ui.add(egui::Slider::new(&mut self.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 {
    fn update(&mut self, ctx: &Context, frame: &mut eframe::Frame) {
        self.ui(ctx);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在这个示例中，我们创建了一个窗口，其中包含一个文本框用于编辑名字，一个滑块用于选择年龄，以及一个按钮用于年龄递增。每次点击按钮时，年龄的数字就会递增。

八、结束

egui以其即时模式、跨平台能力、简单的集成方式和易用性，为Rust界带来了一股新风。不论你是在寻找一个简洁的GUI库用于开发小型应用，还是希望建立一个在游戏引擎中运行的复杂用户界面，egui都能为你的项目提供强大的支持。它的设计理念、详尽的文档、生动的示例以及活跃的社区，都证明了egui是Rust生态中一个值得关注的出色项目。