Makepad 核心概念
Makepad UI 开发的基本构建块，包括布局、组件、事件和样式。
快速导航
| 主题 | 描述 |
|---|---|
| 布局系统 | 流向、尺寸、间距、对齐 |
| 组件 | 常用组件、自定义组件创建 |
| 事件 | 事件处理、命中测试、操作 |
| 样式 | 字体、文本样式、SVG 图标 |
概述
Makepad 是一个基于 Rust 的跨平台 UI 框架，使用：
live_design!宏用于声明式 UI 布局- 使用
#[derive(Live, Widget)]进行组件组合 - 带类型化 Actions 的事件驱动架构
- GPU 加速渲染
项目结构
my_app/
├── src/
│ ├── app.rs # 主应用入口，事件路由
│ ├── lib.rs # 模块声明，live_register
│ ├── home/ # 功能模块
│ │ ├── mod.rs
│ │ └── home_screen.rs
│ └── shared/ # 可重用组件
│ ├── mod.rs
│ ├── styles.rs # 主题、颜色
│ └── widgets.rs
└── resources/ # 图片、字体
live_design! 宏
Makepad UI 定义的核心：
live_design! {
use link::theme::*;
use link::shaders::*;
use link::widgets::*;
App = {{App}} {
ui: <Root> {
main_window = <Window> {
body = <View> {
flow: Down,
spacing: 10,
padding: 20,
my_button = <Button> {
text: "点击我"
draw_bg: { color: #4A90D9 }
}
<Label> { text: "你好 Makepad" }
}
}
}
}
}
DSL 语法参考
| 语法 | 用途 | 示例 |
|---|---|---|
<Widget> | 实例化组件 | <Button> { text: "确定" } |
name = <Widget> | 命名引用 | my_btn = <Button> {} |
{{StructName}} | 链接到 Rust 结构 | App = {{App}} {} |
flow: Down/Right | 布局方向 | flow: Down |
width/height | 尺寸 | width: Fill, height: Fit |
padding/margin | 间距 | padding: {left: 10, top: 5} |
尺寸值
| 值 | 含义 |
|---|---|
Fill | 填充可用空间 |
Fit | 适应内容 |
Fixed(100.0) | 固定像素大小 |
All | 在所有方向填充 |
事件处理
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
match event.hits(cx, self.view.area()) {
Hit::FingerDown(_fe) => {
// 处理点击
}
_ => {}
}
}
资源
- Makepad draw 源码
- Robrix - 生产示例
评论
还没有评论。成为第一个评论的人！
