环境及工具
HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发
highlight: arta theme: cyanosis
1、基础入门
在build中里面写代码，预览效果
2、ArkUI基础语法
方舟开发框架（简称：ArkUI）+，是一套 构建HarmonyOS应用 界面 的框架。 构建页面的最小单位就是 "组件"。
组件名(参数) {
内容
}
.属性1()
.属性2()
.属性N()
3.系统常用组件
3.1常用组件
| 组件 | 描述 |
|---|---|
| Text | 显示文本 |
| Image | 显示图片 |
| Column | 列，内容垂直排列 |
| Row | 行，内容水平排列 |
| Button | 按钮 |
3.2通用属性
| 属性 | 描述 |
|---|---|
| width | 宽度 |
| height | 高度 |
| backgroundcolor | 背景色 |
| 示例代码： |
@Entry
@Component
struct Index {
build() {
Column() {
Text('小说简介')
.width('100%')
.height(40)
Row() {
Text('都市')
.width(50)
.height(30)
.backgroundColor(Color.Orange)
Text('生活')
.width(50)
.height(30)
.backgroundColor(Color.Pink)
Text('情感')
.width(50)
.height(30)
.backgroundColor(Color.Yellow)
Text('男频')
.width(50)
.height(30)
.backgroundColor(Color.Gray)
}
// 宽度100%后， 内容居左对齐
.width('100%')
}
}
}
4、文本属性
使用：属性（参数）
| 属性 | 描述 |
|---|---|
| fontSize | 字体大小 |
| fontColor | 字体颜色 |
| fontStyle | 字体样式 |
| fontWeight | 字体粗细 |
| lineHeight | 文本行高 |
| decoration | 文本修饰线及颜色 |
| textAlign | 水平方向Text对齐方式 |
| align | 垂直方向对齐方式 |
| textIndent | 文本首行缩进 |
| textOverflow | 设置文本超长时的显示方式 |
| maxLines | 设置文本的最大行数 |
4.1字体大小
1、默认字体大小为16，单位fp(字体像素)
@Entry
@Component
struct Index {
build() {
Column() {
Text('字体大小')
.fontSize(30)
}
}
}
4.2字体颜色
属性：fontColor(颜色色值)
色值：
- 颜色枚举值：
Color.xx，例如：Color.Pink - 十六进制（HEX）颜色
-
- 纯白色：'#ffffff’或“#fff”
- 纯黑色：'#000000' 或 '#000'
@Entry
@Component
struct Index {
build() {
Column() {
Text('字体颜色1')
.fontColor(Color.Pink)
Text('字体颜色2')
.fontColor('#ff0000')
}
}
}
4.3字体样式
作用：设置字体是否倾斜
属性：fontStyle()
参数：枚举FontStyle
Normal：正常字体（不倾斜）Italic：斜体
@Entry
@Component
struct Index {
build() {
Column() {
Text('倾斜字体')
.fontStyle(FontStyle.Italic)
}
}
}
4.4字体粗细
属性：fontWeight()
参数：
- [100, 900]，取值越大，字体越粗，默认值为 400
- 枚举
FontWeight
-
- Lighter：字体较细
- Normal：字体粗细正常，默认值
- Regular：字体粗细正常
- Medium：字体粗细适中
- Bold：字体较粗
- Bolder：字体非常粗
@Entry
@Component
struct Index {
build() {
Column() {
Text('周杰伦')
.fontWeight(900)
.fontSize(30)
Text('字体粗细')
.fontWeight(FontWeight.Bolder)
.fontSize(30)
Text('字体粗细')
.fontWeight(FontWeight.Bold)
.fontSize(30)
}
}
}
4.5文本行高
作用：设置文本行间距
属性：lineHeight()
@Entry
@Component
struct Index {
build() {
Column() {
Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
.lineHeight(40)
}
}
}
4.6文本修饰
属性：decoration()
参数：{}
- type：修饰线类型，
TextDecorationType（枚举）
-
- None：无
- Underline：下划线
- LineThrough：删除线
- Overline：顶划线
- color：修饰线颜色，可选，默认为黑色
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本修饰线-删除线')
.decoration({
type: TextDecorationType.LineThrough,
color: '#888'
})
.fontColor('#999')
Text('文本修饰线')
.decoration({
type: TextDecorationType.Underline
})
Text('文本修饰线')
.decoration({
type: TextDecorationType.Overline
})
}
}
}
4.7文本水平对齐方式
作用：设置文本在水平方向的对齐方式
属性：textAlign
参数：枚举 TextAlign
- Start：左对齐，默认值
- Center：居中
- End：右对齐
@Entry
@Component
struct Index {
build() {
Column() {
Text('已显示最新内容')
.width(200)
.height(50)
.backgroundColor('#d3f2e3')
.textAlign(TextAlign.Center)
Text('左对齐')
.width(200)
.height(50)
.backgroundColor(Color.Orange)
.textAlign(TextAlign.Start)
Text('右对齐')
.width(200)
.height(50)
.backgroundColor('#d3f2e3')
.textAlign(TextAlign.End)
}
}
}
4.8文本垂直对齐
Text 组件内容默认垂直居中
可使用align属性调整Text组件垂直对齐方式。
属性： align()
参数： 枚举Alignment
| 参数 | 描述 |
|---|---|
| Top | 顶对齐 |
| Center | 垂直居中，默认值 |
| Bottom | 底对齐 |
@Entry
@Component
struct Index {
build() {
Column() {
Text('顶对齐')
.width(200)
.height(100)
.backgroundColor('#d3f2e3')
.textAlign(TextAlign.Center)
// 垂直对齐方式
.align(Alignment.Top)
Text('居中对齐')
.width(200)
.height(100)
.backgroundColor(Color.Orange)
.textAlign(TextAlign.Center)
// 垂直对齐方式
.align(Alignment.Center)
Text('底对齐')
.width(200)
.height(100)
.backgroundColor('#d3f2e3')
.textAlign(TextAlign.Center)
// 垂直对齐方式
.align(Alignment.Bottom)
}
}
}
4.9文本首行缩进
属性：textIndent
参数：数值
@Entry
@Component
struct Index {
build() {
Column() {
Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
.fontSize(14)
.textIndent(28)
}
}
}
4.10文本首行缩进
使用 textOverflow 配合 maxLines 实现文本溢出显示省略号效果
4.10.1文本超长显示
属性：textOverflow
参数：{overflow: TextOverflow}，TextOverflow 为枚举类型
- None：文本超长时裁剪显示
- Clip：文本超长时进行裁剪显示
- Ellipsis：文本超长时显示不下的文本用省略号代替
- MARQUEE：文本超长时以跑马灯的方式展示（滚动显示）
4.10.2最大行数
属性：maxLines
参数：数字
@Entry
@Component
struct Index {
build() {
Column() {
Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
.fontSize(14)
.textIndent(28)
.maxLines(2)
// 超长文本使用省略号代替
.textOverflow({overflow: TextOverflow.Ellipsis})
// 裁剪超长文本
.textOverflow({overflow: TextOverflow.Clip})
// 超长文本滚动显示
.textOverflow({overflow: TextOverflow.MARQUEE})
}
}
}
5.Image组件属性
| 属性 | 描述 |
|---|---|
| width | 宽度（通用属性） |
| height | 高度（通用属性） |
| aspectRatio | 宽高比（通用属性） |
| alt | 加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。 |
| objectFit | 设置图片的填充效果。默认值：ImageFit.Cover |
5.1尺寸控制
width：组件宽度，取值数字或百分比height：组件高度，取值数字或百分比aspectRatio：组件宽高比，宽度/高度
@Entry
@Component
struct Index {
build() {
Column() {
// 本地图片 正方形图添加 aspectRatio 属性，宽高比例为 1:1
Image($r('app.media.cat'))
.width(200)
.aspectRatio(1)
// 网络图片
Image('https://www.itheima.com/images/logo.png')
.width(200)
// 长方形图片设置宽高比1:1, 会导致图片显示不全
.aspectRatio(1)
}
}
}
5.2占位图alt
作用：加载时显示的占位图片
属性：alt
@Entry
@Component
struct Index {
build() {
Column() {
Image('https://www.itheima.com/images/logo.png')
.width(200)
// 加载时显示的占位图
.alt($r('app.media.startIcon'))
}
}
}
5.3图片填充 objectFit
属性：objectFit
参数类型：枚举 ImageFit
- Contain： 图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放）
- Cover： 默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放）
- Fill： 图片缩放至充满组件（不等比缩放）
@Entry
@Component
struct Index {
build() {
Column() {
Image($r('app.media.cat'))
.width(200)
.height(100)
.backgroundColor(Color.Pink)
// 图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放）
.objectFit(ImageFit.Contain)
// 默认：图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放）
.objectFit(ImageFit.Cover)
// 图片缩放至充满组件（不等比缩放）
.objectFit(ImageFit.Fill)
}
}
}
