小白学鸿蒙｜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水平布局的使用场景再掌握文本、按钮等基础组件的样式设置就能快速写出简单的页面。