[Rust GUI]eframe(egui框架)代码示例

这篇具有很好参考价值的文章主要介绍了[Rust GUI]eframe(egui框架)代码示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

-2、eframe代替品

你可以使用egui的其他绑定,例如:egui-miniquad,bevy_egui,egui_sdl2_gl 等。

-1、注意

egui库相当于核心库,需要借助eframe框架写界面。
eframe使用egui_glow渲染,而egui_glow需要opengl2.0+。

0、准备

1、安装Visual Studio C++ Build tools

1、访问微软官网下载生成工具
2、勾选这个
[Rust GUI]eframe(egui框架)代码示例,rust,开发语言,后端,gui,egui,eframe
3、对比勾选细节
[Rust GUI]eframe(egui框架)代码示例,rust,开发语言,后端,gui,egui,eframe
4、点击安装
5、安装完成
[Rust GUI]eframe(egui框架)代码示例,rust,开发语言,后端,gui,egui,eframe
6、关闭Visual Studio Installer
7、重启电脑

2、安装Rust

访问Rust官网下载 RUSTUP-INIT.EXE(64位)
在 PowerShell 中运行$ENV:RUSTUP_DIST_SERVER='https://mirrors.ustc.edu.cn/rust-static';$ENV:RUSTUP_UPDATE_ROOT='https://mirrors.ustc.edu.cn/rust-static/rustup';.\rustup-init.exe,输入1并回车
[Rust GUI]eframe(egui框架)代码示例,rust,开发语言,后端,gui,egui,eframe

3、设置cargo镜像

运行powershell -command ii (where.exe cargo).substring(0,(where.exe cargo).Length-'\bin\cargo.exe'.Length)
.cargo目录下新建文件,名为config,无后缀名,保存为以下内容

