ArkUI学习（3）

本文介绍了鸿蒙应用开发中的四种主要布局组件：Row水平布局、Column垂直布局、Stack层叠布局和Flex弹性布局。重点讲解了Flex布局的特性，包括主轴/交叉轴对齐方式、间距设置和换行功能，并提供了完整的代码示例。同时指出布局组件使用时需要注意：1）必须包含@Entry和@Component装饰器；2）struct结构体定义；3）build函数作为入口；4）只能有一个根组件。通过对比不同对齐

2301_81427201

59人浏览 · 2026-04-17 01:22:51

2301_81427201 · 2026-04-17 01:22:51 发布

官方学习视频链接：鸿蒙应用开发实战课-华为开发者学堂

以下介绍了多种布局组件，包含线性布局，层叠布局，弹性布局，在介绍前，先说明一个小技巧，下图是用了弹性布局（Flex），将鼠标移至查阅API参考，就能查找到各种属性，大家可以根据文档中的内容来改变布局样式。

第一种Row，水平排列，竖直居中

第二种Column，是最常用的，垂直排列，水平居中，这两种就是线性布局组件

第三种Stack，属于层叠布局，使用的时候要注意子组件的顺序

层叠布局也可以更改层叠样式，根据下图可知有9个样式，大家可以自行选取，以下有举例

@Entry//要素1：@Entry
@Component//要素2：@Component
struct Index {//要素3：struct
  build() {//要素4：build，注意build函数中如果有组件的话，只能有一个根组件
    Stack({alignContent:Alignment.TopEnd}){
      Column().width(400).backgroundColor(Color.Black).height(500)
      Column().width(300).backgroundColor(Color.Pink).height(300)
      Column().width(100).backgroundColor(Color.Blue).height(100)
    }
    .height('100%')
    .width('100%')
  }
}

第四种Flex，这是弹性布局组件，可以换行设置元素的间距，也可以设置子元素主轴交叉轴对齐方式，主轴为排列方向上的轴，交叉轴为垂直于主轴的轴

import { LengthMetrics } from '@kit.ArkUI'

@Entry//要素1：@Entry
@Component//要素2：@Component
struct Index {//要素3：struct
  build() {//要素4：build，注意build函数中如果有组件的话，只能有一个根组件
    Flex({wrap:FlexWrap.Wrap,space:{main: LengthMetrics.px(5), cross: LengthMetrics.px(5)}}){//如果没有导入包会显示报错
      Text('111').padding(8).backgroundColor(Color.Blue)
      Text('222').padding(8).backgroundColor(Color.Gray)
      Text('333').padding(8).backgroundColor(Color.Red)
      Text('444').padding(8).backgroundColor(Color.Gray)
      Text('555').padding(8).backgroundColor(Color.Green)
    }
    .height('100%')
    .width('100%')
  }
}

同样，排列也可以切换形式

这是两种对齐方式的比较，可以看到，没什么区别（emmmm，或许是我的例子举得不对）

代码如下：

import { LengthMetrics } from '@kit.ArkUI'

@Entry//要素1：@Entry
@Component//要素2：@Component
struct Index {//要素3：struct
  build() {//要素4：build，注意build函数中如果有组件的话，只能有一个根组件
    Column() {
      Text('主轴对齐方式')
      Flex({ alignItems: ItemAlign.Start }) {
        Text('111').padding(8).backgroundColor(Color.Blue)
        Text('222').padding(8).backgroundColor(Color.Gray)
        Text('333').padding(8).backgroundColor(Color.Red)
        Text('444').padding(8).backgroundColor(Color.Gray)
        Text('555').padding(8).backgroundColor(Color.Green)
      }
        .width('100%')
        .height(100)
        .backgroundColor(Color.Pink)
      Text('交叉轴对齐方式')
      Flex({ justifyContent: FlexAlign.Start }) {
        Text('111').padding(8).backgroundColor(Color.Blue)
        Text('222').padding(8).backgroundColor(Color.Gray)
        Text('333').padding(8).backgroundColor(Color.Red)
        Text('444').padding(8).backgroundColor(Color.Gray)
        Text('555').padding(8).backgroundColor(Color.Green)
      }
        .width('100%')
        .height(100)
        .backgroundColor(Color.Pink)
    }
    .height('100%')
    .width('100%')
  }
}

今天就到这，睡了^v^