如何使用 AI 快速构建 Makepad 界面布局 #

解决 Makepad UI 开发中布局配置繁琐的问题：通过为 AI 提供一套完整的布局模式（Patterns）和属性映射，使其能够精准生成对齐、填充及响应式容器代码。

为什么需要这个技能 #

Makepad 采用了一种独特的“海龟”布局模型（Turtle Layout Model），与常见的 CSS Flexbox 逻辑有所不同。开发者在处理 Walk、Align、Fit 和 Fill 等概念时，容易出现对齐失效或尺寸计算错误。

通过此技能，AI 能够扮演 Makepad 布局专家，直接根据你的视觉需求（如“水平居中”或“固定头部+弹性内容区”）生成符合语法规范的代码，无需反复查阅底层 API 文档。

适用场景 #

• 在 Makepad UI 中对组件进行尺寸定义、对齐或定位时。
• 需要快速构建响应式容器，涉及 padding、spacing 或 flow 方向配置时。
• 实现复杂的界面组合，如导航栏、侧边栏或居中模态窗口。

核心工作流 #

1. 定义布局意图：告知 AI 你的布局目标（例如：创建一个垂直排列的列表，且最后一个元素填充剩余空间）。
2. 应用尺寸策略：
   • 使用 Fill 实现弹性填充。
   • 使用 Fit 使组件随内容自适应。
   • 使用具体数值（如 60.0）定义固定尺寸。
3. 配置流向与对齐：
   • 设置 flow: Down（纵向）或 flow: Right（横向）。
   • 通过 align: { x: 0.5, y: 0.5 } 实现精确的中心对齐。
4. 代码生成与校验：AI 根据上述逻辑生成 Rust 代码块，并根据本地 layout-system.md 校验属性名称是否正确。

典型代码模式示例 #

实现水平行布局（带弹簧间隔）：

<View> {
    width: Fill
    height: Fit
    flow: Right
    spacing: 10.0
    align: { y: 0.5 }

    <Button> { text: "Left" }
    <View> { width: Fill }  // 充当 Spacer，将按钮推向两端
    <Button> { text: "Right" }
}

下载和安装 #

下载 makepad-layout 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