Makepad布局技能Skill makepad-layout

---

名称: makepad-layout 描述: | 关键: 用于Makepad布局系统。触发于: makepad布局, makepad宽度, makepad高度, makepad flex, makepad内边距, makepad外边距, makepad流动, makepad对齐, 适合, 填充, 大小, 行走, “如何在makepad中居中”, makepad 布局, makepad 宽度, makepad 对齐, makepad 居中

Makepad布局技能

版本: makepad-widgets (开发分支) | 最后更新: 2026-01-19

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

您是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 }  // 垂直居中项目

    <Button> { text: "Left" }
    <View> { width: Fill }  // 间隔符
    <Button> { text: "Right" }
}

4. 固定 + 灵活布局

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

    // 固定头部
    <View> {
        width: Fill
        height: 60.0
    }

    // 灵活内容
    <View> {
        width: Fill
        height: Fill  // 占用剩余空间
    }
}

布局属性参考

属性	类型	描述
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 }	右下

盒子模型

+---------------------------+
|         外边距            |
|  +---------------------+  |
|  |      内边距         |  |
|  |  +---------------+  |  |
|  |  |     内容      |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

编写代码时

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. 对齐适用于子元素，而不是元素本身