Clat GUI

高性能、跨平台的Rust桌面端GUI框架。

特点

• 高性能渲染：基于wgpu实现的现代图形渲染管道
• 跨平台兼容：支持Windows、macOS和Linux等主流桌面平台
• 简洁易用的API：提供直观、符合Rust习惯的API接口
• 灵活的布局系统：支持水平布局、垂直布局和网格布局
• 可定制的组件：提供基础UI组件，并支持自定义组件开发
• 响应式设计：自动适应窗口大小变化

安装

将以下内容添加到你的Cargo.toml文件中：

[dependencies]
clat_gui = "0.1.0"

快速开始

以下是一个简单的示例，展示如何创建一个基本窗口：

use clat_gui::Application;
use anyhow::Result;

fn main() -> Result<()> {
    // 创建应用程序实例
    let mut app = Application::new();
    
    // 创建窗口
    app.create_window("Clat Desktop", 800, 600)?;
    
    // 运行应用程序
    app.run();
}

基本组件

按钮

use clat_gui::components::button::Button;

// 创建按钮
let mut button = Button::new(100.0, 100.0, 200.0, 50.0, "点击我");

// 设置点击事件处理
button.set_on_click(|| {
    println!("按钮被点击了！");
});

标签

use clat_gui::components::label::Label;

// 创建标签
let mut label = Label::new(100.0, 200.0, "这是一个标签");

// 设置文本颜色
label.set_color([1.0, 0.0, 0.0, 1.0]); // 红色文本

// 设置字体大小
label.set_font_size(20.0);

布局系统

水平布局

use clat_gui::layout::{LayoutManager, LayoutConstraints};
use clat_gui::layout::containers::HorizontalLayout;

// 创建布局管理器
let mut layout_manager = LayoutManager::new();

// 生成容器ID
let container_id = layout_manager.generate_id();

// 创建水平布局容器
let mut horizontal_layout = HorizontalLayout::new(10.0, 20.0); // 间距10，内边距20

// 注册布局策略
layout_manager.register_strategy(container_id, Box::new(horizontal_layout));

// 添加子组件
layout_manager.add_child(container_id, child_id_1, 1.0); // 权重1.0
layout_manager.add_child(container_id, child_id_2, 2.0); // 权重2.0

// 计算布局
let constraints = LayoutConstraints::default();
layout_manager.calculate_layout(container_id, constraints);

垂直布局

use clat_gui::layout::containers::VerticalLayout;

// 创建垂直布局容器
let mut vertical_layout = VerticalLayout::new(10.0, 20.0); // 间距10，内边距20

// 注册布局策略并添加子组件（与水平布局类似）

网格布局

use clat_gui::layout::containers::GridLayout;

// 创建网格布局容器
let mut grid_layout = GridLayout::new(3, 3, 100.0, 50.0, 5.0, 10.0); // 3x3网格，单元格大小100x50，间距5，内边距10

// 设置单元格跨度
grid_layout.set_cell_span(child_id, 0, 0, 1, 2); // 第0行第0列，跨越1行2列

渲染系统

use clat_gui::render::Renderer;

// 创建渲染器（通常由Application内部管理）
let renderer = Renderer::new(device, queue, surface, config);

// 开始渲染帧
let (output, view, mut encoder) = renderer.begin_frame()?;

// 创建渲染通道
let mut render_pass = renderer.create_render_pass(&mut encoder, &view, Some(wgpu::Color {
    r: 0.1,
    g: 0.2,
    b: 0.3,
    a: 1.0,
}));

// 绘制基本图形
renderer.draw_rect(&mut render_pass, 100.0, 100.0, 200.0, 100.0, [1.0, 0.0, 0.0, 1.0]);
renderer.draw_circle(&mut render_pass, 400.0, 200.0, 50.0, [0.0, 1.0, 0.0, 1.0]);

// 结束渲染帧
renderer.end_frame(output, encoder);

开发说明

构建项目

cargo build

运行示例

cargo run --example simple_app

运行测试

cargo test

许可证

本项目采用MIT许可证，详情请查看LICENSE文件。

贡献

欢迎提交问题和Pull Request来帮助改进这个项目！