Makepad コア概念

レイアウト、ウィジェット、イベント、スタイリングを含むMakepad UI開発の基本的な構成要素。

クイックナビゲーション

トピック	説明
レイアウトシステム	フロー、サイズ、間隔、配置
ウィジェット	一般的なウィジェット、カスタムウィジェット作成
イベント	イベント処理、ヒットテスト、アクション
スタイリング	フォント、テキストスタイル、SVGアイコン

概要

Makepadは次を使用するRustベースのクロスプラットフォームUIフレームワークです：

宣言的UIレイアウトのための live_design! マクロ
#[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: "OK" }`
`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) => {
// クリックを処理
}
_ => {}
}
}