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

rust语言 (1.88) egui (0.32.1) 学习笔记（逐行注释）（十八）使用表格

news 2025/8/25 6:26:44

使用表格`egui_extras::TableBuilder`

// Cargo.toml
[dependencies]
eframe = "0.32.1"
egui = "0.32.1"
egui_extras = "0.32.1"

egui_extras::Column::auto() 列宽根据内容自动计算
.resizable(true) 允许用户手动拖动调整列宽

fn main() -> eframe::Result<()> {// 配置原生窗口参数let options = eframe::NativeOptions::default();eframe::run_simple_native("使用表格", options, move |ctx, _frame| {egui::CentralPanel::default().show(ctx, |ui| {load_fonts(&ctx);// 创建一个表格egui_extras::TableBuilder::new(ui)// 设置列属性// 创建一个自动调整宽度的列.column(egui_extras::Column::auto().resizable(true))// 创建一个占据剩余可用宽度的列// 该列自动填充容器中剩余未被占用的列.column(egui_extras::Column::remainder())// 设置表头，行高20.header(20.0, |mut header| {header.col(|ui| {// 标题，加粗，字号加大等ui.heading("姓名");});header.col(|ui| {ui.heading("年龄");});})// 设置表体.body(|mut body| {// 一行数据，行高30body.row(30.0, |mut row| {// 一个单元格的数据row.col(|ui| {ui.label("小李");});row.col(|ui| {ui.button("25");});});// 一行数据body.row(30.0, |mut row| {row.col(|ui| {ui.label("小赵");});row.col(|ui| {ui.button("16");});});});});})
}

批量设置数据方式一

fn main() -> eframe::Result<()> {// 配置原生窗口参数let options = eframe::NativeOptions::default();// 生成20行10列数据let bbody: Vec<Vec<String>> = (0..20).map(|i| (0..10).map(|e| format!("{}--{}", i, e)).collect()).collect();eframe::run_simple_native("使用表格", options, move |ctx, _frame| {egui::CentralPanel::default().show(ctx, |ui| {load_fonts(&ctx);egui_extras::TableBuilder::new(ui)// 设置10列，自动调整宽度，可手动调整.columns(egui_extras::Column::auto().resizable(true), 10)// 设置表头.header(20.0, |mut header| {for idx in 0..10 {header.col(|ui| {ui.heading(format!("{}", idx));});}})// 设置表体.body(|mut body| {for idx in &bbody {body.row(30.0, |mut row| {for idy in idx {row.col(|ui| {ui.label(idy);});}});}});});})
}

批量设置数据方式二`rows`

fn main() -> eframe::Result<()> {// 配置原生窗口参数let options = eframe::NativeOptions::default();let bbody: Vec<Vec<String>> = (0..20).map(|i| (0..10).map(|e| format!("{}--{}", i, e)).collect()).collect();eframe::run_simple_native("使用表格", options, move |ctx, _frame| {egui::CentralPanel::default().show(ctx, |ui| {load_fonts(&ctx);egui_extras::TableBuilder::new(ui)// 设置10列，自动调整宽度，可手动调整.columns(egui_extras::Column::auto().resizable(true), 10)// 设置表头.header(20.0, |mut header| {for idx in 0..10 {header.col(|ui| {ui.heading(format!("{}", idx));});}})// 设置表体.body(|mut body| {body.rows(17., bbody.len(), |mut row| { // 所有行数据let r_idx = row.index();            // 当前行的索引if let Some(d) = bbody.get(r_idx) { // 行内有数据for idx in d {                  // 遍历一行数据row.col(|ui| {ui.label(idx);});}}});});});})
}