当前位置：首页 > news >正文

鸿蒙 ArkUI 基础布局

news 来源：原创 2025/6/10 5:30:59

鸿蒙 ArkUI 提供了灵活的 UI 组件和布局方式，支持声明式 UI 开发，使开发者能够快速构建界面。本教程介绍 ArkUI 的基础布局方式，包括 Flex、Row、Column、Grid 和 Stack 组件的使用。

1. ArkUI 布局基础

鸿蒙 ArkUI 使用 声明式 UI 进行布局，主要使用 Row（行）、Column（列）、Flex（弹性布局）、Grid（网格）和 Stack（堆叠） 进行界面布局。

Row：水平排列子元素
Column：垂直排列子元素
Flex：弹性布局，支持自动伸缩
Grid：网格布局，适用于多列布局
Stack：堆叠布局，子组件可以相互覆盖

2. Row 与 Column

Row 组件用于创建 水平布局，Column 组件用于 垂直布局。

2.1 Row 示例（水平布局）

@Entry
@Component
struct RowExample {
  build() {
    Row() {
      Text("左边").backgroundColor(Color.Red).padding(10)
      Text("中间").backgroundColor(Color.Green).padding(10)
      Text("右边").backgroundColor(Color.Blue).padding(10)
    }.justifyContent(FlexAlign.SpaceBetween).height(50)
  }
}

说明：

justifyContent(FlexAlign.SpaceBetween) 使得子组件均匀分布
height(50) 限制了 Row 的高度

2.2 Column 示例（垂直布局）

@Entry
@Component
struct ColumnExample {
  build() {
    Column() {
      Text("上").backgroundColor(Color.Red).padding(10)
      Text("中").backgroundColor(Color.Green).padding(10)
      Text("下").backgroundColor(Color.Blue).padding(10)
    }.alignItems(HorizontalAlign.Center).height(200)
  }
}

说明：

alignItems(HorizontalAlign.Center) 让子元素居中
height(200) 让 Column 组件高度固定

3. Flex 弹性布局

Flex 是更高级的布局方式，支持 横向、纵向 布局，并能自动适配子元素。

@Entry
@Component
struct FlexExample {
  build() {
    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround}) {
      Text("1").backgroundColor(Color.Red).padding(10)
      Text("2").backgroundColor(Color.Green).padding(10)
      Text("3").backgroundColor(Color.Blue).padding(10)
    }.height(50)
  }
}

说明：

FlexDirection.Row 让子元素按行排列
justifyContent(FlexAlign.SpaceAround) 让子元素等间距排列

4. Grid 网格布局

Grid 用于 多列布局，适用于表格或网格结构。

@Entry
@Component
struct GridExample {
  build() {
    Grid({columns: 3}) {
      ForEach(["A", "B", "C", "D", "E", "F"], (item) => {
        Text(item).backgroundColor(Color.Gray).padding(10).margin(5)
      })
    }
  }
}

说明：

columns: 3 表示网格有 3 列
ForEach 用于动态创建子元素

5. Stack 叠层布局

Stack 允许子元素层叠放置，适用于 覆盖效果。

@Entry
@Component
struct StackExample {
  build() {
    Stack() {
      Image("background.png").width(200).height(200)
      Text("前景文字").fontSize(20).fontColor(Color.White).align(Alignment.Center)
    }.width(200).height(200)
  }
}