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

使用表格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| {
                    // 一行数据，行高30
                    body.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);
                                });
                            }
                        }
                    });

                });
        });
    })
}