Rust语言之egui库窗口中组件与布局结合案例（5）

最新推荐文章于 2024-09-13 21:35:04 发布

helloziyi

最新推荐文章于 2024-09-13 21:35:04 发布

阅读量384

点赞数 6

分类专栏： Rust语言egui库文章标签： rust 开发语言后端

本文链接：https://blog.csdn.net/u013466301/article/details/137978824

版权

Rust语言egui库专栏收录该内容

8 篇文章 2 订阅

订阅专栏

案例（1）：输入框与按钮水平，标签垂直

输入代码:

//按钮、标签、输入框学习
use eframe::egui;

fn main() -> eframe::Result<()> {
    let options = eframe::NativeOptions::default();
    
    let mut edit_text:String = String::new();
    let mut texts:Vec<String> = Vec::new();

    eframe::run_simple_native("My egui App", options, move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //添加UI组件区
            //给输入框、按钮、label添加布局
            //水平布局
            ui.horizontal(|ui|{
                ui.text_edit_singleline(&mut edit_text);

                //使用if添加事件机制
                if ui.button("Add").clicked(){
                    texts.push(edit_text.clone());
                    edit_text.clear();
                }
            });
            //垂直布局
            ui.vertical(|ui|{
                for text in &texts{
                    ui.label(text);
                }
            });
        });
	})
}

显示：

案例（2）：输入框与按钮水平，标签后添加删除按钮事件

输入代码：

//按钮、标签、输入框学习
use eframe::egui;

fn main() -> eframe::Result<()> {
    let options = eframe::NativeOptions::default();
    
    let mut edit_text:String = String::new();
    let mut texts:Vec<String> = Vec::new();

    eframe::run_simple_native("My egui App", options, move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //添加UI组件区
            //给输入框、按钮、label添加布局
            //水平布局
            ui.horizontal(|ui|{
                
                //输入框的另外添加方式
                //使用这种方式可以调佣更多的方法和功能
                ui.add(egui::TextEdit::singleline(&mut edit_text).hint_text("please input text"));
                //ui.text_edit_singleline(&mut edit_text);

                //使用if添加事件机制
                if ui.button("Add").clicked(){
                    texts.push(edit_text.clone());
                    edit_text.clear();
                }
            });
            //添加删除按钮
            let mut todel=None;
            ui.vertical(|ui|{
                //在这里可以处理每个文本和其对应的索引
                for (dix,text) in texts.clone().iter().enumerate(){
                    //标签与按钮水平放置
                    ui.horizontal(|ui|{
                        ui.label(text);
                        if ui.button("del").clicked(){
                            //记录要删除的下标
                            todel = Some(dix);
                        }
                    });
                }
                if let Some(ttodel)=todel{
                    texts.remove(ttodel);
                }
            });
        });
	})
}

显示：

案例（3）：控件鼠标悬浮提示

输入代码：

//控件鼠标悬浮提示
use eframe::egui;

fn main() -> eframe::Result<()> {
    let options = eframe::NativeOptions::default();
    
    let mut edit_text:String = String::new();
    let mut texts:Vec<String> = Vec::new();

    eframe::run_simple_native("My egui App", options, move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //添加UI组件区
            //给输入框、按钮、label添加布局
            //水平布局
            ui.horizontal(|ui|{
                
                //egui中许多控件都可以使用tooltip提示方法
                ui.add(egui::TextEdit::singleline(&mut edit_text).hint_text("please input text")).on_hover_text("this is textedit");

                //使用if添加事件机制
                if ui.button("Add").on_hover_text("this is button").clicked(){
                    texts.push(edit_text.clone());
                    edit_text.clear();
                }
            });
            //添加删除按钮
            let mut todel=None;
            ui.vertical(|ui|{
                //在这里可以处理每个文本和其对应的索引
                for (dix,text) in texts.clone().iter().enumerate(){
                    //标签与按钮水平放置
                    ui.horizontal(|ui|{
                        ui.label(text).on_hover_text("this is label");
                        if ui.button("del").clicked(){
                            //记录要删除的下标
                            todel = Some(dix);
                        }
                    });
                }
                if let Some(ttodel)=todel{
                    texts.remove(ttodel);
                }
            });
        });
	})
}

显示：

案例（4）：控件浮窗

输入代码：

//控件浮窗悬浮
use eframe::egui;

fn main() -> eframe::Result<()> {
    let options = eframe::NativeOptions::default();
    
    let mut edit_text:String = String::new();
    let mut texts:Vec<String> = Vec::new();

    eframe::run_simple_native("My egui App", options, move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //这是控件提示
            ui.button("OK").on_hover_text("here");
            //控件浮窗，可以展示更多内容
            ui.button("OK").on_hover_ui(|ui|{
                for idx in 0..10 {
                    ui.label(idx.to_string());
                }
            });
        });
	})
}

显示：