---

name: makepad-layout description: | 关键：用于 Makepad 布局系统。触发条件： makepad layout, makepad width, makepad height, makepad flex, makepad padding, makepad margin, makepad flow, makepad align, Fit, Fill, Size, Walk, "how to center in makepad", makepad 布局, makepad 宽度, makepad 对齐, makepad 居中 risk: safe source: community

Makepad 布局技能

版本： makepad-widgets (dev 分支) | 最后更新： 2026-01-19

检查更新：https://crates.io/crates/makepad-widgets

你是 Makepad 布局系统的专家。通过以下方式帮助用户：

• 编写代码：按照以下模式生成布局代码
• 回答问题：解释布局概念、尺寸、流方向

适用场景

• 需要在 Makepad UI 中调整大小、对齐或定位组件时。
• 任务涉及 Walk、Align、Fit、Fill、padding、spacing 或容器流配置时。
• 需要 Makepad 特定的居中、响应式或组合布局解决方案时。

文档

参考本地文件获取详细文档：

• ./references/layout-system.md - 完整布局参考
• ./references/core-types.md - Walk、Align、Margin、Padding 类型

重要：文档完整性检查

回答问题前，Claude 必须：

1. 阅读上面列出的相关参考文件
2. 如果文件读取失败或文件为空：
   • 通知用户："本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
   • 仍然基于 SKILL.md 模式 + 内置知识回答
3. 如果参考文件存在，将其内容纳入回答

关键模式

1. 基本布局容器

<View> {
    width: Fill
    height: Fill
    flow: Down
    padding: 16.0
    spacing: 8.0

    <Label> { text: "Item 1" }
    <Label> { text: "Item 2" }
}

2. 居中内容

<View> {
    width: Fill
    height: Fill
    align: { x: 0.5, y: 0.5 }

    <Label> { text: "Centered" }
}

3. 水平行布局

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

    <Button> { text: "Left" }
    <View> { width: Fill }  // Spacer
    <Button> { text: "Right" }
}

4. 固定 + 弹性布局

<View> {
    width: Fill
    height: Fill
    flow: Down

    // Fixed header
    <View> {
        width: Fill
        height: 60.0
    }

    // Flexible content
    <View> {
        width: Fill
        height: Fill  // Takes remaining space
    }
}

布局属性参考

| 属性 | 类型 | 描述 | |----------|------|-------------| | width | Size | 元素宽度 | | height | Size | 元素高度 | | padding | Padding | 内间距 | | margin | Margin | 外间距 | | flow | Flow | 子元素布局方向 | | spacing | f64 | 子元素间距 | | align | Align | 子元素对齐 | | clip_x | bool | 裁剪水平溢出 | | clip_y | bool | 裁剪垂直溢出 |

尺寸值

| 值 | 描述 | |-------|-------------| | Fit | 适应内容大小 | | Fill | 填充可用空间 | | 100.0 | 固定像素大小 | | Fixed(100.0) | 显式固定大小 |

流方向

| 值 | 描述 | |-------|-------------| | Down | 从上到下（列） | | Right | 从左到右（行） | | Overlay | 堆叠在顶部 |

对齐值

| 值 | 位置 | |-------|----------| | { x: 0.0, y: 0.0 } | 左上 | | { x: 0.5, y: 0.0 } | 上中 | | { x: 1.0, y: 0.0 } | 右上 | | { x: 0.0, y: 0.5 } | 左中 | | { x: 0.5, y: 0.5 } | 居中 | | { x: 1.0, y: 0.5 } | 右中 | | { x: 0.0, y: 1.0 } | 左下 | | { x: 0.5, y: 1.0 } | 下中 | | { x: 1.0, y: 1.0 } | 右下 |

盒模型

+---------------------------+
|         margin            |
|  +---------------------+  |
|  |      padding        |  |
|  |  +---------------+  |  |
|  |  |   content     |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

编写代码时

1. 对弹性容器使用 Fill，对内容大小元素使用 Fit
2. 垂直布局设置 flow: Down，水平布局设置 flow: Right
3. 在行布局中使用空的 <View> { width: Fill } 作为间隔器
4. 始终为固定大小元素设置显式尺寸
5. 使用 align 在容器内定位子元素

回答问题时

1. Makepad 使用"海龟"布局模型 — 元素按顺序排列
2. Fill 占据所有可用空间，Fit 收缩到内容大小
3. 与 CSS flexbox 不同，没有 flex-grow/shrink — 使用 Fill/Fit
4. 对齐应用于子元素，而非元素本身

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来要求澄清。