ArkUI官方三要素

@Entry：页面入口的装饰器，用于标记当前自定义组件作为页面入口的组件，可以独立运行。---------------main（）

@Component：组件装饰器，用于定义自定义UI组件，被标记的结构体可以用于构建界面视图@build:构建组件的方法，所有的布局内容必须在写这个方法的内部。

arkUI布局

用于容纳，排列子组件的特殊组件，

Column规定从上而下的排列方式，主轴是垂直方向，交叉轴是水平方向 Row从左到右的排列方式，主轴是水平方向，交叉轴是垂直方向

Column 垂直布局

Column 布局核心规则：子组件从上至下依次排列，主轴为垂直方向，交叉轴为水平方向。核心属性：space 纵向间距、justifyContent 主轴垂直对齐、horizontalAlign 交叉轴水平对齐

代码解析

• space：统一设置子组件间距，官方推荐写法，替代手动margin，界面更规整

•justifyContent：主轴（垂直）对齐，包含居顶、居中、居底、均分对齐

• alignItems：交叉轴（水平）对齐，包含左对齐、居中、右对齐

• width/height：布局容器尺寸，铺满屏幕是页面布局基础

• backgroundColor：布局背景色，用于区分页面模块

@Entry
@Component
struct coluperson {
  build(){
    Column({space:30}){
      Text('个人信息中心')
        .fontSize(30)
        .fontWeight(FontWeight.Bolder)
        .margin(10)

      Text('姓名: 张三').fontSize(22)
      Text('专业: 计算机应用技术').fontSize(22)
      Text('年级: 2025级').fontSize(22)
      Text('学号: 208325464').fontSize(22)


    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xf5f5f5)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)

  }

}

代码解析

@Entry // 表示这是页面的入口（第一个加载的页面）

@Component // 表示这是一个组件