[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"

4、安装VSCode

访问这个👉链接:如何下载安装VSCode
安装插件:简体中文、rust-analyzer(中英双语版)

5、下载字体文件

访问kose-font仓库下载小赖字体,使用其中的XiaolaiMonoSC-Regular.ttf文件,提取出来备用

0、编程

1、使用cargo创建项目

运行cargo new eframe-hello;cd eframe-hello

2、添加板条箱eframe

运行cargo add eframe(此时版本为v0.22.0)

3、使用VSCode打开项目

运行code .
选中.\eframe-hello\src\main.rs文件,将激活插件,等待插件加载完毕。

4、运行

运行cargo run,等待编译完成,正常输出Hello, world!
[Rust GUI]eframe(egui框架)代码示例,rust,开发语言,后端,gui,egui,eframe

5、添加字体文件

打开.\eframe-hello\src路径
XiaolaiMonoSC-Regular.ttf放入该路径

6、编辑.\eframe-hello\src\main.rs

6.1 添加属性指令

// 在Windows平台运行时不会弹出控制台框
#![windows_subsystem = "windows"]

6.2 导入

use eframe::egui;
use eframe::epaint::Color32;
use egui::FontFamily::Proportional;
use egui::FontId;
use egui::TextStyle::*;

6.3 加载字体


// 参考:https://github.com/xuxiaowei-com-cn/cargo_egui/blob/main/src/main.rs
fn load_fonts(ctx: &egui::Context) {
    // 参考(废弃):https://github.com/emilk/egui/blob/0.17.0/eframe/examples/custom_font.rs
    // 参考(推荐):https://github.com/emilk/egui/blob/0.18.1/examples/custom_font/src/main.rs

    // 从默认字体开始(我们将添加而不是替换它们)。
    let mut fonts = egui::FontDefinitions::default();

    // 安装我自己的字体(也许支持非拉丁字符)。
    // 支持 .ttf 和 .otf 文件。
    // XiaolaiMonoSC-Regular.ttf 来自 https://gitee.com/lxgw2020/kose-font
    fonts.font_data.insert(
        "my_font".to_owned(),
        egui::FontData::from_static(include_bytes!("XiaolaiMonoSC-Regular.ttf")),
    );

    // 将我的字体放在首位(最高优先级)用于比例文本:
    fonts
        .families
        .entry(egui::FontFamily::Proportional)
        .or_default()
        .insert(0, "my_font".to_owned());

    // 将我的字体作为等宽字体的最后后备:
    fonts
        .families
        .entry(egui::FontFamily::Monospace)
        .or_default()
        .push("my_font".to_owned());

    // 告诉 egui 使用这些字体
    // 新字体将在下一帧开始时激活。
    // https://docs.rs/egui/latest/egui/struct.Context.html#method.set_fonts
    ctx.set_fonts(fonts);
}

6.4 实例

// 人
struct People {
    name: String,
    age: u32,
}

6.5 默认值

// 默认值
impl Default for People {
    fn default() -> Self {
        // 创建一个 People 结构体的默认实例
        Self {
            name: "刘北辰".to_owned(),
            age: 20,
        }
    }
}

6.6 实现

impl People {
    // 创建一个新的 People 实例
    fn new(cc: &eframe::CreationContext<'_>) -> Self {
        load_fonts(&cc.egui_ctx); // 加载字体
        Self::default() // 使用默认值创建 People 实例
    }
}

6.7 Trait

impl eframe::App for People {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        let mut style = (*ctx.style()).clone();
        // 重新定义文本样式
        style.text_styles = [
            (Heading, FontId::new(60.0, Proportional)), // 标题字体
            (Name("Heading2".into()), FontId::new(50.0, Proportional)), // 标题2字体
            (Name("Context".into()), FontId::new(50.0, Proportional)), // 上下文字体
            (Body, FontId::new(36.0, Proportional)),    // 正文字体
            (Monospace, FontId::new(28.0, Proportional)), // 等宽字体
            (Button, FontId::new(28.0, Proportional)),  // 按钮字体
            (Small, FontId::new(20.0, Proportional)),   // 小号字体
        ]
        .into();
        // 使用上述更改,修改全局样式
        ctx.set_style(style);

        let frame = egui::containers::Frame {
            // 外边距
            outer_margin: egui::vec2(5.0, 5.0).into(),
            // 圆角
            rounding: egui::Rounding::same(4.0),
            // 填充颜色
            fill: Color32::DARK_GRAY,
            ..Default::default()
        };
        egui::CentralPanel::default().frame(frame).show(ctx, |ui| {
            // 默认文字颜色
            ui.visuals_mut().override_text_color = Some(egui::Color32::from_rgb(255, 128, 0));
            // 默认滑块宽度
            ui.style_mut().spacing.slider_width = 285.0;
            // 显示大文本
            ui.heading("修改年龄");
            // 使用水平布局启动 ui
            ui.horizontal(|ui| {
                // 显示姓名标签文本
                let name_label = ui.label("姓名: ");
                // 单行文本编辑框,由姓名标签标识
                ui.text_edit_singleline(&mut self.name)
                    .labelled_by(name_label.id);
            });
            // 滑块
            ui.add(egui::Slider::new(&mut self.age, 20..=79).text("岁"));
            // 按钮
            if ui.button("点击增加年龄").clicked() {
                if self.age < 79 {
                    self.age += 1;
                }
            }
            // 显示文本
            ui.label("修改结果:");
            // 显示姓名和年龄
            ui.label(format!("姓名:{}, 年龄:{}", self.name, self.age));
            // 显示作者信息 https://blog.csdn.net/qq_39124701/article/details/132836150
            ui.label("作者: CSDN - 三巧");
        });
    }
}

6.8 main

fn main() {
    // 设置原生应用程序选项
    let options = eframe::NativeOptions {
        initial_window_size: Some(egui::vec2(414.0, 314.0)), // 设置初始窗口大小
        ..Default::default()
    };
    let _ = eframe::run_native(
        "egui修改年龄 - CSDN三巧", // 设置应用程序窗口标题
        options,
        Box::new(|cc| Box::new(People::new(cc))), // 创建并返回实现 eframe::App 特征的 People 对象
    );
}

7、运行

运行cargo run,等待编译完成,显示窗口
[Rust GUI]eframe(egui框架)代码示例,rust,开发语言,后端,gui,egui,eframe
输入框输入姓名,姓名同步修改
滑动滑块,年龄变动
点击滑块右侧输入具体数值,年龄同步修改
点击增加年龄按钮,年龄增加1岁,数值最高79

