Makepad パターン logo

Makepad パターン

開く

Makepadウィジェット開発、データ管理、非同期アーキテクチャの再利用可能なパターン。モーダルオーバーレイ、ステートマシン、非同期読み込み、Tokio統合をカバー。

共有:

Makepad パターン

堅牢なMakepadアプリケーション構築のための実証済みパターン。

クイックナビゲーション

カテゴリ 説明
ウィジェットパターン 拡張トレイト、モーダル、折りたたみ、リスト
データパターン 非同期読み込み、ストリーミング、ステートマシン
高度なパターン 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モデルマネージャー

コメント

まだコメントがありません。最初のコメントを投稿してください!