Rust语言之egui库窗口中布局及滚动控制条案例（4）

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

本文介绍了如何使用Egui库在应用程序中实现水平和垂直布局，以及如何通过ScrollArea控制滚动条，包括设置滚动条位置和响应宽度变化。展示了在不同场景下的控件添加和事件处理。

摘要由CSDN通过智能技术生成

案例（1）：水平、垂直布局显示

输入代码：

use std::process::id;

//水平布局、垂直布局
use eframe::egui;

fn main() -> eframe::Result<()> {
    let options = eframe::NativeOptions::default();
    eframe::run_simple_native("My egui App", options, move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //添加UI组件区
            //水平布局
            ui.horizontal(|ui|{
                for idx in 0..10{
                    ui.label(idx.to_string());
                }
            });
            //垂直布局
            ui.vertical(|ui|{
                for idx in 0..10{
                    ui.label(idx.to_string());
                }
            });
            
            //垂直布局里的水平布局
            ui.vertical(|ui|{
                for idx in 0..10{
                    ui.horizontal(|ui|{
                        ui.label("1111111");
                        ui.label("2222222");
                        ui.label("3333333");
                        ui.label("4444444");
                    });
                }
            });
        });
	})
}

显示：

案例（2）：垂直布局滚动条控制

输入代码（1）：

//垂直显示
use eframe::egui;

fn main() -> eframe::Result<()> {
    let keys:Vec<String> = (0..100).map(|i|i.to_string()).collect();
    let options = eframe::NativeOptions::default();

    eframe::run_simple_native("My egui App",options,move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //控件添加区
            egui::ScrollArea::vertical().show(ui, |ui|{
                for idx in &keys{
                    ui.label(idx);
                }
            });
        });
	})
}

输入代码（2）调节宽度

//简单的事件监听事件
//垂直滚动
use eframe::egui;

fn main() -> eframe::Result<()> {
    let keys:Vec<String> = (0..100000).map(|i|i.to_string()).collect();
    let options = eframe::NativeOptions::default();

    eframe::run_simple_native("My egui App",options,move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //控件添加区
            egui::ScrollArea::vertical().show_rows(ui, 17., keys.len(), |ui,rng|{
                for idx in rng{
                    ui.label(&keys[idx]);
                }
            });
        });
	})
}

显示：

案例（3）：垂直布局滚动条控制在最右侧

输入代码：

//垂直滚动——使滚动条最右
use eframe::egui;

fn main() -> eframe::Result<()> {
    let keys:Vec<String> = (0..100000).map(|i|i.to_string()).collect();
    let options = eframe::NativeOptions::default();

    eframe::run_simple_native("My egui App",options,move |ctx, _frame| {
        egui::CentralPanel::default().show(ctx, |ui| {
            //控件添加区
            egui::ScrollArea::vertical().show_rows(ui, 17., keys.len(), |ui,rng|{
                ui.set_width(ui.available_width());
                for idx in rng{
                    ui.label(&keys[idx]);
                }
            });
        });
	})
}

显示：