struct coluperson { // 定义组件名字：coluperson

build(){ // 所有页面内容必须写在 build 里 }

Column({space:30}){ // 里面的内容会 从上到下 垂直排列 }

Text('个人信息中心')

.fontSize(30) // 字体大小 30

.fontWeight(FontWeight.Bolder) // 字体加粗（最粗）

.margin(10) // 外边距 10（四周留空）

Text('姓名: 张三').fontSize(22)

Text('专业: 计算机应用技术').fontSize(22)

Text('年级: 2025级').fontSize(22)

Text('学号: 208325464').fontSize(22)

.width('100%') // 宽度占满屏幕

.height('100%') // 高度占满屏幕

.backgroundColor(0xf5f5f5) // 背景色：浅灰色

.justifyContent(FlexAlign.Center) // 垂直方向居中

.alignItems(HorizontalAlign.Center) // 水平方向居中

运行代码

Row 水平布局

Row布局核心规则：子组件从左至右依次排列，主轴为水平方向，交叉轴为垂直方向。

核心属性：space横向间距、justifyContent主轴水平对齐、alignItems交叉轴垂直对齐。

代码解析

@Entry // 标记当前组件为页面入口，应用启动后直接渲染该页面

@Component // 标记结构体为ArkTS自定义UI组件，必须包含build方法

struct cr{ // 定义名为cr的UI组件

build() { // 组件核心渲染方法，所有UI元素在此编写 // 纵向布局容器，子元素垂直排列，子组件上下间距30vp

Column({space:30}) {

// 第一行横向布局容器，内部元素水平排列，两个按钮左右间距15vp

Row({space:15}){

// 按钮组件：显示文字左一，设置宽80vp、高55vp、文字字号22fp

Button('左一').width(80).height(55).fontSize(22)

Button('右一').width(80).height(55).fontSize(22) }

.width('100%')                                                   // 当前行宽度占满父容器 .justifyContent(FlexAlign.Start)                          // 水平方向左对齐

// 第二行横向布局容器，按钮间距15vp

Row({space:15}){

Button('左二').width(80).height(55).fontSize(22)

Button('右二').width(80).height(55).fontSize(22)

}

.width('100%')                                          // 行宽铺满父容器

.justifyContent(FlexAlign.Center)             // 水平方向居中对齐

// 第三行横向布局容器，按钮间距15vp

Row({space:15}){

Button('左三').width(80).height(55).fontSize(22)

Button('右三')width(80).height(55).fontSize(22) }

.width('100%')                                             // 行宽铺满父容器

.justifyContent(FlexAlign.End)                    // 水平方向右对齐 }

.height('100%')                                            // 外层纵向容器高度占满全屏

.width('100%')                                              // 外层纵向容器宽度占满全屏 .backgroundColor('0x00dada')                    // 设置页面背景色

.padding(20)                                               // 容器整体内边距20vp，内容与边缘留出间距

   }

}

运行代码

Stack层叠布局

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

tack核心规则：子组件默认居中叠加渲染，后编写的组件覆盖先编写的组件，无固定横竖排列。

核心场景：海报banner、图片文字叠加、头像角标、悬浮按钮、页面水印、弹窗提示。

代码解析

@Entry                                 // 标记为页面入口组件

@Component                      // 声明为自定义UI组件

struct stzckbase{

build() {                                  // UI渲染核心方法

Stack(){                                 // 层叠布局容器，子组件层层叠加显示，默认居中

Text()                                     // 底层文本组件，无文字内容

.width(220)                            // 设置宽度220vp

.height(220)                         // 设置高度220vp

.backgroundColor(Color.Grey)                           // 背景色设为灰色

.borderRadius(30)                                             // 设置圆角为30vp

Text('你好')                                                       // 上层文本组件，显示文字“你好”

.fontSize(40)                                                   // 文字字号40fp

.fontColor(Color.Red)                                    // 文字颜色设为红色

.width(120)                                                   // 设置宽度120vp

.height(120)                                                 // 设置高度120vp

.backgroundColor(Color.Pink)                               // 背景色设为粉色

.borderRadius(30)                                                 // 设置圆角为30vp

.padding({left:15,right:0,top:0,bottom:0})              // 设置左侧内边距15vp，其余方向内边距为0

}

.width('100%')                                                       // 层叠容器宽度铺满父容器

.height('100%')                                                      // 层叠容器高度铺满父容器

   }

}

运行代码

Flex弹性布局

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

Flex核心优势：自适应屏幕宽度，子组件超出自动换行，适配不同尺寸设备。

核心属性：wrap: FlexWrap.Wrap（自动换行）、space统一间距、justifyContent对齐方式。

代码解析

@Entry                                           // 标记为页面入口组件

@Component                                 // 声明自定义UI组件

struct FlexDemo2{ build() {             // UI渲染方法

                          // Flex弹性布局，wrap:FlexWrap.Wrap 表示空间不足时自动换行

Flex({wrap:FlexWrap.Wrap}){

                          // 文本标签，设置内边距、背景色、圆角、字体大小

Text("鸿蒙基础").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16) Text("ArkTs语法").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16) Text("ArkUI布局").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16) Text("组件开发").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16)

Text("页面跳转").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16)

Text("数据存储").padding(15).backgroundColor(0xE8F4FF).borderRadius(5).fontSize(16)

}

.width('100%')                                   // 弹性容器宽度铺满屏幕

.padding(10)                                    // 容器整体内边距10vp

   }

}

运行代码

RelativeContainer相对布局

概述

在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。

RelativeContainer是一种采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于处理界面复杂的场景，对多个子元素进行对齐和排列。子元素可以指定兄弟元素或父容器作为锚点，基于锚点进行相对位置布局。在使用锚点时，需注意子元素的相对位置关系，以避免出现错位或遮挡的情况。下图展示了一个 RelativeContainer的概念图，图中的虚线表示位置的依赖关系。

基本概念

• 参考边界：设置当前组件的哪个边界对齐到锚点。

• 锚点：通过锚点设置当前元素基于哪个元素确定位置。

• 对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

• 链：将一系列组件以首尾相连的方式对齐，可以形成一条链。通过设置链的模式，可以指定链上元素的排列方式。

• 辅助线：辅助线是在容器内虚拟出的额外水平或垂直锚点，便于统一对齐至某个偏移位置。

