Makepad 参考
调试、代码质量和高级布局模式的参考资料。
快速导航
| 主题 | 描述 |
|---|---|
| 故障排除 | 常见错误和修复 |
| 代码质量 | Makepad 感知的重构 |
| 自适应布局 | 桌面/移动响应式设计 |
常见问题快速参考
| 错误 | 快速修复 |
|---|---|
no matching field: font | 使用 text_style: <THEME_FONT_*>{} |
颜色解析错误（以 e 结尾） | 更改最后一位数字（如 #14141e → #14141f） |
set_text 缺少参数 | 添加 cx 作为第一个参数 |
| UI 未更新 | 更改后调用 redraw(cx) |
| 找不到组件 | 检查 ID 拼写，使用 ids!() 表示路径 |
常见构建错误
错误："no matching field: font"
// ❌ 错误
<Label> { font: "Bold" }
// ✅ 正确
<Label> { text_style: <THEME_FONT_BOLD>{} }
错误：颜色解析失败
// ❌ 错误 - 以 'e' 结尾
draw_bg: { color: #14141e }
// ✅ 正确 - 更改最后一位数字
draw_bg: { color: #14141f }
错误：组件未重绘
// ❌ 错误 - 更改不可见
self.label.set_text(&mut cx, "新文本");
// ✅ 正确 - 触发重绘
self.label.set_text(&mut cx, "新文本");
self.redraw(cx);
代码质量指南
组件扩展模式
// 好：为可重用操作创建扩展 trait
pub trait LabelExt {
fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4);
}
impl LabelExt for Label {
fn set_text_and_color(&mut self, cx: &mut Cx, text: &str, color: Vec4) {
self.label(id!(text)).set_text(cx, text);
self.draw_text.color = color;
self.redraw(cx);
}
}
避免重复模式
// ❌ 不好：重复代码
match action {
Action1 => { self.widget1.redraw(cx); }
Action2 => { self.widget2.redraw(cx); }
Action3 => { self.widget3.redraw(cx); }
}
// ✅ 好：提取通用逻辑
fn redraw_widget(&mut self, cx: &mut Cx, widget_id: WidgetId) {
self.widget(widget_id).redraw(cx);
}
自适应布局模式
响应式尺寸
live_design! {
<View> {
// 桌面：固定宽度，移动：填充
width: { desktop: 800, mobile: Fill }
height: Fit
flow: { desktop: Right, mobile: Down }
}
}
基于断点的布局
impl Widget for MyView {
fn draw(&mut self, cx: &mut Cx2d) {
let width = cx.turtle().rect().size.x;
if width > 800.0 {
// 桌面布局
} else {
// 移动布局
}
}
}
平台特定样式
live_design! {
<Button> {
// 平台特定属性
padding: {
desktop: {left: 20, right: 20, top: 10, bottom: 10}
mobile: {left: 15, right: 15, top: 8, bottom: 8}
}
draw_text: {
text_style: {
font_size: { desktop: 14.0, mobile: 16.0 }
}
}
}
}
调试技巧
启用行信息
# 运行时显示行信息以获得更好的错误消息
MAKEPAD=lines cargo +nightly run
日志记录
// 添加日志以进行调试
log!("值: {:?}", my_value);
log!("状态: {} / {}", self.counter, self.is_loading);
log!("事件: {:?}", event);
组件检查器
// 打印组件树
fn debug_widget_tree(&self, cx: &Cx, depth: usize) {
let indent = " ".repeat(depth);
log!("{}组件: {:?}", indent, self.widget_uid());
for child in self.children() {
child.debug_widget_tree(cx, depth + 1);
}
}
性能提示
- 对大型列表使用 PortalList - 虚拟滚动提高性能
- 避免不必要的重绘 - 仅在状态更改时调用
redraw(cx) - 缓存繁重的计算 - 将结果存储在组件状态中
- 使用 GPU 着色器 - 将视觉效果卸载到 GPU
资源
- Makepad 仓库
- Robrix - 生产参考
- Moly - 生产参考
评论
还没有评论。成为第一个评论的人！
相关工具
相关洞察
Windows 上把 OpenCode Go 接进 Codex，别再新开一套工具
ChatGPT 登录的 Codex 桌面版，默认选择器几乎只露出 GPT。Windows 上只开 OpenCode Go 这一家，就能把已经付过钱的 Grok、GLM、Kimi、DeepSeek、MiniMax 接回同一个 picker。密钥不出本机，原生 GPT 也不动。
锁死 Codex 的不是模型，是选择器
你已经为 OpenCode Go、Grok、Z.ai 付过钱了，但 Codex 的 picker 默认只露出 GPT。社区项目 codex-router 做的不是再教一遍安装步骤，而是把已经买过的模型能力接回选择器：密钥不出本机，原生 GPT 也不动。
7 款 AI 编程 CLI 用了半年，我悟出一个道理：模型再强，干活也要有监督
Claude Code、Codex、opencode、pi、omp、DeepSeek Harness 各有性格。半年深度使用后我总结出一套分工矩阵：pi 做最省事的 CR、omp 审复杂 PR、DeepSeek Harness 配 V4 Flash 高频低成本审查、Claude Code 与 Qoder 写代码。模型再强，干活也要有监督，而且最好是独立第三方。