Rust选择面板插件库re_selection_panel的使用：高效UI组件与交互式选择功能实现

re_selection_panel是rerun系列crate之一，提供了选择面板的UI实现。

安装

在项目目录中运行以下Cargo命令：

cargo add re_selection_panel

或者在Cargo.toml中添加：

re_selection_panel = "0.24.1"

许可证

该库采用MIT或Apache-2.0双许可证

完整示例代码

以下是一个使用re_selection_panel创建交互式选择面板的完整示例：

use eframe::egui;
use re_selection_panel::SelectionPanel;

fn main() -> eframe::Result<()> {
    // 创建选择项列表
    let items = vec![
        "Item 1".to_string(),
        "Item 2".to_string(),
        "Item 3".to_string(),
    ];
    
    let mut selected_item = None;

    eframe::run_simple_native(
        "Selection Panel Demo",
        move |ctx, _frame| {
            egui::CentralPanel::default().show(ctx, |ui| {
                // 创建选择面板
                SelectionPanel::new("example_panel")
                    .show(
                        ui,
                        &items,
                        &mut selected_item,
                        |item| item.clone(),  // 如何显示每个项目
                        |ui, item| {         // 如何渲染每个项目
                            ui.label(item);
                        }
                    );
                    
                // 显示当前选择
                if let Some(selected) = &selected_item {
                    ui.label(format!("Selected: {}", selected));
                }
            });
        },
    )
}

功能说明

1. 创建了一个简单的选择面板，包含3个项目
2. 使用SelectionPanel::new()初始化面板
3. show()方法用于渲染面板并处理交互
4. 可以跟踪当前选中的项目

高级用法

您还可以自定义选择面板的行为和外观：

SelectionPanel::new("advanced_panel")
    .with_height(300.0)  // 设置固定高度
    .with_default_selected(1)  // 默认选中第二个项目
    .show(
        ui,
        &items,
        &mut selected_item,
        |item| format!(">>> {} <<<", item),  // 自定义显示格式
        |ui, item| {
            ui.horizontal(|ui| {
                ui.label("•");
                ui.label(item);
            });
        }
    );

这个库非常适合需要实现交互式选择功能的Rust GUI应用，特别是在数据可视化或需要用户从多个选项中选择的场景中。

进阶完整示例

以下是一个更完整的示例，展示了如何在实际应用中使用re_selection_panel：

use eframe::egui;
use re_selection_panel::SelectionPanel;

struct MyApp {
    items: Vec<String>,
    selected_item: Option<String>,
    selected_index: Option<usize>,
}

impl MyApp {
    fn new() -> Self {
        // 初始化数据
        let items = (1..=10)
            .map(|i| format!("选项 {}", i))
            .collect::<Vec<_>>();
            
        Self {
            items,
            selected_item: None,
            selected_index: None,
        }
    }
}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.heading("高级选择面板演示");
            
            // 创建两列布局
            egui::SidePanel::left("left_panel").show(ctx, |ui| {
                // 使用选择面板
                SelectionPanel::new("my_selection_panel")
                    .with_height(400.0)
                    .with_default_selected(0)
                    .show(
                        ui,
                        &self.items,
                        &mut self.selected_index,
                        |item| item.clone(),
                        |ui, item| {
                            ui.horizontal(|ui| {
                                ui.label("✓");
                                ui.label(item);
                            });
                        }
                    );
            });
            
            // 右侧面板显示详细信息
            egui::SidePanel::right("right_panel").show(ctx, |ui| {
                if let Some(idx) = self.selected_index {
                    ui.label(format!("当前选择: {}", self.items[idx]));
                    ui.separator();
                    ui.label("详细信息:");
                    ui.label(format!("这是第 {} 个选项的详细信息区域", idx + 1));
                } else {
                    ui.label("请从左侧选择一个项目");
                }
            });
        });
    }
}

fn main() -> eframe::Result<()> {
    let options = eframe::NativeOptions::default();
    eframe::run_native(
        "高级选择面板演示",
        options,
        Box::new(|_cc| Box::new(MyApp::new())),
    )
}

这个进阶示例展示了：

1. 创建一个包含10个项目的选择面板
2. 使用左右分栏布局
3. 跟踪选择索引而不仅仅是项目内容
4. 在右侧面板显示选中项的详细信息
5. 自定义项目渲染方式（带复选框样式）
6. 设置默认选中第一个项目
7. 固定面板高度为400像素