makepad-layout

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Makepad Layout Skill

Makepad布局技能

Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19

Check for updates: https://crates.io/crates/makepad-widgets

You are an expert at Makepad layout system. Help users by:

Writing code: Generate layout code following the patterns below
Answering questions: Explain layout concepts, sizing, flow directions

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

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

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

编写代码：按照以下模式生成布局代码
解答问题：解释布局概念、尺寸设置、排列方向

Documentation

文档参考

Refer to the local files for detailed documentation:

```
./references/layout-system.md
```
- Complete layout reference
```
./references/core-types.md
```
- Walk, Align, Margin, Padding types

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

```
./references/layout-system.md
```
- 完整布局参考文档
```
./references/core-types.md
```
- Walk、Align、Margin、Padding类型说明

IMPORTANT: Documentation Completeness Check

重要提示：文档完整性检查

Before answering questions, Claude MUST:

Read the relevant reference file(s) listed above
If file read fails or file is empty:
- Inform user: "本地文档不完整，建议运行
```
/sync-crate-skills makepad --force
```
  更新文档"
- Still answer based on SKILL.md patterns + built-in knowledge
If reference file exists, incorporate its content into the answer

在解答问题前，Claude必须执行以下步骤：

阅读上述列出的相关参考文件
如果文件读取失败或文件为空：
- 告知用户：“本地文档不完整，建议运行
```
/sync-crate-skills makepad --force
```
  更新文档”
- 仍需基于SKILL.md的模式和内置知识进行解答
如果参考文件存在，需将其中内容融入解答中

Key Patterns

核心模式

1. Basic Layout Container

1. 基础布局容器

rust

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

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

rust

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

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

2. Centering Content

2. 内容居中布局

rust

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

    <Label> { text: "Centered" }
}

rust

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

    <Label> { text: "Centered" }
}

3. Horizontal Row Layout

3. 水平行布局

rust

<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" }
}

rust

<View> {
    width: Fill
    height: Fit
    flow: Right
    spacing: 10.0
    align: { y: 0.5 }  // 垂直居中子元素

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

4. Fixed + Flexible Layout

4. 固定+弹性布局

rust

<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
    }
}

rust

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

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

    // 弹性内容区域
    <View> {
        width: Fill
        height: Fill  // 占据剩余空间
    }
}

Layout Properties Reference

布局属性参考

Property	Type	Description
`width`	Size	Width of element
`height`	Size	Height of element
`padding`	Padding	Inner spacing
`margin`	Margin	Outer spacing
`flow`	Flow	Child layout direction
`spacing`	f64	Gap between children
`align`	Align	Child alignment
`clip_x`	bool	Clip horizontal overflow
`clip_y`	bool	Clip vertical overflow

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

Size Values

尺寸取值

Value	Description
`Fit`	Size to fit content
`Fill`	Fill available space
`100.0`	Fixed size in pixels
`Fixed(100.0)`	Explicit fixed size

取值	描述
`Fit`	自适应内容尺寸
`Fill`	填充可用空间
`100.0`	固定像素尺寸
`Fixed(100.0)`	显式固定尺寸

Flow Directions

排列方向

Value	Description
`Down`	Top to bottom (column)
`Right`	Left to right (row)
`Overlay`	Stack on top

取值	描述
`Down`	从上到下（列布局）
`Right`	从左到右（行布局）
`Overlay`	堆叠覆盖

Align Values

对齐取值

Value	Position
`{ x: 0.0, y: 0.0 }`	Top-left
`{ x: 0.5, y: 0.0 }`	Top-center
`{ x: 1.0, y: 0.0 }`	Top-right
`{ x: 0.0, y: 0.5 }`	Middle-left
`{ x: 0.5, y: 0.5 }`	Center
`{ x: 1.0, y: 0.5 }`	Middle-right
`{ x: 0.0, y: 1.0 }`	Bottom-left
`{ x: 0.5, y: 1.0 }`	Bottom-center
`{ x: 1.0, y: 1.0 }`	Bottom-right

取值	位置
`{ 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 }`	右下角

Box Model

盒模型

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

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

When Writing Code

编写代码时的注意事项

Use
```
Fill
```
for flexible containers,
```
Fit
```
for content-sized elements
Set
```
flow: Down
```
for vertical,
```
flow: Right
```
for horizontal
Use empty
```
<View> { width: Fill }
```
as spacer in row layouts
Always set explicit dimensions on fixed-size elements
Use
```
align
```
to position children within container

弹性容器使用
```
Fill
```
，内容自适应元素使用
```
Fit
```
垂直布局设置
```
flow: Down
```
，水平布局设置
```
flow: Right
```
在水平行布局中使用空的
```
<View> { width: Fill }
```
作为占位间隔
固定尺寸元素需始终设置明确的尺寸值
使用
```
align
```
控制子元素在容器内的位置

When Answering Questions

解答问题时的注意事项

Makepad uses a "turtle" layout model - elements laid out sequentially
```
Fill
```
takes all available space,
```
Fit
```
shrinks to content
Unlike CSS flexbox, there's no flex-grow/shrink - use Fill/Fit
Alignment applies to children, not the element itself

Makepad采用“海龟”布局模型 - 元素按顺序依次排列
```
Fill
```
会占据所有可用空间，
```
Fit
```
会收缩至内容尺寸
与CSS Flexbox不同，Makepad没有flex-grow/shrink属性 - 请使用Fill/Fit代替
对齐属性作用于子元素，而非元素本身