Makepad Patterns logo

Makepad Patterns

打开

Makepad 组件开发、数据管理和异步架构的可重用模式。涵盖模态覆盖层、状态机、异步加载和 Tokio 集成。Makepad Patterns 收录于 skills,可对比功能、定价与替代方案。

分享:
查看替代方案

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 集成模式

资源

  • Robrix - Matrix 聊天客户端
  • Moly - AI 模型管理器

相关:Agent Messaging SkillAgent Ops Incident Notifier,分类见 skills

评论

还没有评论。成为第一个评论的人!