一、ArkUI 的三个重要元素

在鸿蒙 ArkUI 开发中，有三个必须掌握的核心元素，是编写页面的基础：

1. @Entry 页面入口装饰器，作用是标记当前页面为独立可运行的入口页面，相当于程序的main函数，没有它页面无法正常预览和运行。

2. @Component 组件装饰器，用于声明这是一个自定义 UI 组件，是构建页面结构的核心标识。

3. build () 方法 页面构建方法，所有的 UI 布局、组件、样式、颜色、尺寸都必须写在这个方法内部，决定了页面最终的展示效果。

二、常用布局组件

1. 垂直布局 Column

• 布局特点：子组件从上到下垂直排列
• 常用参数：space 设置组件之间的垂直间距
• 常用样式：
  • justifyContent(FlexAlign.Center)：垂直方向居中
  • alignItems(HorizontalAlign.Start)：水平方向左对齐

2. 水平布局 Row

• 布局特点：子组件从左到右水平排列
• 常用参数：space 设置组件之间的水平间距
• 常用样式：
  • justifyContent(FlexAlign.Center)：水平方向居中
  • alignItems(VerticalAlign.Center)：垂直方向居中

三、基础组件与样式

1. Text 文本组件

用于显示文字内容，常用属性：

• fontSize(数值)：设置字体大小
• fontColor(颜色)：设置文字颜色
• textAlign(TextAlign.Center)：文字居中显示

2. Button 按钮组件

用于创建可点击的按钮，常用属性：

• width(数值)：设置按钮宽度
• height(数值)：设置按钮高度
• backgroundColor(颜色)：设置按钮背景色

3. 颜色设置方式

• 内置颜色：Color.Red、Color.Pink、Color.Green等
• 十六进制颜色：0xFFB6C1（浅粉色）、0x77DFFD（浅蓝色）

四、完整代码示例

示例 1：学生信息展示页面

@Entry
@Component
struct Index {
  name: string = 'name';
  zhuanye: string = '计算机应用技术';
  xuehao: string = '1489728';
  nianji: number = 2024;

  build() {
    Column({ space: 20 }) {
      Text(`个人信息中心`)
        .fontSize(40)
        .fontColor(Color.Black)
      Text(`姓名：${this.name}`)
        .fontSize(30)
        .fontColor(Color.Black)
      Text(`专业：${this.zhuanye}`)
        .fontSize(30)
        .fontColor(Color.Green)
      Text(`年级：${this.nianji}级`)
        .fontSize(30)
        .fontColor(Color.Pink)
      Text(`学号：${this.xuehao}`)
        .fontSize(30)
        .fontColor(Color.Red)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .padding(20)
  }
}

示例 2：顶部导航栏

@Entry
@Component
struct NavPage {
  build() {
    Row({ space: 0 }) {
      Text('首页')
        .fontSize(20)
        .backgroundColor(0xFFB6C1)
        .flexGrow(1)
        .textAlign(TextAlign.Center)
      Text('课程')
        .fontSize(20)
        .backgroundColor(0xFFB6C1)
        .flexGrow(1)
        .textAlign(TextAlign.Center)
      Text('消息')
        .fontSize(20)
        .backgroundColor(0xFFB6C1)
        .flexGrow(1)
        .textAlign(TextAlign.Center)
      Text('我的')
        .fontSize(20)
        .backgroundColor(0xFFB6C1)
        .flexGrow(1)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height(50)
  }
}

示例 3：个人中心按钮布局

@Entry
@Component
struct UserCenter {
  build() {
    Column({ space: 50 }) {
      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)
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

五、学习总结

作为一名鸿蒙开发初学者，我发现 ArkUI 并不难上手。只要牢记 @Entry、@Component、build ()三大核心元素，分清Column垂直布局和Row水平布局的使用场景，再掌握文本、按钮等基础组件的样式设置，就能快速写出简单的页面。