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