egui教程三——切换主题

前言

egui内置了亮色和暗色两种主题,这里仅仅实现主题的切换,不进行自定义主题。

代码

代码还在前面两篇文章的基础上进行。仅仅是为PicPicApp增加了主题切换的方法和在update中的调用,但是这里附上完整的代码,完整代码依然保留自定义字体的代码。

rust 复制代码
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
#![allow(rustdoc::missing_crate_level_docs)] // it's an example

use eframe::egui;

fn main() -> eframe::Result {
    let options = eframe::NativeOptions {
        viewport: egui::ViewportBuilder::default().with_inner_size([640.0, 480.0]),
        ..Default::default()
    };
    eframe::run_native(
        "picpic",
        options,
        Box::new(|cc| Ok(Box::new(PicPicApp::new(cc)))),
    )
}

struct PicPicApp {
    name: String,
    age: u32,
}

impl PicPicApp {
    fn new(cc: &eframe::CreationContext<'_>) -> Self {
        setup_custom_fonts(&cc.egui_ctx);
        Self {
            name: "Aspirin".to_owned(),
            age: 18,
        }
    }

    // 切换主题
    fn theme_switcher(&mut self, ui: &mut egui::Ui, ctx: &egui::Context) {
        ui.horizontal(|ui| {
            if ui.button("Dark").clicked() {
                ctx.set_visuals(egui::Visuals::dark());
            }
            if ui.button("Light").clicked() {
                ctx.set_visuals(egui::Visuals::light());
            }
        });
    }
}

impl eframe::App for PicPicApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            // 在更新方法中调用切换主题的方法
            self.theme_switcher(ui, ctx);

            ui.horizontal(|ui| {
                let name_label = ui.label("Your name: ");
                ui.text_edit_singleline(&mut self.name)
                    .labelled_by(name_label.id);
            });
            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));
        });
    }
}

fn setup_custom_fonts(ctx: &egui::Context) {
    // Start with the default fonts (we will be adding to them rather than replacing them).
    let mut fonts = egui::FontDefinitions::default();

    // Install my own font (maybe supporting non-latin characters).
    // .ttf and .otf files supported.
    fonts.font_data.insert(
        "my_font".to_owned(),
        egui::FontData::from_static(include_bytes!("../fonts/FangZhengFangSongJianTi.ttf")),
    );

    // Put my font first (highest priority) for proportional text:
    fonts
        .families
        .entry(egui::FontFamily::Proportional)
        .or_default()
        .insert(0, "my_font".to_owned());

    // Put my font as last fallback for monospace:
    fonts
        .families
        .entry(egui::FontFamily::Monospace)
        .or_default()
        .push("my_font".to_owned());

    // Tell egui to use these fonts:
    ctx.set_fonts(fonts);
}

总结

切换主题目前还存在一些问题:

  • 切换主题不能持久化,即重新打开程序以后,上次的主题会丢失。如果想要保存状态,可以在点击切换主题数,打包好的exe目录下建一个隐藏文件,比如.env然后在其中记录主题,下次启动程序时读取状态。不过这种方式仍然有瑕疵,比如可执行文件被移动,状态仍然会丢失。
  • 目前只能手动切换亮色主题或者暗色主题,无法跟随系统变化。后续如果有解决方案会同步更新该文章。也欢迎路过的朋友指导。
相关推荐
得物技术20 分钟前
基于IM场景下的Wasm初探:提升Web应用性能|得物技术
rust·web·wasm
老猿讲编程13 小时前
用示例来看C2Rust工具的使用和功能介绍
rust
金庆13 小时前
How to set_default() using config-rs crate
rust·config·set_default·valuekind
许野平16 小时前
Rust: 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
‍。。。1 天前
使用Rust实现http/https正向代理
http·https·rust
Source.Liu1 天前
【用Rust写CAD】第二章 第四节 函数
开发语言·rust
monkey_meng1 天前
【Rust中的迭代器】
开发语言·后端·rust
余衫马1 天前
Rust-Trait 特征编程
开发语言·后端·rust
monkey_meng1 天前
【Rust中多线程同步机制】
开发语言·redis·后端·rust
hikktn1 天前
如何在 Rust 中实现内存安全:与 C/C++ 的对比分析
c语言·安全·rust