rust语言 (1.88) egui (0.32.1) 学习笔记（逐行注释）（九）数值拖拽控件、进度条、滑动条

一、数值拖拽控件DragValue

• 支持鼠标拖拽调整数值（水平或垂直拖动）
• 允许直接点击后键盘输入精确数值
• 可配合加减按钮进行步进调整
• 自动处理数值范围约束（通过range参数设置最小/最大值）
• 支持浮点数(f32/f64)和整数类型(i32/u32等)
• 可自定义显示格式（前缀/后缀文本）
• 游戏开发中的参数调节（如音量、透明度）
• 数据可视化工具的动态参数控制
• 需要快速调整数值的配置界面
• 通过step参数设置拖拽时的最小步长
• smart_aim选项可启用智能步进模式（拖动速度影响步长）
• 支持自定义方向（水平/垂直滑动）

fn main() -> eframe::Result<()> {// 配置原生窗口参数let options = eframe::NativeOptions::default();let mut num = 0;eframe::run_simple_native("控件学习", options, move |ctx, _frame| {egui::CentralPanel::default().show(ctx, |ui| {load_fonts(&ctx);  // 字体设置，函数定义：查看我博客：中文乱码相关章节ui.add(egui::DragValue::new(&mut num).range(0..=100)          // 数值范围// .clamp_existing_to_range(true).prefix("请输入：")       // 前置描述.suffix("个"),           // 后置描述);});})
}

1、.range(0..=100)：设置数值范围

• .clamp_existing_to_range(true)（无此行代码时默认为true）
  • 强制将已有数据限制在指定范围内
• 设为.clamp_existing_to_range(false)时
  • 在控件内只能设置范围内数据
  • 其他地方或其他控件修改数据可以获得更大数据范围

2、前置描述符.prefix("请输入：")

3、后置描述符.suffix("个")

4、步长.speed(2)

二、进度条ProgressBar

ui.add(egui::ProgressBar::new(pro).fill(egui::Color32::GOLD)   // 进度条颜色.show_percentage()           // 显示进度百分比.text("显示文本信息"),         // 显示文本信息，文本信息和百分比会相互覆盖
);

三、滑动条Slider

ui.add(egui::Slider::new(&mut pro, 0.0..=1.0).drag_value_speed(0.05)          // 滑动速度、步长.prefix("前置描述符").suffix("后置描述符").text("设置文本").vertical()                      // 滑动条垂直布局.text_color(egui::Color32::RED), // 文本颜色
);

四、数值拖拽控件、进度条、滑动条同时应用于同一变量的应用

fn main() -> eframe::Result<()> {// 配置原生窗口参数let options = eframe::NativeOptions::default();let mut pro = 0.5;      // 数值初始值eframe::run_simple_native("控件学习", options, move |ctx, _frame| {egui::CentralPanel::default().show(ctx, |ui| {load_fonts(&ctx);     // 字体设置，函数定义：查看我博客：中文乱码相关章节// 数值拖拽控件ui.add(egui::DragValue::new(&mut pro).speed(0.01).         // 拖拽时步长range(0..=1)         // 数值范围);       // 进度条ui.add(egui::ProgressBar::new(pro).fill(egui::Color32::GOLD)  // 进度条颜色.show_percentage()          // 显示进度百分比.text("显示文本信息"),       // 显示文本信息，文本信息和百分比会相互覆盖);// 滑动条ui.add(egui::Slider::new(&mut pro, 0.0..=1.0) // 滑动条，数值范围.drag_value_speed(0.05)            // 滑动步长.prefix("前置描述符").suffix("后置描述符").text("设置文本").vertical()                       // 滑动条垂直布局.text_color(egui::Color32::RED),  // 文本颜色);});})
}