Makepad 模式
构建健壮 Makepad 应用程序的经过验证的模式。
快速导航
| 类别 | 描述 |
|---|---|
| 组件模式 | 扩展 trait、模态框、可折叠、列表 |
| 数据模式 | 异步加载、流式传输、状态机 |
| 高级模式 | Tokio 集成、工具提示、主题切换 |
组件扩展模式
pub trait ButtonExt {
fn set_enabled(&mut self, cx: &mut Cx, enabled: bool);
}
impl ButtonExt for Button {
fn set_enabled(&mut self, cx: &mut Cx, enabled: bool) {
if enabled {
self.animator_play(cx, id!(hover.off));
} else {
self.animator_play(cx, id!(disabled.on));
}
}
}
模态覆盖层模式
live_design! {
<View> {
// 主内容
<Button> { text: "显示模态框" }
// 模态覆盖层（初始隐藏）
modal_overlay = <View> {
visible: false
abs_pos: vec2(0, 0)
width: Fill, height: Fill
draw_bg: { color: #00000080 }
<View> {
// 模态内容
width: 400, height: 300
<Label> { text: "模态内容" }
}
}
}
}
异步加载模式
pub enum LoadState<T> {
Loading,
Loaded(T),
Error(String),
}
impl Widget for MyWidget {
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
match &self.load_state {
LoadState::Loading => {
// 显示加载动画
}
LoadState::Loaded(data) => {
// 渲染数据
}
LoadState::Error(msg) => {
// 显示错误
}
}
}
}
状态机模式
#[derive(Clone, Debug, PartialEq)]
pub enum ViewState {
List,
Detail(String),
Edit(String),
Loading,
}
impl MyView {
fn transition_to(&mut self, cx: &mut Cx, new_state: ViewState) {
self.state = new_state;
self.redraw(cx);
}
}
Tokio 集成模式
// 在 main.rs 中
fn main() {
let runtime = tokio::runtime::Runtime::new().unwrap();
let _guard = runtime.enter();
makepad_widgets::live_design(live_design);
makepad_widgets::makepad_platform::event_loop::event_loop(|cx, event| {
// 事件处理
});
}
// 在组件中
fn fetch_data(&mut self, cx: &mut Cx) {
let sender = cx.get_sender();
tokio::spawn(async move {
let data = fetch_from_api().await;
sender.send(DataLoadedEvent(data));
});
}
主题切换模式
live_design! {
THEME_LIGHT = {
bg_color: #FFFFFF
text_color: #000000
}
THEME_DARK = {
bg_color: #1E1E1E
text_color: #FFFFFF
}
<View> {
theme: $(THEME_LIGHT)
draw_bg: { color: (theme.bg_color) }
}
}
模式选择指南
UI 状态
- 简单切换 → 实例变量
- 多个状态 → 状态机模式
- 互斥选择 → 单选导航模式
数据
- 一次性获取 → 异步加载模式
- 增量显示 → 流式结果模式
- 持久化设置 → 本地持久化模式
性能
- 大型列表 → 列表模板模式
- 重型视图 → LRU 视图缓存模式
- 后台工作 → Tokio 集成模式
资源
评论
还没有评论。成为第一个评论的人！
相关工具
相关洞察
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 写代码。模型再强，干活也要有监督，而且最好是独立第三方。