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

小白学鸿蒙｜ArkUI 开发入门笔记

news 2026/5/28 6:41:12

一、ArkUI 的三个重要元素

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

@Entry页面入口装饰器，作用是标记当前页面为独立可运行的入口页面，相当于程序的main函数，没有它页面无法正常预览和运行。
@Component组件装饰器，用于声明这是一个自定义 UI 组件，是构建页面结构的核心标识。
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 = '王亚涵'; zhuanye: string = '计算机应用技术'; xuehao: string = '2408306240'; 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) } }