鸿蒙 ArkUI 入门：三个核心元素与布局

cdswyy

336人浏览 · 2026-05-27 21:13:59

cdswyy · 2026-05-27 21:13:59 发布

一、ArkUI 是什么？ ArkUI 是鸿蒙（HarmonyOS）的声明式 UI 开发框架。与传统的 Android或 iOS不同，ArkUI 采用声明式语法：你只需描述界面"长什么样"，框架自动将数据变为视图。

二、三个核心元素：页面诞生的三要素

@Entry
@Component
struct Index {
  build() {.......}
}

1. @Entry —— 页面入口

是 ArkUI 的页面的入口，标志这页面可以独立运行，相当于C语言的 main() 函数。

2. @Component ——UI组件

标记是一个 ArkUI 组件，它标志的这个结构体里的 UI 代码，有了他就能显示页面。

3.build() —— 构建方法

所有 UI 组件实现的方法，组件的布局，构建组件的方法，所有样式设置，全部都要在这个方法内部。

三、示例拆解

示例 1：底部导航栏 —— 水平布局入门

@Entry
@Component
struct lianxi3 {
  build() {
    Row({ space: 30 }) {
      Text('首页').fontSize(20).width('19%').height('60%').backgroundColor(Color.Yellow)
      Text('课程').fontSize(20).width('19%').height('60%').backgroundColor(Color.Yellow)
      Text('消息').fontSize(20).width('19%').height('60%').backgroundColor(Color.Yellow)
      Text('我的').fontSize(20).width('19%').height('60%').backgroundColor(Color.Yellow)
    }
    .width('100%')
    .height('10%')
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
    .backgroundColor(Color.Gray)
  }
}

1. Row 容器：子组件从左到右水平排列，space: 30 设置横向间距

2. 百分比宽高： width('19%') 让四个 Tab 等分宽度，height('60%') 让文字只占容器 60% 高度

3. 主轴与交叉轴： ◦ justifyContent(FlexAlign.Center) → 主轴（水平方向）居中 ◦ alignItems(VerticalAlign.Center) → 交叉轴（垂直方向）居中

4. 为Row设置宽度、高度、垂直居中、水平居中、背景颜色设置
示例 2：个人信息展示 —— 垂直布局 + 变量绑定

@Entry
@Component
struct Index {
  xinxi: string = '个人信息中心'
  stuName: string = '李三'
  className: string = '2024级'
  studytime: number = 2407806849

  build() {
    Column({ space: 20 }) {
      Text(`${this.xinxi}`).fontSize(50).fontColor(Color.Black)
      Text(`姓名：${this.stuName}`).fontSize(22).fontColor(Color.Orange)
      Text(`年级：${this.className}`).fontSize(22).fontColor(Color.Red)
      Text(`学号：${this.studytime}`).fontSize(22).fontColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(HorizontalAlign.Center)
  }
}

1. Column 容器：子组件从上到下垂直排列，space: 20 设置纵向间距

2. 显示字符串： ${this.stuName} 是 TypeScript 的字符串插值语法，用反引号 ` 包裹，将变量动态嵌入文本

3. 变量声明： stuName: string = '李三' —— ArkUI 中直接在 struct 内部声明成员变量，然后在 build() 中用 this.stuName访问。与年级和学号一样。

4. FlexAlign.SpaceEvenly：子组件在主轴方向均匀分布，上下留白相等。

5. 颜色：每条信息用不同颜色，体现不同的样式。

示例 3：个人中心按钮页 —— 组件嵌套

@Entry
@Component
struct Index {
  build() {
    Column({ space: 30 }) {
      Text("个人中心页面")
        .fontSize(28)
        .fontWeight(FontWeight.Bold)

      Row({ space: 30 }) {
        Button('编辑资料').width(120).height(45).backgroundColor(0x77DFFD)
        Button('修改密码').width(120).height(45).backgroundColor(0x77DFFD)
      }

      Row({ space: 30 }) {
        Button('查看订单').width(120).height(45).backgroundColor(0x77DFFD)
        Button('退出登录').width(120).height(45).backgroundColor(0x77DFFD)
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor(0xFFFFFFFF)
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}

1. 组件嵌套： Column 内嵌套 Row，实现"标题在上、按钮在下"的布局结构

2. Button 组件： ArkUI 设置按钮组件，支持文字、宽高、颜色等属性

3. ArkUI 中用多种颜色表达方式

4. FlexAlign.Start：内容从顶部开始排列（而非居中），适合表单类页面

5. FontWeight.Bold：粗体标题，增强层次感

四、布局核心：Row 与 Column

布局方式

排列方式

主轴

交叉轴

主轴对齐

交叉轴对齐

Column

从上到下

垂直

水平

justifyContent(FlexAlign.xxx)

alignItems(HorizontalAlign.xxx)

Row

从左到右

水平

垂直

justifyContent(FlexAlign.xxx)

alignItems(VerticalAlign.xxx)

FlexAlign 常用取值

取值	效果
FlexAlign.Start	靠起点（上/左）
`FlexAlign.Center`	居中
`FlexAlign.End`	靠终点（下/右）
`FlexAlign.SpaceBetween`	两端对齐，中间均匀
`FlexAlign.SpaceEvenly`	均匀分布，两端也有空隙
`FlexAlign.SpaceAround`	均匀分布，子项两侧等距