• 屏障：屏障是指容器内一组指定组件在特定方向上的共同最远边界，例如，一组组件下方的屏障，是指这些组件底部边缘中最底部的那个边界。

代码解析

// @Entry：标记当前组件为页面入口，可在预览器直接显示
@Entry
// @Component：自定义UI组件装饰器
@Component
struct ttt {
  // build函数：页面UI绘制入口，所有布局写在此函数内
  build() {
    // RelativeContainer：鸿蒙相对布局容器，核心是靠id互相参照定位
    RelativeContainer() {
      // 1. 顶部标题文本
      Text('相对布局页面设计')
        .fontSize(40)                // 文字大小40
        .fontWeight(FontWeight.Bolder)// 文字加粗
        .id('title')                 // 设置唯一id，作为其他组件的参照物
        .alignRules({                // 相对定位规则
          // 垂直方向：自身顶部 对齐 父容器顶部
          top: { anchor: '__container__', align: VerticalAlign.Top },
          // 水平方向：自身左侧 对齐 父容器左起点
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .margin(15)                  // 四周外边距15
        .backgroundColor(Color.Red) // 红色背景
  // 2. 第一个按钮：位于标题下方、与标题水平居中
      Button('基础按钮')
        .width(100)
        .height(40)
        .id('buttonid') // 唯一标识
        .alignRules({
          // 垂直：按钮顶部 对齐 title组件的底部
          top: { anchor: 'title', align: VerticalAlign.Bottom },
          // 水平：按钮中线 对齐 title中线，实现居中（原代码错误middle改为center）
          center: { anchor: 'title', align: HorizontalAlign.Center }
        })
        .margin(20) // 四周外边距20

// 3. 提示文本：位于第一个按钮下方、居中对齐
      Text('这个组件依赖于button')
        .fontSize(26)
        .fontColor(Color.Red)
        .id('textid')
        .alignRules({
          // 垂直：文本顶部 对齐 buttonid按钮底部
          top: { anchor: 'buttonid', align: VerticalAlign.Bottom },
          // 水平：文本中线 对齐 buttonid按钮中线
          center: { anchor: 'buttonid', align: HorizontalAlign.Center }
        })
        .margin({ top: 30 }) // 仅顶部外边距30

  // 4. 按钮1：在提示文本下方，右侧对齐文本中线
      Button('基础按钮1')
        .width(150)
        .height(80)
        .fontSize(25)
        .id('buttonid1')
        .alignRules({
          // 垂直：按钮顶部 对齐 textid文本底部
          top: { anchor: 'textid', align: VerticalAlign.Bottom },
          // 水平：按钮右侧 对齐 textid文本中线
          right: { anchor: 'textid', align: HorizontalAlign.Center }
        })
        .margin(20)

   // 5. 按钮2：和按钮1同一水平线，并排放在按钮1右侧
      Button('基础按钮2')
        .width(150)
        .height(80)
        .fontSize(25)
        .id('buttonid2')
        .alignRules({
          // 垂直：按钮2顶部 和 buttonid1顶部平齐
          top: { anchor: 'buttonid1', align: VerticalAlign.Top },
          // 水平：按钮2左侧 对齐 buttonid1右侧
          left: { anchor: 'buttonid1', align: HorizontalAlign.End }
        })
        .margin({ left: 40 }) // 仅左侧外边距40，和按钮1隔开

 // 6. 图片组件：放在按钮1下方，左对齐按钮1
      Image($r('app.media.first'))
        .width('97%')
        .id('image1')
        .alignRules({
          // 垂直：图片顶部 对齐 buttonid1底部
          top: { anchor: 'buttonid1', align: VerticalAlign.Bottom },
          // 水平：图片左侧 对齐 buttonid1左侧起点
          left: { anchor: 'buttonid1', align: HorizontalAlign.Start }
        })
        .margin({ top: 30 }) // 顶部外边距30

    }
    .width('100%')        // 相对容器宽度铺满屏幕
    .height('100%')       // 相对容器高度铺满屏幕
    .backgroundColor(Color.Gray) // 页面整体灰色背景
  }
}