re_ui：轻量级、模块化与跨平台的Rust UI组件库

概述

re_ui是一个专为Rust语言设计的现代化UI组件库，专注于提供轻量级、模块化和跨平台的用户界面开发解决方案。该库采用简洁的设计理念，支持快速构建高性能的桌面应用程序界面。

核心特性

• 轻量级架构：最小化依赖，减少应用体积
• 模块化设计：可按需引入组件，灵活组合
• 跨平台支持：兼容Windows、macOS和Linux
• 响应式布局：自适应不同屏幕尺寸
• 主题定制：支持明暗主题切换

安装方法

在Cargo.toml中添加依赖：

[dependencies]
re_ui = "0.5.0"

基础使用示例

use re_ui::prelude::*;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    // 初始化应用
    let app = Application::new()?;
    
    // 创建主窗口
    let window = Window::builder()
        .title("re_ui示例")
        .size(800, 600)
        .build();
    
    // 创建垂直布局容器
    let layout = VBox::new()
        .spacing(10)
        .padding(20);
    
    // 添加按钮组件
    let button = Button::new("点击我")
        .on_click(|| {
            println!("按钮被点击!");
        });
    
    layout.add_child(button);
    
    // 添加文本输入框
    let text_input = TextInput::new()
        .placeholder("请输入文本...");
    
    layout.add_child(text_input);
    
    // 设置窗口内容
    window.set_content(layout);
    
    // 运行应用
    app.run()?;
    
    Ok(())
}

主题定制示例

use re_ui::prelude::*;

fn customize_theme() {
    let mut theme = Theme::default();
    
    // 自定义颜色方案
    theme.colors.primary = Color::from_rgb(0.2, 0.6, 0.8);
    theme.colors.background = Color::from_rgb(0.95, 0.95, 0.95);
    
    // 自定义字体
    theme.typography.heading = Font::new("Roboto", 24.0);
    theme.typography.body = Font::new("Roboto", 16.0);
    
    // 应用主题
    Theme::set_global(theme);
}

响应式布局示例

use re_ui::prelude::*;

fn responsive_layout() -> impl Widget {
    // 使用响应式容器
    ResponsiveContainer::new()
        .breakpoint(768, |_| {
            // 小屏幕布局
            VBox::new()
                .add_child(Label::new("移动端布局"))
                .add_child(Button::new("移动端按钮"))
        })
        .default(|| {
            // 默认桌面布局
            HBox::new()
                .add_child(Label::new("桌面端布局"))
                .add_child(Button::new("桌面端按钮"))
        })
}

模块化组件使用

use re_ui::components::{Card, Avatar, Badge};

fn user_profile_card() -> impl Widget {
    Card::new()
        .add_header(
            HBox::new()
                .add_child(Avatar::new("用户头像"))
                .add_child(Label::new("用户名").bold())
                .add_child(Badge::new("在线").success())
        )
        .add_content(Label::new("用户简介文本..."))
        .add_footer(
            HBox::new()
                .add_child(Button::new("关注"))
                .add_child(Button::new("消息"))
        )
}

完整示例demo

use re_ui::prelude::*;
use re_ui::components::{Card, Avatar, Badge};

fn main() -> Result<(), Box<dyn std::error::Error>> {
    // 初始化应用
    let app = Application::new()?;
    
    // 自定义主题
    let mut theme = Theme::default();
    theme.colors.primary = Color::from_rgb(0.2, 0.6, 0.8);
    theme.colors.background = Color::from_rgb(0.95, 0.95, 0.95);
    Theme::set_global(theme);
    
    // 创建主窗口
    let window = Window::builder()
        .title("re_ui完整示例")
        .size(1000, 700)
        .build();
    
    // 创建主布局容器
    let main_layout = VBox::new()
        .spacing(20)
        .padding(30);
    
    // 添加标题
    let title = Label::new("用户管理系统")
        .font_size(28)
        .bold();
    
    main_layout.add_child(title);
    
    // 添加用户卡片
    let user_card = create_user_card();
    main_layout.add_child(user_card);
    
    // 添加功能按钮区域
    let button_row = HBox::new()
        .spacing(15)
        .add_child(Button::new("添加用户").primary())
        .add_child(Button::new("编辑用户"))
        .add_child(Button::new("删除用户").danger());
    
    main_layout.add_child(button_row);
    
    // 添加搜索区域
    let search_section = HBox::new()
        .spacing(10)
        .add_child(TextInput::new().placeholder("搜索用户..."))
        .add_child(Button::new("搜索"));
    
    main_layout.add_child(search_section);
    
    // 设置窗口内容
    window.set_content(main_layout);
    
    // 运行应用
    app.run()?;
    
    Ok(())
}

// 创建用户卡片组件
fn create_user_card() -> impl Widget {
    Card::new()
        .padding(20)
        .add_header(
            HBox::new()
                .spacing(15)
                .add_child(Avatar::new("用户头像"))
                .add_child(
                    VBox::new()
                        .add_child(Label::new("张三").bold().font_size(18))
                        .add_child(Label::new("高级用户").secondary())
                )
                .add_child(Badge::new("在线").success())
        )
        .add_content(
            VBox::new()
                .spacing(10)
                .add_child(Label::new("邮箱: zhangsan@example.com"))
                .add_child(Label::new("电话: 138-8888-8888"))
                .add_child(Label::new("部门: 技术研发部"))
        )
        .add_footer(
            HBox::new()
                .spacing(10)
                .add_child(Button::new("查看详情"))
                .add_child(Button::new("发送消息").primary())
                .add_child(Button::new("编辑资料"))
        )
}

// 响应式布局示例函数
fn create_responsive_content() -> impl Widget {
    ResponsiveContainer::new()
        .breakpoint(768, |_| {
            // 移动端布局
            VBox::new()
                .spacing(15)
                .add_child(Label::new("移动端界面"))
                .add_child(Button::new("菜单"))
                .add_child(TextInput::new().placeholder("搜索..."))
        })
        .default(|| {
            // 桌面端布局
            HBox::new()
                .spacing(20)
                .add_child(Label::new("桌面端界面").expanded())
                .add_child(Button::new("文件"))
                .add_child(Button::new("编辑"))
                .add_child(Button::new("视图"))
                .add_child(TextInput::new().placeholder("全局搜索..."))
        })
}

最佳实践建议

1. 按需导入：只导入需要的模块以减少编译时间
2. 状态管理：结合Rust的所有权系统设计组件状态
3. 错误处理：妥善处理UI操作可能产生的错误
4. 性能优化：对大型列表使用虚拟滚动
5. 测试策略：编写组件单元测试和集成测试

re_ui提供了完整的文档和示例。