re_component_ui - Rust UI组件库使用指南

概述

re_component_ui是一个用于高效构建模块化用户界面的Rust插件库，提供了可复用的UI组件和布局工具，特别适合需要快速开发用户界面的Rust项目。

主要特性

• 模块化组件设计
• 响应式布局支持
• 主题定制能力
• 高性能渲染
• 与其他Rust生态良好集成

安装方法

在Cargo.toml中添加依赖：

[dependencies]
re_component_ui = "0.3.0"

基本使用方法

1. 创建简单窗口

use re_component_ui::prelude::*;

fn main() {
    let app = Application::new()
        .with_title("My App")  // 设置应用标题
        .with_size(800, 600);  // 设置窗口大小
    
    app.run(|ctx| {
        Window::new(ctx)  // 创建新窗口
            .with_title("Main Window")  // 设置窗口标题
            .show(|ui| {  // 显示窗口内容
                ui.label("Hello, re_component_ui!");  // 添加标签
            });
    });
}

2. 使用内置组件

use re_component_ui::prelude::*;

fn main() {
    let app = Application::new();  // 创建应用实例
    
    app.run(|ctx| {
        Window::new(ctx)  // 创建窗口
            .show(|ui| {  // 显示窗口内容
                ui.vertical(|ui| {  // 垂直布局
                    ui.button("Click Me")  // 添加按钮
                        .on_click(|| println!("Button clicked!"));  // 设置点击事件
                    
                    ui.checkbox("Enable Feature", &mut true);  // 添加复选框
                    
                    ui.slider("Volume", 0.0..=100.0, &mut 50.0);  // 添加滑块
                });
            });
    });
}

高级功能

自定义组件

use re_component_ui::prelude::*;

// 定义自定义组件结构体
struct MyCustomComponent {
    value: i32,  // 组件状态
}

// 为自定义组件实现Component trait
impl Component for MyCustomComponent {
    fn render(&mut self, ui: &mut Ui) {
        ui.horizontal(|ui| {  // 水平布局
            ui.label("Custom Value:");  // 标签
            ui.button("-").on_click(|| self.value -= 1);  // 减号按钮
            ui.label(&self.value.to_string());  // 显示当前值
            ui.button("+").on_click(|| self.value += 1);  // 加号按钮
        });
    }
}

fn main() {
    let app = Application::new();  // 创建应用
    
    app.run(|ctx| {
        Window::new(ctx)  // 创建窗口
            .show(|ui| {  // 显示窗口内容
                MyCustomComponent { value: 0 }.render(ui);  // 渲染自定义组件
            });
    });
}

主题定制

use re_component_ui::prelude::*;

fn main() {
    // 创建应用并设置暗色主题，修改主色调
    let app = Application::new()
        .with_theme(Theme::dark().with_color("primary", Color::rgb(0.2, 0.6, 0.8)));
    
    app.run(|ctx| {
        Window::new(ctx)  // 创建窗口
            .show(|ui| {  // 显示窗口内容
                ui.button("Themed Button");  // 使用主题样式的按钮
            });
    });
}

布局系统

use re_component_ui::prelude::*;

fn main() {
    let app = Application::new();  // 创建应用
    
    app.run(|ctx| {
        Window::new(ctx)  // 创建窗口
            .show(|ui| {  // 显示窗口内容
                ui.vertical(|ui| {  // 垂直布局
                    ui.horizontal(|ui| {  // 水平布局
                        ui.label("Left");  // 左侧标签
                        ui.label("Right");  // 右侧标签
                    });
                    
                    ui.grid(2, |ui| {  // 2列网格布局
                        ui.label("Cell 1");  // 第1单元格
                        ui.label("Cell 2");  // 第2单元格
                        ui.label("Cell 3");  // 第3单元格
                        ui.label("Cell 4");  // 第4单元格
                    });
                });
            });
    });
}

完整示例demo

下面是一个结合了多种功能的完整示例：

use re_component_ui::prelude::*;

// 自定义计数器组件
struct Counter {
    value: i32,
}

impl Component for Counter {
    fn render(&mut self, ui: &mut Ui) {
        ui.horizontal(|ui| {
            ui.label("Counter:");
            ui.button("-").on_click(|| self.value -= 1);
            ui.label(&self.value.to_string());
            ui.button("+").on_click(|| self.value += 1);
        });
    }
}

// 主应用
fn main() {
    // 初始化应用并设置主题
    let app = Application::new()
        .with_title("Demo App")
        .with_size(1024, 768)
        .with_theme(Theme::dark().with_color("primary", Color::rgb(0.1, 0.5, 0.9)));
    
    // 运行应用
    app.run(|ctx| {
        Window::new(ctx)
            .with_title("Main Window")
            .show(|ui| {
                ui.vertical(|ui| {
                    // 标题
                    ui.heading("re_component_ui Demo");
                    
                    // 自定义组件
                    Counter { value: 0 }.render(ui);
                    
                    // 分隔线
                    ui.separator();
                    
                    // 表单区域
                    ui.group(|ui| {
                        ui.label("Settings:");
                        let mut checkbox = true;
                        ui.checkbox("Enable Feature", &mut checkbox);
                        let mut slider = 50.0;
                        ui.slider("Volume", 0.0..=100.0, &mut slider);
                    });
                    
                    // 网格布局
                    ui.grid(2, |ui| {
                        ui.label("Name:");
                        ui.text_input("", &mut String::new());
                        ui.label("Email:");
                        ui.text_input("", &mut String::new());
                    });
                    
                    // 操作按钮
                    ui.horizontal(|ui| {
                        ui.button("Save");
                        ui.button("Cancel");
                    });
                });
            });
    });
}

最佳实践

1. 将复杂UI分解为小组件
2. 使用模块系统组织代码
3. 利用布局系统保持UI一致性
4. 为常用组件创建自定义封装
5. 合理使用主题系统保持UI风格统一

性能优化建议

• 使用lazy组件避免不必要的重绘
• 对大数据集使用虚拟滚动
• 合理使用memoize缓存计算结果
• 避免在渲染函数中进行繁重计算

re_component_ui通过其模块化设计和高效实现，使得在Rust中构建用户界面变得更加简单和高效。