8、构建

运行命令:cargo build
生成位置:.\eframe-hello\target\debug\eframe-hello.exe

9、其他

egui在Github的仓库
egui-doc-cn
https://docs.rs/eframe/latest/eframe/
https://crates.io/crates/eframe



[Rust GUI]eframe(egui框架)代码示例,rust,开发语言,后端,gui,egui,eframe文章来源地址https://www.toymoban.com/news/detail-712481.html

到了这里,关于[Rust GUI]eframe(egui框架)代码示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • RUST egui部署到github

    接上文,当用trunk serve编译部署后,工程目录下就会有一个dist目录,这个目录就是用来部署用的。 :) 创建一个github repo,这个repo的名称有固定格式要求,就是你自己的用户名+github.io,比如我的用户名是crazyskady,那么这个repo就叫crazyskady.github.io 部署就简单了,先把自己的

    2024年03月21日
    浏览(38)
  • 【rust/egui】(一)从编译运行template开始

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 rust windows安装参考:这里 本文默认读者已安装相关环境(git、vscode等) egui github demo online 关于 immediate mode wikipedia microsoft learn 先 clone 下这个项目(也可

    2024年02月13日
    浏览(27)
  • Rust图形界面:从零开始创建eGUi项目

    egui系列:初步 首先,用cargo创建一个新项目,并添加eframe 尽管默认创建的项目只实现了输出Hello world功能,但添加了eframe库,所以下载需要一点时间。 创建成功后,直接把下面的代码写入main.rs文件中,这些代码来自egui的hello_world示例。 然后运行cargo run,结果如下所示 在e

    2024年02月01日
    浏览(47)
  • 【rust/egui】(十)使用painter绘制一些图形—connections

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 上一篇:这里 在上一节我们使用 painter 绘制了一个可以拖拽的小方块,现在我们来用 painter 将两个小方块连接起来,类似这种: 首先我们需要在我们

    2024年02月09日
    浏览(29)
  • 【rust/egui】(七)看看template的app.rs:Slider

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 上一篇:这里 滑块,如下图 定义: 我们可以通过 ui.add() 的方式进行添加: 其 new 方法的定义为: 参数 value 为可变借用类型,且使用 Numeric 特性进

    2024年02月10日
    浏览(30)
  • 【rust/egui】(六)看看template的app.rs:TextEdit

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 上一篇:这里 文本编辑框 其定义为: 用起来可能是个简单的东西,但是实际上很是复杂,首先我们来看看它的外观以及用法 在 app.rs 中,我们是通

    2024年02月11日
    浏览(45)
  • 【rust/egui】(八)使用panels给你的应用划分功能区块

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 上一篇:这里 panel 是ui上的一块区域,比如我们打开CSDN的markdown编辑器,它大致上可以划分成四(五)块 (当然实际实现上这四块区域可能不是并列的

    2024年02月09日
    浏览(29)
  • 【rust/egui】(五)看看template的app.rs:SidePanel、CentralPanel以及heading

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 上一篇:这里 侧边栏,如下图 其定义为: 通过 right() 或 left() 方法生成: 方法实现与 TopBottomPanel::top() 类似: 生成时的默认属性值为: 我们可以将

    2024年02月11日
    浏览(31)
  • 【rust/egui】(三)看看template的app.rs:序列化、持久化存储

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 上一篇:这里 app.rs 中首先定义了我们的 TemplateApp 结构体 在定义 TemplateApp 时,我们让其继承了 serde::Deserialize, serde::Serialize 。 serde 是rust中用于序列

    2024年02月11日
    浏览(29)
  • 【rust/egui】(四)看看template的app.rs:update以及组件TopBottomPanel&Button

    rust新手,egui没啥找到啥教程,这里自己记录下学习过程 环境:windows11 22H2 rust版本:rustc 1.71.1 egui版本:0.22.0 eframe版本:0.22.0 上一篇:这里 update 实际上还是 eframe::App 的特征,并非 egui 的内容。其官方注解如下: update 函数会在需要重绘ui(或者其他)的时候被调用,一秒可能

    2024年02月11日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包