当前位置：首页 > news >正文

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

news 2025/6/16 2:29:06

案例（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]);}});});})
}

显示：