Lesson 1: HarmonyOS Next Layout Development Guide

I. Core Concepts of Layout Containers

In HarmonyOS Next, ArkUI 5.0 offers efficient multi - device adaptation via a declarative layout engine. Here are three key layout containers:

Container	Layout Direction	Typical Scenarios
Column	Vertical (Y - axis)	Forms, vertical lists, info cards
Row	Horizontal (X - axis)	Nav bars, horizontal scrolling, button groups
Grid	2D grid (rows + columns)	Albums, product displays, dashboards

II. Column Container: Mastering Vertical Layouts

1. Basic Usage and Attributes

Column() {  
  Text('Title').fontSize(20)  
  Text('Subtitle').fontColor('#666')  
  Button('Confirm').width(100)  
}  
.height('100%')  
.backgroundColor('#FFF')  
.padding(20)

Key Attributes:

• space: Child component spacing (e.g., .space(10) for 10px vertical spacing).
• alignItems: Cross - axis alignment (HorizontalAlign.Start/Center/End).

2. Nested Layout Example

Column() {  
  // Top navigation bar  
  Row() { ... }  

  // Content area  
  Scroll() {  
    Column() {  
      Image($r('app.media.banner'))  
      Text('Main content...')  
    }  
  }  

  // Bottom buttons  
  Row() { ... }  
}

III. Row Container: Advanced Horizontal Layouts

1. Adaptive Width Control

Row() {  
  Text('Label').flexGrow(1)  // Takes remaining space  
  Button('Action').flexShrink(0) // Can't be compressed  
}  
.justifyContent(FlexAlign.SpaceBetween)

Flexible Layout Attributes:

• flexGrow: Expansion ratio.
• flexShrink: Contraction ratio.
• flexBasis: Base size.

2. Complex Scenario: Scrollable Tab Bar

Scroll() {  
  Row() {  
    ForEach(this.tabs, (tab) => {  
      Text(tab.name)  
        .padding(10)  
        .borderRadius(15)  
    })  
  }  
}  
.scrollable(ScrollDirection.Horizontal)

IV. Grid Container: In - Depth Grid Layouts

1. Basic Grid Definition

Grid() {  
  ForEach(this.items, (item) => {  
    GridItem() {  
      Image(item.url)  
    }  
  })  
}  
.columnsTemplate('1fr 1fr 1fr') // Three equal - width columns  
.rowsGap(15)  
.columnsGap(10)

Parameter Explanation:

• columnsTemplate: Column width definition (supports repeat(3, '1fr') shorthand).
• rowsTemplate: Row height definition.

2. Responsive Grid Adaptation

Grid() {  
  // ...  
}  
.breakpoint({  
  'width < 600px': { columnsTemplate: '1fr' },    // Single column for phones  
  'width >= 600px': { columnsTemplate: '1fr 1fr' } // Two columns for tablets  
})

V. Layout Alignment and Spacing System

1. Full Alignment Options

Main - axis Alignment (justifyContent):

Column() { ... }  
.justifyContent(FlexAlign.Center) // Center on main axis

Options:

• Start (default): Align to start.
• Center: Center alignment.
• End: Align to end.
• SpaceBetween: Align to both ends.
• SpaceAround: Equal spacing.

Cross - axis Alignment (alignItems):

Row() { ... }  
.alignItems(VerticalAlign.Center) // Vertical centering

2. Spacing Control Solutions

Global Spacing System:

// Use preset spacing variables  
Column() { ... }  
.padding($r('app.float.page_margin')) // From resource file

Custom Spacing:

Row() { ... }  
.margin({ top: 10, bottom: 20 })  
.width('100%')

VI. Debugging and Optimization Tips

1. Visualizing Layout Boundaries

Enable debug mode in DevEco Studio:

Column() { ... }  
.debugLine(true) // Show layout borders (only in dev environment)

2. Performance Optimization Tricks

• Avoid nesting layouts beyond 3 levels.
• Use FlexLayout instead of complex Row/Column combinations.
• Use LazyForEach for long lists to load items on - demand.