#Basic Concepts

Layout and Walk are the two most fundamental concepts in Makepad's layout system, working together to determine how components are positioned and sized.

• Walk: Defines how a component "walks" within its parent container, determining its own size and position
• Layout: Defines how a component "arranges" its child components when acting as a container

Let's understand this through an analogy:

• Walk is like a person deciding how much space they need and where to stand in a room
• Layout is like that person, as a room host, deciding how to arrange seating for their guests

The term Walk is used because Turtle Draw is the core mechanism of Makepad's layout system, inspired by classic Turtle Graphics.

This layout approach allows us to determine component position and size by having a "turtle" walk across the canvas.

#Detailed Comparison

#Walk Properties

1walk: {
2    width: Fill,      // Width behavior in parent container
3    height: Fixed(50), // Height behavior in parent container
4    margin: {         // Spacing from other components
5        left: 10,
6        right: 10,
7        top: 5,
8        bottom: 5
9    }
10}

Key characteristics of Walk:

1. Externally oriented - Determines how the component positions itself within its parent
2. Passive calculation - Size is determined jointly by parent container and own properties
3. Margin control - Maintains spacing from other components through margins

#Layout Properties

1layout: {
2    flow: Down,       // Child component arrangement direction
3    spacing: 10,      // Spacing between child components
4    padding: {        // Internal spacing
5        left: 10,
6        right: 10,
7        top: 5,
8        bottom: 5
9    },
10    align: {          // Child component alignment
11        x: 0.5,       // Horizontal center
12        y: 0.0        // Top alignment
13    }
14}

Key characteristics of Layout:

1. Internally oriented - Determines how to manage child components
2. Active layout - Directly controls child component arrangement
3. Internal space - Controls content area through padding

#Collaborative Working Mechanism

Let's examine how they work together through an example:

1Container = <View> {
2    // Determines container's behavior in parent
3    walk: {
4        width: Fill,        // Fill parent container width
5        height: Fit,        // Height adapts to content
6        margin: 10         // 10px margin on all sides
7    },
8
9    // Determines how to arrange child components
10    layout: {
11        flow: Down,        // Vertical arrangement of children
12        spacing: 5,        // 5px spacing between children
13        padding: 15,       // 15px internal padding
14        align: {x: 0.5}    // Horizontally center children
15    },
16
17    // Child components
18    <Button> {
19        walk: {
20            width: Fixed(100),  // Fixed 100px width
21            height: Fixed(40)   // Fixed 40px height
22        }
23    }
24
25    <Button> {
26        walk: {
27            width: Fixed(100),
28            height: Fixed(40)
29        }
30    }
31}

Layout calculation process:

1. Container's Walk determines its own Fill width and Fit height within parent
2. Container's Layout decides children will be vertically arranged and centered
3. Each Button's Walk determines its own fixed 100x40 size
4. Finally, Container's height is calculated as:
   • padding.top (15px)
   • Button1 height (40px)
   • spacing (5px)
   • Button2 height (40px)
   • padding.bottom (15px)
   • Total: 115px

Diagram illustrating layout calculation process

1┌─── Container(Fill × Fit) ───┐
2│    ┌── padding: 15px ──┐    │
3│    │   ┌─────────┐     │    │
4│    │   │ Button1 │     │    │
5│    │   └─────────┘     │    │
6│    │      5px          │    │
7│    │   ┌─────────┐     │    │
8│    │   │ Button2 │     │    │
9│    │   └─────────┘     │    │
10│    └───────────────────┘    │
11└─────────────────────────────┘
12    ↑     ↑          ↑      ↑
13 margin  align       flow   margin