30分钟上手egui：用Rust构建跨平台图形界面的实战指南-编程实验室

30分钟上手egui：用Rust构建跨平台图形界面的实战指南

【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/egui

egui是一款基于Rust语言的即时模式GUI库，它能帮助你快速开发出同时兼容Web和原生平台的图形界面。作为零基础开发者，你可以通过简单直观的API，在短时间内构建出响应式强、视觉效果一致的用户界面，无论是桌面应用还是网页程序都能完美适配。

从安装到运行的完整流程

环境准备

首先确保你的开发环境中已安装Rust工具链。打开终端，执行以下命令验证安装状态：

cargo --version

创建新项目

使用Cargo创建一个新的Rust项目，并添加egui相关依赖：

cargo new egui_demo && cd egui_demo

在Cargo.toml文件中添加以下内容：

[dependencies] egui = "0.23" eframe = "0.23"

编写第一个应用

创建src/main.rs文件，输入以下代码：

use eframe::egui; fn main() -> Result<(), eframe::Error> { let options = eframe::NativeOptions::default(); eframe::run_native( "egui入门示例", options, Box::new(|_cc| Box::new(MyFirstApp::default())), ) } #[derive(Default)] struct MyFirstApp; impl eframe::App for MyFirstApp { fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) { egui::CentralPanel::default().show(ctx, |ui| { ui.heading("欢迎使用egui"); ui.label("这是你的第一个egui应用！"); if ui.button("点击我").clicked() { ui.label("按钮被点击了！"); } }); } }

运行应用

在项目根目录执行以下命令启动应用：

cargo run

核心组件与布局系统

egui提供了丰富的UI组件和灵活的布局系统，让你能够轻松构建复杂界面。以下是常用组件的分类及应用场景：

组件类型	常用组件	适用场景
基础交互	Button, Label, Checkbox	菜单按钮、选项开关
数据输入	Slider, TextEdit, DragValue	设置面板、表单输入
容器组件	Window, Panel, ScrollArea	多窗口应用、可滚动内容
高级控件	ColorPicker, Plot, Table	颜色选择器、数据可视化

布局基础

egui采用弹性盒模型布局，通过以下方法控制元素排列：

// 垂直布局 ui.vertical(|ui| { ui.label("垂直排列的元素"); ui.button("按钮1"); ui.button("按钮2"); }); // 水平布局 ui.horizontal(|ui| { ui.label("水平排列的元素"); ui.button("左侧按钮"); ui.button("右侧按钮"); });

动手实践：构建温度转换器

让我们通过一个实际项目来巩固所学知识。我们将创建一个简单的温度转换器，实现摄氏度和华氏度之间的转换。

步骤1：定义应用状态

在MyFirstApp结构体中添加温度存储变量：

#[derive(Default)] struct MyFirstApp { celsius: f32, fahrenheit: f32, }

步骤2：实现转换逻辑

添加温度转换函数：

impl MyFirstApp { fn celsius_to_fahrenheit(&self) -> f32 { self.celsius * 9.0 / 5.0 + 32.0 } fn fahrenheit_to_celsius(&self) -> f32 { (self.fahrenheit - 32.0) * 5.0 / 9.0 } }

步骤3：创建用户界面

修改update方法，实现温度转换器界面：

fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) { egui::CentralPanel::default().show(ctx, |ui| { ui.heading("温度转换器"); ui.separator(); ui.vertical(|ui| { ui.label("摄氏度:"); ui.add(egui::DragValue::new(&mut self.celsius).suffix(" °C")); ui.label("华氏度:"); ui.add(egui::DragValue::new(&mut self.fahrenheit).suffix(" °F")); ui.separator(); if ui.button("摄氏度转华氏度").clicked() { self.fahrenheit = self.celsius_to_fahrenheit(); } if ui.button("华氏度转摄氏度").clicked() { self.celsius = self.fahrenheit_to_celsius(); } }); }); }

步骤4：运行与测试

执行cargo run命令启动应用，尝试输入温度值并进行转换。

进阶技巧与最佳实践

状态管理

对于复杂应用，建议使用egui::Memory或外部状态管理库来保存和共享UI状态。相关实现可参考egui/src/memory/mod.rs。

性能优化

使用ui.scope()创建独立的UI作用域
对静态内容使用ui.memory().caches()缓存
避免在update方法中执行耗时操作

样式定制

通过修改egui::Style来自定义界面外观：

let mut style = (*ctx.style()).clone(); style.visuals.widgets.noninteractive.bg_fill = egui::Color32::from_rgb(240, 240, 240); ctx.set_style(style);

常见问题与解决方案

如何添加自定义字体？

将字体文件放置在项目中，然后通过egui::FontDefinitions加载：

let mut fonts = egui::FontDefinitions::default(); fonts.font_data.insert("my_font".to_owned(), egui::FontData::from_static(include_bytes!("../fonts/MyFont.ttf"))); fonts.families.get_mut(&egui::FontFamily::Proportional) .unwrap().insert(0, "my_font".to_owned()); ctx.set_fonts(fonts);

如何处理窗口大小和位置？

使用eframe::Frame控制窗口属性：

// 设置窗口大小 _frame.set_window_size(egui::vec2(400.0, 300.0));

如何实现多语言支持？

可结合egui::TextStyle和国际化库，根据用户语言设置动态切换文本内容。

学习资源与下一步

官方示例

egui项目提供了丰富的示例代码，你可以通过以下命令克隆项目并探索：

git clone https://gitcode.com/GitHub_Trending/eg/egui cd egui/examples cargo run --example hello_world

30分钟上手egui：用Rust构建跨平台图形界面的实战指南