鸿蒙4.0学习: B站黑马程序员鸿蒙4.0课程学习笔记【黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发】 https://www.bilibili.com/video/BV1Sa4y1Z7B1/?share_source=copy_web&vd_source=bbd4ddb9277ac2a57124a2abf701625f

# 鸿蒙开发HarmonyOS4.0

## 准备工作

### 官网地址

鸿蒙开发者官网：https://developer.huawei.com/consumer/cn/develop/

### 工具下载

打开 [HUAWEI DevEco Studio和SDK下载和升级 | 华为开发者联盟](https://developer.huawei.com/consumer/cn/deveco-studio/) 网站，选择对应的文件点击下载安装即可

![image-20240309203545487](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240309203545487.png)

### 入门案例

安装好之后，选择一个空白项目创建

![image-20240309203635598](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240309203635598.png)

等待工具加载完成，打开这个 pages/Index.ets 文件

![image-20240309203732381](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240309203732381.png)

这个文件是一个入口文件，点击工具的右侧 Previewer 按钮，会出来预览界面，我们在左侧改动代码会实时的在这里显示

![image-20240310193607007](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240310193607007.png)

> 如果点击 Previewer 按钮出来的是一对文字，可以关掉工具，重启一下即可

上面我们修改了文字的颜色，并且给文字添加了一个点击事件，点击之后改变文字的内容为 Hello ArkTS

## 华为手机模拟器安装

安装文档：https://b11et3un53m.feishu.cn/wiki/LGprwXi1biC7TQkWPNDc45IXndh

## ArkUI组件

### Image组件

方式一：加载网络图片

```js
Image("https://pic.rmb.bdstatic.com/bjh/37f17dae02f15085e1becd5954b990839309.jpeg@h_1280")
  .width(300)
```

这种方式需要开通网络访问权限才可以在真机上正常加载

添加网络权限，[更多文档说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/accesstoken-guidelines-0000001493744016-V2)

找到 module.json5 文件，添加如下配置

```json
{
  "module" : {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET" // 开启网络访问权限
      }
    ],
  }
}
```

此时就可正常查看这个图片了

方式二：加载本地文件

```js
// 加载本地文件
Image($r("app.media.icon"))
  .width(300)
  .interpolation(ImageInterpolation.High)
```

app 是固定的开头，media.icon 表示当前图片所在目录，图片的后缀不需要写

`interpolation(ImageInterpolation.High)` 表示抗锯齿效果，可以提高图片的清晰度

![image-20240310201035451](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240310201035451.png)

抗锯齿打开效果

![image-20240310201244187](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240310201244187.png)

抗锯齿关闭效果

![image-20240310201302813](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240310201302813.png)

### Text组件

基本用法

```js
Text("hello world") // 字体内容
    .fontSize(30) // 字体大小
    .fontWeight(FontWeight.Bold) // 字体加粗
    .textAlign(TextAlign.Center) // 水平居中
    .width("100%") // 宽度
    .textCase(TextCase.UpperCase) // 设置字体变大写
    .fontColor("#09c") // 字体颜色
```

配置国际显示

首先在 string.json 文件中定义好键值对

![image-20240310203601950](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240310203601950.png)

英文也对应的配置成一样的

然后基础的 element.string.json 中配置一个name一样的，value无所谓

![image-20240310203709310](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240310203709310.png)

然后可以使用下面方式来展示配置的国际化语言

```ts
Text($r("app.string.Image_width")) // 字体内容
  .fontSize(30) // 字体大小
  .fontWeight(FontWeight.Bold) // 字体加粗
  .textAlign(TextAlign.Center) // 水平居中
  .width("100%") // 宽度
  .textCase(TextCase.UpperCase) // 设置字体变大写
  .fontColor("#09c") // 字体颜色
```

默认根据当前手机系统的语言，显示对应的value值，可以修改系统语言，显示不同的文字

![image-20240310204312982](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240310204312982.png)

### TextInput组件

绑定一个值改变图片宽度

```ts
@Entry
@Component
struct ImagePage {
  @State imageWidth:number = 200
  build() {
    Row(){
      Column(){
        Image($r("app.media.icon"))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)

Text($r("app.string.Image_width"))
          .fontSize(30)

TextInput({
          placeholder:"请输入图片宽度",
          text:this.imageWidth.toString()
        })
          .width(200)
          .type(InputType.Number)
          .onChange(value=>{
            this.imageWidth = value ? parseInt(value) : 20
          })
      }
      .width("100%")
    }
    .height("100%")
  }
}
```

### Button组件

普通用法

```ts
Button("缩小").width(80).type(ButtonType.Circle).stateEffect(true).onClick(()=>{
    if(this.imageWidth >= 10){
        this.imageWidth -= 10
    }
})

Button("放大").width(80).stateEffect(true).margin(10).onClick(()=>{
    if(this.imageWidth < 300){
        this.imageWidth += 10
    }
})
```

type支持的类型

| 类型    | 描述                                 |
| ------- | ------------------------------------ |
| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 |
| Circle  | 圆形按钮。                           |
| Normal  | 普通按钮（默认不带圆角）。           |

![image-20240311135126685](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311135126685.png)

图片按钮

```ts
Button(){
  Image($r("app.media.jian")).width(20).margin(15)
}
.width(80)
.type(ButtonType.Circle)
.stateEffect(true)
.onClick(()=>{
  if(this.imageWidth >= 10){
    this.imageWidth -= 10
  }
})
```

### Slider滑动条

```ts
// 滑块
Slider({
        value: this.imageWidth,
        step: 10,
        min:10,
        max:100,
        // 设置Slider的滑块与滑轨显示样式,
        // OutSet 滑块在滑轨上。
        // InSet 滑块在滑轨内。
        style: SliderStyle.OutSet
	})
    .blockColor("#36D") // 设置滑块的颜色。
    .trackColor("#ececec") // 设置滑轨的背景颜色。
    .selectedColor("#09C") // 设置滑轨的已滑动部分颜色。
    .showSteps(true) // 设置当前是否显示步长刻度值
    .showTips(true) // 设置滑动时是否显示百分比气泡提示。
    .trackThickness(7) // 滑动条的粗细
    .onChange((value: number, mode: SliderChangeMode) => {
        this.imageWidth = parseInt(value.toFixed(0))
    })

```

![image-20240311140942599](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311140942599.png)

### Columl和Row

Column和Row在主轴方向上的对齐方式

![image-20240311142257609](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311142257609.png)

在交叉轴的对齐方式

![image-20240311142428140](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311142428140.png)

### 设置图片大小Demo

```ts
@Entry
@Component
struct ImagePage {
  @State imageWidth:number = 200
  build() {
    Column({
      space:20
    }){
      Row(){
        Image($r("app.media.icon"))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)
      }
      .width("100%")
      .height(350)
      .margin({
        bottom:20
      })
      .justifyContent(FlexAlign.Center)
      .backgroundColor("#ececec")

Row(){
        Text($r("app.string.Image_width"))
          .fontSize(20)
          .margin({
            right:15
          })

TextInput({
          placeholder:"请输入图片宽度",
          text:this.imageWidth.toString()
        })
          .width(200)
          .type(InputType.Number)
          .onChange(value=>{
            this.imageWidth = value ? parseInt(value) : 20
          })
      }

Row(){
        /*文字类型按钮*/
        Button("缩小").width(80).stateEffect(true).onClick(()=>{
          if(this.imageWidth >= 10){
            this.imageWidth -= 10
          }
        })

/*文字类型按钮*/
        Button("放大").width(80).stateEffect(true).margin(10).onClick(()=>{
          if(this.imageWidth < 300){
            this.imageWidth += 10
          }
        })
      }
      .width("80%")
      .justifyContent(FlexAlign.SpaceBetween)

Row(){
        // 滑块
        Slider({
          value: this.imageWidth,
          step: 10,
          min:10,
          max:100,
          // 设置Slider的滑块与滑轨显示样式,
          // OutSet 滑块在滑轨上。
          // InSet 滑块在滑轨内。
          style: SliderStyle.OutSet
        })
          .blockColor("#36D") // 设置滑块的颜色。
          .trackColor("#ececec") // 设置滑轨的背景颜色。
          .selectedColor("#09C") // 设置滑轨的已滑动部分颜色。
          .showSteps(true) // 设置当前是否显示步长刻度值
          .showTips(true) // 设置滑动时是否显示百分比气泡提示。
          .trackThickness(7) // 滑动条的粗细
          .onChange((value: number, mode: SliderChangeMode) => {
            this.imageWidth = parseInt(value.toFixed(0))
          })
      }
      .width("90%")
    }
    .width("100%")
    .height("100%")
  }
}
```

![image-20240311143701924](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311143701924.png)

### List和ForEach

- layoutWeight(1)  样式权重，数值越大，权重越高，会将除了其他低权重区域的高度减掉之后，剩下的都是自己的

```ts
class Item {
  name:string
  price:number
  img:Resource
  discount:number

constructor(name:string,img:Resource,price:number,discount?:number) {
    this.name = name
    this.img = img
    this.price = price
    this.discount = discount
  }
}

@Entry
@Component
struct ItemsPage {
  @State ItemList:Array<Item> = []

// 页面显示时触发
  onPageShow(){
    // 模拟从后端加载数据
    setTimeout(()=>{
      this.ItemList = [
        new Item("华为Meta60",$r("app.media.phone"),6799,500),
        new Item("小米14",$r("app.media.phone"),4999),
        new Item("vivo X100",$r("app.media.phone"),4699),
        new Item("红米K70",$r("app.media.phone"),2799),
        new Item("vivo X100",$r("app.media.phone"),4699),
        new Item("红米K70",$r("app.media.phone"),2799),
        new Item("vivo X100",$r("app.media.phone"),4699),
        new Item("红米K70",$r("app.media.phone"),2799)
      ]
    },2000)
  }

build() {
    Column(){
      // 顶部标题
      Row(){
        Text("百亿补贴")
          .fontSize(30)
          .fontColor(Color.Red)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .height(45)
      .margin({bottom:20})

List({space:15}){
        // 遍历每一个
        ForEach(this.ItemList,(item:Item)=>{
          // List组件内必须用ListItem组件包裹
          ListItem(){
            // 每一个商品卡片
            Row(){
              // 左侧商品图片
              Image(item.img)
                .width("30%")

// 右侧商品信息
              Column({space:10}){
                // 商品名称
                Row(){
                  Text(item.name)
                    .fontSize(25)
                }
                .width("100%")

// 判断是否有折扣
                if(item.discount){
                  // 原价
                  Row(){
                    Text(`原价 ￥${item.price}`)
                      .fontSize(16)
                      .fontColor("#ccc")
                      .decoration({type:TextDecorationType.LineThrough})
                  }
                  .width("100%")

// 折扣价
                  Row(){
                    Text(`补贴 ￥${item.discount}`)
                      .fontSize(18)
                      .fontColor(Color.Red)
                  }
                  .width("100%")

// 现在价格
                  Row(){
                    Text(`折扣价 ￥${item.price - item.discount}`)
                      .fontSize(20)
                      .fontColor(Color.Red)
                  }
                  .width("100%")

}else{
                  // 价格
                  Row(){
                    Text(`折扣价 ￥${item.price}`)
                      .fontSize(20)
                      .fontColor(Color.Red)
                  }
                  .width("100%")
                }
              }
            }
            .width("100%")
            .padding(10)
            .borderRadius(5)
            .alignItems(VerticalAlign.Top)
            .backgroundColor(Color.White)
          }
        })
      }
      .width("100%")
      .layoutWeight(1) // 样式权重，数值越大，权重越高，会将除了其他低权重区域的高度减掉之后，剩下的都是自己的

}
    .padding(15)
    .width("100%")
    .height("100%")
    .backgroundColor("#ececec")
  }
}
```

实现效果

![image-20240311153547454](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311153547454.png)

### Toast

```ts
import promptAction from '@ohos.promptAction'

Button("Toast").onClick(()=>{
    promptAction.showToast({
        message:"消息提示"
    })
})
```

![image-20240324212649298](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240324212649298.png)

## 自定义组件

新建组件 `src/main/ets/components/Header.ets`

```ts
// 定义Header组件
@Component
export struct Header {
  // 定义参数，父组件使用时通过参数传递过来
  private title:string

build() {
    // 顶部标题
    Row(){
      Text(this.title)
        .fontSize(30)
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bold)
    }
    .width("100%")
    .height(45)
  }
}
```

使用方法

```ts
import { Header } from '../components/Header'

@Entry
@Component
struct ItemsPage {
  build() {
    Column(){
      // 引用顶部标题
      Header({title:"百亿补贴"}).margin({bottom:20})
    }
  }
}
```

## 自定义构建函数

### 全局自定义构建函数

可以定义在组件外部，并且可以接受参数

```ts
// 全局自定义构建函数,函数前面加上 @Builder
@Builder function ItemCar(item:Item){
  // 每一个商品卡片
  Row(){
    // 左侧商品图片
    Image(item.img)
      .width("30%")

// ......
  }
}
```

使用方法

```ts
build() {
  Column(){
    Header({title:"百亿补贴"}).margin({bottom:20})

List({space:15}){
      ForEach(this.ItemList,(item:Item)=>{
        ListItem(){
          // 使用自定义构建函数
          ItemCar(item)
        }
      })
    }
  }
}
```

### 局部构建函数

和全局定义构建函数类似，不需要添加 function 关键词，必须和 build 函数同级，不能放在 build 函数内部

```ts
// 局部自定义构建函数
@Builder function ItemCar(item:Item){
  // 每一个商品卡片
  Row(){
    // 左侧商品图片
    Image(item.img)
      .width("30%")

// ......
  }
}
```

使用局部构建函数时要添加 this.xxx

```ts
build() {
  Column(){
    Header({title:"百亿补贴"}).margin({bottom:20})

List({space:15}){
      ForEach(this.ItemList,(item:Item)=>{
        ListItem(){
          // 使用自定义构建函数
          this.ItemCar(item)
        }
      })
    }
  }
}

// 局部自定义构建函数
@Builder function ItemCar(item:Item){
  // 每一个商品卡片
  Row(){
    // 左侧商品图片
    Image(item.img)
      .width("30%")

// ......
  }
}
```

## 样式封装

### 公共样式封装

封装公共样式包含的属性也必须是公共的属性，特殊组件的特殊属性不支持在公共样式内

```ts
// 公共样式封装
@Styles function pageCommonStyle(){
  .padding(15)
  .width("100%")
  .height("100%")
  .backgroundColor("#ececec")
}

@Entry
@Component
struct ItemsPage {
    build() {
      Column() {
        //......
      }.pageCommonStyle() // 使用公共样式
    }
}
```

### 自定义样式封装

可以封装特殊组件的样式

```ts
// 特殊组件的样式封装
@Extend(Text) function textStyle(fontSize:number){
  .fontSize(fontSize)
  .fontColor(Color.Red)
}
```

使用

```ts
// 折扣价
Row() {
    Text(`补贴 ￥${item.discount}`)
        .textStyle(18)
}
.width("100%")

// 现在价格
Row() {
    Text(`折扣价 ￥${item.price - item.discount}`)
        .textStyle(20)
}
.width("100%")
```

## 状态管理

### @State

- @State装饰器标记的变量必须初始化，不能为空值
- @State支持Object，class，string，number，boolean，enum类型以及这些类型的数组
- 嵌套类型以及数组中的对象属性发生变化，无法触发页面更新

```ts
class User{
  name:string
  age:number

constructor(name,age) {
    this.name = name
    this.age = age
  }
}

@Entry
@Component
struct Index {
  @State age: number = 18
  @State jack:User = new User("Jack",19)
  @State gfs:User[] = [
    new User("露丝",18),
    new User("玛丽",20)
  ]

build() {
    Column() {
      // Row(){
      //   Text(`${this.age}`)
      //     .fontSize(25)
      //     .onClick(()=>{
      //       // 基础类型的数据变化可以触发页面更新
      //       this.age++
      //     })
      // }

Row(){
        Text(`${this.jack.name} ${this.jack.age}`)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            // 单层对象的内容是可以实时响应的
            this.jack.age++
          })
      }

Row(){
        Text(`===女友列表===`)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .margin({top:20})
      .justifyContent(FlexAlign.Center)

Row(){
        Button("增加").onClick(()=>{
          // 新增一项也可以触发更新
          this.gfs.push(new User(`女友${this.gfs.length}`,18))
        })
      }

ForEach(this.gfs,(gf:User,index)=>{
        Row(){
          Text(`${gf.name} ${gf.age}`)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .onClick(()=>{
              // 嵌套层级的数据改变，不会触发页面更新
              gf.age++
            })

Button("删除").onClick(()=>{
            // 删除数组可以触发更新
            this.gfs.splice(index,1)
          })
        }
        .margin({top:20})
      })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}
```

![image-20240311175038381](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311175038381.png)

### 任务列表Demo

```ts
// 任务对象
class Task{
  static id = 1
  name:string
  finish:boolean

constructor() {
    this.name = `任务${Task.id++}`
    this.finish = false
  }
}

// 定义卡片公共样式
@Styles function carStyle() {
  .borderRadius(8)
  .shadow({
    radius: 20,
    color: "#bbb",
    offsetX: 3,
    offsetY: 4
  })
  .backgroundColor(Color.White)
  .width("100%")
}

const FinishColor = "#36D"

@Entry
@Component
struct TaskList {
  // 任务总数量
  @State taskTotal:number = 0
  // 已完成数量
  @State finishTotal:number = 0
  // 任务数组
  @State taskList:Task[] = [
    new Task(),
    new Task()
  ]

handleTaskChange(){
    this.taskTotal = this.taskList.length
    this.finishTotal = this.taskList.filter(i=>i.finish).length
  }

onPageShow(){
    this.handleTaskChange()
  }
  
  build() {
    Column() {
      Row(){
        Text("任务列表")
          .fontSize(25)
          .fontWeight(FontWeight.Bold)

// 栈组件，让多个组件堆叠在一起
        Stack(){
          // 进度条
          Progress({
            value:this.finishTotal,
            total:this.taskTotal,
            type:ProgressType.ScaleRing // 设置成环形进度条
          })
            .width(100)
            .color(FinishColor)
            .style({
              strokeWidth:5
            })

Row(){
            Text(`${this.finishTotal}`)
              .fontColor(FinishColor)
              .fontSize(25)

Text(` / ${this.taskTotal}`)
              .fontSize(25)
          }
        }
      }
      .carStyle()
      .padding(35)
      .justifyContent(FlexAlign.SpaceBetween)

Row(){
        Button("添加任务")
          .width(200)
          .margin({top:30,bottom:30})
          .backgroundColor(FinishColor)
          .onClick(()=>{
            this.taskList.push(new Task())
            this.handleTaskChange()
          })
      }

List({space:20}){
        ForEach(this.taskList,(task:Task,index)=> {
          ListItem(){
            Row(){
              if(task.finish){
                Text(`${task.name}`)
                  .fontColor("#ccc")
                  .decoration({ type: TextDecorationType.LineThrough })
              }else{
                Text(`${task.name}`)
              }

Checkbox()
                .select(task.finish)
                .selectedColor(FinishColor)
                .onChange(val=>{
                  task.finish = val
                  this.handleTaskChange()
                })
            }
            .carStyle()
            .padding(20)
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({ // 往左边滑动时出现自定义的构建函数
            end:this.deleteBuilder(index)
          })
        })
      }
      .width("100%")
      .layoutWeight(1)
    }
    .width("100%")
    .height("100%")
    .padding(15)
    .backgroundColor("#ececec")
  }

@Builder deleteBuilder(index){
    Button(){
      Image($r("app.media.deleteIcon"))
        .width(20)
        .interpolation(ImageInterpolation.High)
    }
    .width(40)
    .height(40)
    .margin({left:15})
    .backgroundColor(Color.Red)
    .onClick(()=>{
      this.taskList.splice(index,1)
      this.handleTaskChange()
    })
  }
}
```

实现效果

![tasklist](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/tasklist.gif)

### @Prop和@Link

|                    | @prop                                                        | @LInk                                                        |
| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 同步类型           | 单项同步                                                     | 双向同步                                                     |
| 允许装饰的变量类型 | @Prop只支持string、number、boolean、enum类型<br />父组件是对象类型，子组件是对象属性<br />不可以是数组、any | 父子类型一致：string、number、boolean、enum、object、class、以及他们的数组<br />数组中的元素增、删、改、查等都会引起刷新<br />嵌套类型以及数组中的对象属性无法引起刷新 |
| 初始化方式         | 不允许子组件进行初始化                                       | 父组件传递、禁止子组件进进行初始化                           |

现在我们使用@Prop和@Link将上面的代码进行组件封装

新建 `components/taskComponents/HeaderCar` 定义顶部卡片组件

```ts
const FinishColor = "#36D"
// 定义卡片公共样式
@Styles function carStyle() {
  .borderRadius(8)
  .shadow({
    radius: 20,
    color: "#bbb",
    offsetX: 3,
    offsetY: 4
  })
  .backgroundColor(Color.White)
  .width("100%")
}

@Component
export struct HeaderCar {
  // 定义从父组件接收的字段
  @Prop finishTotal: number
  @Prop taskTotal: number

build() {
    Row(){
      Text("任务列表")
        .fontSize(25)
        .fontWeight(FontWeight.Bold)

// 栈组件，让多个组件堆叠在一起
      Stack(){
        // 进度条
        Progress({
          value:this.finishTotal,
          total:this.taskTotal,
          type:ProgressType.ScaleRing // 设置成环形进度条
        })
          .width(100)
          .color(FinishColor)
          .style({
            strokeWidth:5
          })

Row(){
          Text(`${this.finishTotal}`)
            .fontColor(FinishColor)
            .fontSize(25)

Text(` / ${this.taskTotal}`)
            .fontSize(25)
        }
      }
    }
    .carStyle()
    .padding(35)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
```

新建 `components/taskComponents/TaskListItem` 封装任务列表组件

```ts
class Task{
  static id = 1
  name:string
  finish:boolean

constructor() {
    this.name = `任务${Task.id++}`
    this.finish = false
  }
}

// 定义卡片公共样式
@Styles function carStyle() {
  .borderRadius(8)
  .shadow({
    radius: 20,
    color: "#bbb",
    offsetX: 3,
    offsetY: 4
  })
  .backgroundColor(Color.White)
  .width("100%")
}

const FinishColor = "#36D"

@Component
export struct TaskItem {
  @Link taskTotal: number
  @Link finishTotal: number
  @State taskList: Task[] = []

handleTaskChange(){
    this.taskTotal = this.taskList.length
    this.finishTotal = this.taskList.filter(i=>i.finish).length
  }

build() {
    Column(){
      Button("添加任务")
        .width(200)
        .margin({top:30,bottom:30})
        .backgroundColor(FinishColor)
        .onClick(()=>{
          this.taskList.push(new Task())
          this.handleTaskChange()
        })

Row(){
        List({space:20}){
          ForEach(this.taskList,(task:Task,index)=> {
            ListItem(){
              Row(){
                if(task.finish){
                  Text(`${task.name}`)
                    .fontColor("#ccc")
                    .decoration({ type: TextDecorationType.LineThrough })
                }else{
                  Text(`${task.name}`)
                }

Checkbox()
                  .select(task.finish)
                  .selectedColor(FinishColor)
                  .onChange(val=>{
                    task.finish = val
                    this.handleTaskChange()
                  })
              }
              .carStyle()
              .padding(20)
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({ // 往左边滑动时出现自定义的构建函数
              end:this.deleteBuilder(index)
            })
          })
        }
        .width("100%")
        .layoutWeight(1)
      }
    }
  }

// 自定义删除按钮的构建函数
  @Builder deleteBuilder(index){
    Button(){
      Image($r("app.media.deleteIcon"))
        .width(20)
        .interpolation(ImageInterpolation.High)
    }
    .width(40)
    .height(40)
    .margin({left:15})
    .backgroundColor(Color.Red)
    .onClick(()=>{
      this.taskList.splice(index,1)
      this.handleTaskChange()
    })
  }
}
```

最后父组件引用上面个子组件

```ts
// 任务对象
import { HeaderCar } from '../components/taskComponents/HeaderCar'
import { TaskItem } from '../components/taskComponents/TaskListItem'

@Entry
@Component
struct TaskList {
  // 任务总数量
  @State taskTotal:number = 0
  // 已完成数量
  @State finishTotal:number = 0

onPageShow(){
    // 调用子组件的方法
    TaskItem.prototype.handleTaskChange()
  }
  
  build() {
    Column() {
      // 头部卡片
      HeaderCar({
        taskTotal:this.taskTotal,
        finishTotal:this.finishTotal
      })

// 底部的任务列表组件
      TaskItem({
        taskTotal:$taskTotal,
        finishTotal:$finishTotal
      })
        .layoutWeight(1)
    }
    .width("100%")
    .height("100%")
    .padding(15)
    .backgroundColor("#ececec")
  }
}
```

效果一致

![image-20240311213516805](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240311213516805.png)

### @Provide和@Consume

@Provide和@Consume适用于跨组件传递数据的场景

在父组件定义一个变量，并且用@Provide修饰，然后子组件或者孙子组件使用@Consume修饰接收的变量，然后父组件引用这些子组件时不需要传递参数，子组件可以自动的获取父组件的变量值。并且支持双向同步

代码示例

```ts
@Entry
@Component
struct ProvidePage {
  @Provide name: string = "李四"

build() {
    Column(){
      Row(){
        Text(`父组件的值：${this.name}`)
          .fontSize(30)
      }

// 定义子组件
      NameCom()
    }
  }
}

@Component
struct NameCom {
  @Consume name: string

build(){
    Column(){
      Row(){
        Text(`${this.name}`)
      }

Row(){
        TextInput({
          text:this.name
        })
          .onChange(val => {
            this.name = val
          })
      }
    }
  }
}
```

效果展示

![Provide](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/Provide.gif)

### @Observed和@ObjectLink

上面我们知道，嵌套的字段发生改变时，页面不会刷新。为了解决这个问题，我们就要使用 @Observed和@ObjectLink

现在我们来修改任务列表这个代码，我们发现点击完右侧的复选框后，文字的样式并没有发生变化

修改 `components/taskComponents/TaskListItem`

```ts
@Observed
class Task{
  static id = 1
  name:string
  finish:boolean

constructor() {
    this.name = `任务${Task.id++}`
    this.finish = false
  }
}

// 定义卡片公共样式
@Styles function carStyle() {
  .borderRadius(8)
  .shadow({
    radius: 20,
    color: "#bbb",
    offsetX: 3,
    offsetY: 4
  })
  .backgroundColor(Color.White)
  .width("100%")
}

const FinishColor = "#36D"

@Component
export struct TaskItem {
  @Link taskTotal: number
  @Link finishTotal: number
  @State taskList: Task[] = []

handleTaskChange(){
    this.taskTotal = this.taskList.length
    this.finishTotal = this.taskList.filter(i=>i.finish).length
  }

build() {
    Column(){
      Button("添加任务")
        .width(200)
        .margin({top:30,bottom:30})
        .backgroundColor(FinishColor)
        .onClick(()=>{
          this.taskList.push(new Task())
          this.handleTaskChange()
        })

Row(){
        List({space:20}){
          ForEach(this.taskList,(task:Task,index)=> {
            ListItem(){
              // 每一行组件
              RowItem({
                task:task,
                // 将父组件定义的方法传递给子组件，并绑定this为父组件的this
                handleTaskChange:this.handleTaskChange.bind(this)
              })
            }
            .swipeAction({ // 往左边滑动时出现自定义的构建函数
              end:this.deleteBuilder(index)
            })
          })
        }
        .width("100%")
        .layoutWeight(1)
      }
    }
  }

// 自定义删除按钮的构建函数
  @Builder deleteBuilder(index){
    Button(){
      Image($r("app.media.deleteIcon"))
        .width(20)
        .interpolation(ImageInterpolation.High)
    }
    .width(40)
    .height(40)
    .margin({left:15})
    .backgroundColor(Color.Red)
    .onClick(()=>{
      this.taskList.splice(index,1)
      this.handleTaskChange()
    })
  }
}

@Component
struct RowItem {
  @ObjectLink task:Task
  handleTaskChange: ()=>void

build() {
    Row(){
      if(this.task.finish){
        Text(`${this.task.name}`)
          .fontColor("#ccc")
          .decoration({ type: TextDecorationType.LineThrough })
      }else{
        Text(`${this.task.name}`)
      }

Checkbox()
        .select(this.task.finish)
        .selectedColor(FinishColor)
        .onChange(val=>{
          this.task.finish = val
          this.handleTaskChange()
        })
    }
    .carStyle()
    .padding(20)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
```

给 `class Task` 添加了 @Observe 修饰，然后将每一行做了组件抽离，并接收参数，使用 @ObjectLink 修饰

然后我们需要在RowItem组件中调用父组件的handleTaskChange方法，所以定义了一个handleTaskChange参数，通过父组件传递过来，但是在子组件调用时，this指向会发生变化，所以父组件在传递方法时，使用bind改变这个方法内部的this指向

现在代码的运行效果就是正常的

![Observe](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/Observe.gif)

## 页面路由

1. 页面栈的最大容量上限是32个，使用 `router.clear()` 方法可以清空页面栈，释放内存
2. Router有两种跳转模式，分别为：
   - router.pushUrl()：目标页面不会替换当前页面，而是压入页面栈，因此可以用 `router.back()` 返回当前页面
   - router.replaceUrl()：目标页面会替换当前页面，当前页面会被销毁并释放资源，无法返回当前页面
3. Router有两种页面实例模式，分别是：
   - Standard：标准页面实例，每次跳转都会新建一个目标页面压入页面栈，默认就是此模式
   - Single：单实例模式，如果目标页已经在页面栈中，则距离页面栈顶部最近的同Url页面会被移动到栈顶，并重新加载

修改首页代码

```ts
import router from '@ohos.router'

class RouterItem {
  url: string
  title: string

constructor(url, title) {
    this.url = url
    this.title = title
  }
}

@Entry
@Component
struct Index {
  @State message: string = '页面列表'
  routerList: RouterItem[] = [
    new RouterItem("pages/ImagePage", "查看图片页面"),
    new RouterItem("pages/ItemsPage", "商品列表页面"),
    new RouterItem("pages/StatePage", "Jack和他的女朋友们"),
    new RouterItem("pages/TaskListPage", "任务列表"),
  ]

build() {
    Column() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor("#36d")
          .onClick(() => {
            this.message = "Hello ArkTS"
          })
      }

List({ space: 20 }) {
        ForEach(this.routerList, (r: RouterItem, index: number) => {
          ListItem() {
            RouterItemBox({
              item: r,
              rid: index + 1
            })
          }
        })
      }
      .width("100%")
      .margin({ top: 35 })
      .layoutWeight(1)
    }
    .width('100%')
    .height("100%")
    .padding(15)
  }
}

@Component
struct RouterItemBox {
  item: RouterItem
  rid: number

build() {
    Row() {
      Text(`${this.rid}.`)
        .fontColor(Color.White)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
      Blank()
      Text(`${this.item.title}`)
        .fontColor(Color.White)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
    }
    .width("100%")
    .padding({
      top: 15,
      right: 25,
      bottom: 15,
      left: 25
    })
    .backgroundColor("#36D")
    .borderRadius(30)
    .shadow({
      radius: 8,
      color: "#ff484848",
      offsetX: 5,
      offsetY: 5
    })
    .justifyContent(FlexAlign.SpaceBetween)
    .onClick(() => {
      router.pushUrl(
        {
          url: this.item.url
        },
        router.RouterMode.Single,
        err => {
          if(err){
            console.log(`页面跳转出错，errCode：${err.code}，errMsg：${err.message}`)
          }
        }
      )
    })
  }
}
```

修改公共的Header组件，添加点击返回功能

```ts
// 定义Header组件
import router from '@ohos.router'
@Component
export struct Header {
  // 定义参数，父组件使用时通过参数传递过来
  private title:string

build() {
    // 顶部标题
    Row(){
      Row({space:15}){
        Image($r("app.media.back"))
          .width(30)
          .onClick(()=>{
            // 返回前确认弹框,用户点击确认后，才会继续往下执行代码。否则不会继续往下执行
            router.showAlertBeforeBackPage({
              message:"确认离开当前页面吗?",
            })
            
            // 返回上一页
            router.back()
          })

Text(this.title)
          .fontSize(20)
      }
      Image($r("app.media.refresh"))
        .width(25)
    }
    .width("100%")
    .padding({
      left:15,
      right:15,
      top:15,
      bottom:15
    })
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
```

最后需要配置页面地址，找到 `resources/base/profile/main_pages.json` 文件，添加页面路由信息

```json
{
  "src": [
    "pages/Index",
    "pages/ImagePage",
    "pages/ItemsPage",
    "pages/StatePage",
    "pages/TaskListPage"
  ]
}
```

如果不配置，则不会跳转

另外，在新建时，可以选择新建 Page，这样会自动的往该文件中添加路由信息

![image-20240312154237370](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240312154237370.png)

效果展示

![ohmoRouter2](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/ohmoRouter2.gif)

## 动画

### 属性动画

![image-20240312155633801](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240312155633801.png)

实例代码

```ts
import router from '@ohos.router'

@Entry
@Component
struct AnimationPage {
  // 小鱼坐标
  @State fishX: number = 200
  @State fishY: number = 180
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r("app.media.yu")
  // 是否开始游戏
  @State isBegin: boolean = false
  // 移动速度
  @State speed: number = 20

build() {
    Row() {
      Stack() {
        Button("返回")
          .position({ x: 15, y: 15 })
          .width(80)
          .backgroundColor("#bc515151")
          .onClick(() => {
            router.back()
          })

if (!this.isBegin) {
          Button("开始游戏")
            .onClick(() => {
              this.isBegin = true
            })
        } else {
          Image(this.src)
            .position({ x: this.fishX - 40, y: this.fishY - 40 })
            .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" })
            .width(80)
            .height(80)
            .animation({
              duration: 500, // 动画时长,当上面的动画值发生变化时会触发动画
            })
        }

// 摇杆区域
        if (this.isBegin) {
          Row() {
            Button("←")
              .backgroundColor("#bc515151")
              .onClick(() => {
                this.fishX -= this.speed
                this.src = $r("app.media.yu")
              })

Column({ space: 40 }) {
              Button("↑")
                .backgroundColor("#bc515151")
                .onClick(() => {
                  this.fishY -= this.speed
                })

Button("↓")
                .backgroundColor("#bc515151")
                .onClick(() => {
                  this.fishY += this.speed
                })
            }

Button("→")
              .backgroundColor("#bc515151")
              .onClick(() => {
                this.fishX += this.speed
                this.src = $r("app.media.yuR")
              })
          }
          .width(240)
          .height(240)
          .position({ x: 15, y: 150 })
        }
      }
      .height('100%')
      .width("100%")
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
    .backgroundImage($r("app.media.yuBg"))
    .backgroundImageSize(ImageSize.Cover) // 背景图片铺满
  }
}
```

上面代码完成了小鱼游动的效果，点击上下箭头，可以看到小鱼很平滑的在移动

![image-20240312170542861](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240312170542861.png)

### 显示动画

![image-20240312171446745](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240312171446745.png)

修改上面的代码为显示动画

```ts
Stack() {
  Button("返回")
    .position({ x: 15, y: 15 })
    .width(80)
    .backgroundColor("#bc515151")
    .onClick(() => {
      router.back()
    })

if (!this.isBegin) {
    Button("开始游戏")
      .onClick(() => {
        this.isBegin = true
      })
  } else {
    Image(this.src)
      .position({ x: this.fishX - 40, y: this.fishY - 40 })
      .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" })
      .width(80)
      .height(80)
  }

// 摇杆区域
  if (this.isBegin) {
    Row() {
      Button("←")
        .backgroundColor("#bc515151")
        .onClick(() => {
          // 全局暴露的动画函数，第一个参数设置动画相关内容
          // 第二个是修改的动画值
          animateTo(
            {
              duration: 500
            },
            () => {
              this.fishX -= this.speed
              this.src = $r("app.media.yu")
            })
        })

Column({ space: 40 }) {
        Button("↑")
          .backgroundColor("#bc515151")
          .onClick(() => {
            animateTo(
              {
                duration: 500
              },
              () => {
                this.fishY -= this.speed
              })
          })

Button("↓")
          .backgroundColor("#bc515151")
          .onClick(() => {
            animateTo(
              {
                duration: 500
              },
              () => {
                this.fishY += this.speed
              })
          })
      }

Button("→")
        .backgroundColor("#bc515151")
        .onClick(() => {
          animateTo(
            {
              duration: 500
            },
            () => {
              this.fishX += this.speed
              this.src = $r("app.media.yuR")
            })
        })
    }
    .width(240)
    .height(240)
    .position({ x: 15, y: 150 })
  }
}
.height('100%')
.width("100%")
```

### 组件转场动画

![image-20240312172055505](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240312172055505.png)

为小鱼添加入场动画，修改开始游戏按钮的方法

```ts
if (!this.isBegin) {
  Button("开始游戏")
    .onClick(() => {
      // 点击开始游戏后，使用animateTo控制小鱼开始执行入场动画
      // 注意：必须使用animateTo方法的回调控制变量，才能触发transition动画
      animateTo(
        {
          duration:1000
        },
        ()=>{
          this.isBegin = true
        }
      )
    })
} else {
  Image(this.src)
    .position({ x: this.fishX - 40, y: this.fishY - 40 })
    .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" })
    .width(80)
    .height(80)
     // 添加初始位置，点击开始游戏后，由下面的样式变成上面定义的样式
    .transition({
      type:TransitionType.Insert, // Insert 表示入场动画
      translate:{x:-this.fishX}, // x 轴上的位置，设置为负数，表示从屏幕外面移动到屏幕里面
    })
}
```

效果展示

![transition](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/transition.gif)

### 实现摇杆功能

完整代码

```ts
import router from '@ohos.router'
import curves from '@ohos.curves'

@Entry
@Component
struct AnimationPage {
  // 小鱼坐标
  @State fishX: number = 300
  @State fishY: number = 180
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r("app.media.yuR")
  // 是否开始游戏
  @State isBegin: boolean = false
  // 移动速度
  @State speed: number = 20

// 摇杆中心区域坐标
  centerX: number = 120
  centerY: number = 120

// 大小圆的半径
  maxRadius: number = 100
  radius: number = 20

// 摇杆小圆球的初始位置
  @State positionX: number = this.centerX
  @State positionY: number = this.centerY

// 角度正弦和余弦
  sin: number = 0
  cos: number = 0

taskId: number = 1
  scaleTaskId: number = 1

@State fishScale:number = 1

build() {
    Row() {
      Stack() {
        Button("返回")
          .position({ x: 15, y: 15 })
          .width(80)
          .backgroundColor("#bc515151")
          .onClick(() => {
            router.back()
          })

if (!this.isBegin) {
          Button("开始游戏")
            .onClick(() => {
              // 点击开始游戏后，使用animateTo控制小鱼开始执行入场动画
              // 注意：必须使用animateTo方法的回调控制变量，才能触发transition动画
              animateTo(
                {
                  duration:1000
                },
                ()=>{
                  this.isBegin = true
                }
              )
            })
        } else {
          Image(this.src)
            .position({ x: this.fishX - 40, y: this.fishY - 40 })
            .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" })
            .width(80)
            .height(80)
            .scale({x:this.fishScale,y:this.fishScale})
             // 添加初始位置，点击开始游戏后，由下面的样式变成上面定义的样式
            .transition({
              type:TransitionType.Insert, // Insert 表示入场动画
              translate:{x:-this.fishX}, // x 轴上的位置
            })
            .interpolation(ImageInterpolation.High)

}

// 摇杆区域
        Row() {
          Circle({width:this.maxRadius * 2,height:this.maxRadius * 2})
            .fill("#3a101020")
            .position({x:this.centerX-this.maxRadius,y:this.centerY-this.maxRadius})

Circle({width:this.radius*2,height:this.radius *2})
            .fill("#ffeaa311")
            .position({x:this.positionX-this.radius,y:this.positionY-this.radius})
        }
        .width(240)
        .height(240)
        .justifyContent(FlexAlign.Center)
        .position({ x: 0, y: 120 })
        .onTouch(this.onTouchEvent.bind(this))
      }
      .height('100%')
      .width("100%")
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
    .backgroundImage($r("app.media.yuBg"))
    .backgroundImageSize(ImageSize.Cover) // 背景图片铺满
  }

// 处理摇杆区域的触摸事件
  onTouchEvent(event:TouchEvent){
    // 区分不同的类型
    switch (event.type){
      // 手指松开事件
      case TouchType.Up:
        animateTo(
          {
            curve:curves.springMotion()
          },
          ()=>{
            // 还原小球的位置
            this.positionX = this.centerX
            this.positionY = this.centerY
            // 还原小鱼的倾斜角度
            this.angle = 0
            // 还原小鱼大小
            this.fishScale = 1
          }
        )
        clearInterval(this.taskId)
        clearInterval(this.scaleTaskId)
        break
      // 手指点击事件
      case TouchType.Down:
        // 不断的更新小鱼的位置
        this.taskId = setInterval(()=>{
          this.fishX += this.speed * this.cos
          this.fishY += this.speed * this.sin
        },40)

// 每隔500毫秒让小鱼逐渐变大
        this.scaleTaskId = setInterval(()=>{
          animateTo(
            {
              curve:curves.springMotion()
            },
            ()=>{
              this.fishScale += 0.2
            }
          )
        },500)
        break
      // 手指移动事件
      case TouchType.Move:
        // 1.获取手指位置坐标
        let x = event.touches[0].x
        let y = event.touches[0].y
        // 2.计算手指与中心点坐标的差值
        let vx = x - this.centerX
        let vy = y - this.centerY
        // 3.计算手指与中心点连线和x轴半径的夹角，单位是弧度
        let angle = Math.atan2(vy,vx)
        // 4.计算手指与中心点的距离
        let distance = this.getDistance(vx,vy)
        // 5.计算摇杆小球的坐标
        this.cos = Math.cos(angle)
        this.sin = Math.sin(angle)

animateTo(
          {
            // 设置动画为连续动画
            curve:curves.responsiveSpringMotion()
          },
          ()=>{
            this.positionX = this.centerX + distance * Math.cos(angle)
            this.positionY = this.centerY + distance * Math.sin(angle)
            // 6.计算小鱼的位置
            this.speed = 5
            // 计算角度绝对值，如果小于90则需要翻转图片
            if(Math.abs(angle * 2) < Math.PI){
              this.src = $r("app.media.yuR")
            }else{
              this.src = $r("app.media.yu")
              angle = angle < 0 ? angle + Math.PI : angle - Math.PI
            }

// 弧度转角度计算公式：弧度 * (180 / π)
            this.angle = angle * (180 / Math.PI)
          }
        )
        break
    }
  }

getDistance(x,y){
    // 求平方根,计算两点的距离
    let d = Math.sqrt(x*x + y*y)
    return Math.min(d,this.maxRadius)
  }
}
```

![image-20240313170808603](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313170808603.png)

## Stage模型

### 文档介绍

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/application-configuration-file-overview-stage-0000001428061460-V2

在需要的时候来翻阅文档即可

## 生命周期

### 页面及组件的生命周期

完成流程图

![image-20240313212734129](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313212734129.png)

接下来通过两个案例来查看生命周期函数的执行情况

#### 案例一

首先给首页添加生命周期函数

```ts
import router from '@ohos.router'

class RouterItem {
  url: string
  title: string

constructor(url, title) {
    this.url = url
    this.title = title
  }
}

@Entry
@Component
struct Index {
  @State message: string = '页面列表'
  routerList: RouterItem[] = [
    new RouterItem("pages/ImagePage", "查看图片页面"),
    new RouterItem("pages/ItemsPage", "商品列表页面"),
    new RouterItem("pages/StatePage", "Jack和他的女朋友们"),
    new RouterItem("pages/TaskListPage", "任务列表"),
    new RouterItem("pages/AnimationPage", "小鱼动画"),
    new RouterItem("pages/AnimationPageV2", "小鱼动画V2"),
    new RouterItem("pages/LifeCyclePage", "生命周期案例1"),
    new RouterItem("pages/LifeCyclePage1", "生命周期案例2"),
  ]

tag: string = "Index Page"

aboutToAppear(){
    console.log(`${this.tag} aboutToAppear,页面创建完成`)
  }

onBackPress(){
    console.log(`${this.tag} aboutToAppear,页面返回前触发`)
  }

onPageShow(){
    console.log(`${this.tag} aboutToAppear,页面显示完成`)
  }

onPageHide(){
    console.log(`${this.tag} aboutToAppear,页面隐藏完成`)
  }

aboutToDisappear(){
    console.log(`${this.tag} aboutToAppear,页面销毁完成`)
  }

build() {
    Column() {
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor("#36d")
      }

List({ space: 20 }) {
        ForEach(this.routerList, (r: RouterItem, index: number) => {
          ListItem() {
            RouterItemBox({
              item: r,
              rid: index + 1
            })
          }
        })
      }
      .width("100%")
      .margin({ top: 35 })
      .layoutWeight(1)
    }
    .width('100%')
    .height("100%")
    .padding(15)
  }
}

@Component
struct RouterItemBox {
  item: RouterItem
  rid: number

build() {
    Row() {
      Text(`${this.rid}.`)
        .fontColor(Color.White)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
      Blank()
      Text(`${this.item.title}`)
        .fontColor(Color.White)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
    }
    .width("100%")
    .padding({
      top: 15,
      right: 25,
      bottom: 15,
      left: 25
    })
    .backgroundColor("#36D")
    .borderRadius(30)
    .shadow({
      radius: 8,
      color: "#ff484848",
      offsetX: 5,
      offsetY: 5
    })
    .justifyContent(FlexAlign.SpaceBetween)
    .onClick(() => {
      router.pushUrl(
        {
          url: this.item.url
        },
        router.RouterMode.Single,
        err => {
          if(err){
            console.log(`页面跳转出错，errCode：${err.code}，errMsg：${err.message}`)
          }
        }
      )
    })
  }
}
```

在加载完首页后会触发 `aboutToAppear` 和 `onPageShow`

![image-20240313220640521](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313220640521.png)

然后点击跳转到 `pages/LifeCyclePage`，页面代码如下

```ts
@Entry
@Component
struct LifeCyclePage {
  @State isShow: boolean = false
  @State emptyList: any[] = [0]
  tag: string = "LifeCyclePage"

aboutToAppear() {
    console.log(`${this.tag} aboutToAppear,页面创建完成`)
  }

onBackPress() {
    console.log(`${this.tag} aboutToAppear,页面返回前触发`)
  }

onPageShow() {
    console.log(`${this.tag} aboutToAppear,页面显示完成`)
  }

onPageHide() {
    console.log(`${this.tag} aboutToAppear,页面隐藏完成`)
  }

aboutToDisappear() {
    console.log(`${this.tag} aboutToAppear,页面销毁完成`)
  }

build() {
    Row() {
      Column({ space: 35 }) {
        Button("显示组件")
          .margin({ top: 30 })
          .onClick(() => {
            this.isShow = !this.isShow
          })

if (this.isShow) {
          MyText()
        }

Button("增加组件")
          .onClick(() => {
            this.emptyList.push(this.emptyList.length + 1)
          })

ForEach(this.emptyList, (item,index) => {
          Row({ space: 25 }) {
            MyText()

Button("删除")
              .onClick(() => {
                this.emptyList.splice(index, 1)
              })
          }
          .width("100%")
          .justifyContent(FlexAlign.Center)
        })
      }
      .width('100%')
      .height("100%")
      .alignItems(HorizontalAlign.Center)
    }
    .height('100%')
  }
}

@Component
struct MyText {
  messages: string = "hello world"

tag: string = "MyText"

aboutToAppear() {
    console.log(`${this.tag} aboutToAppear,页面创建完成`)
  }

// 组件没有onBackPress、onPageShow、onPageHide这三个钩子函数
  onBackPress() {
    console.log(`${this.tag} aboutToAppear,页面返回前触发`)
  }

onPageShow() {
    console.log(`${this.tag} aboutToAppear,页面显示完成`)
  }

onPageHide() {
    console.log(`${this.tag} aboutToAppear,页面隐藏完成`)
  }

aboutToDisappear() {
    console.log(`${this.tag} aboutToAppear,页面销毁完成`)
  }

build() {
    Column() {
      Text(this.messages)
    }
  }
}
```

会打印如下

![image-20240313220736436](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313220736436.png)

- 首先调用页面的 aboutToAppear 页面创建钩子
- 然后触发组件的 aboutToAppear 页面创建钩子
- 接着触发首页的 aboutToDisappear 页面销毁钩子
- 最后触发页面的  onPageShow 显示钩子

这时在页面上显示和隐藏组件，或者增加遍历组件，都只会触发组件的  aboutToAppear  创建和  aboutToDisappear  销毁

![image-20240313221014359](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313221014359.png)

这也再次印证了组件是不包含 `onBackPress` 、`onPageShow`、`onPageHide` 这三个页面级别的生命周期函数

然后再返回首页时，会触发下面的钩子

![image-20240313221142154](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313221142154.png)

#### 案例二

首先准备两个页面

LifeCyclePage1.ets

```ts
import router from '@ohos.router'
@Entry
@Component
struct LifeCyclePage1 {
  pageName: string = "LifeCycle Page1"

aboutToAppear() {
    console.log(`${this.pageName} aboutToAppear,页面创建完成`)
  }

onBackPress() {
    console.log(`${this.pageName} aboutToAppear,页面返回前触发`)
  }

onPageShow() {
    console.log(`${this.pageName} aboutToAppear,页面显示完成`)
  }

onPageHide() {
    console.log(`${this.pageName} aboutToAppear,页面隐藏完成`)
  }

aboutToDisappear() {
    console.log(`${this.pageName} aboutToAppear,页面销毁完成`)
  }

build() {
    Column({space:35}) {
      Row(){
        Text(this.pageName)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .margin({top:35})

Row({space:5}){
        Button("push 跳转Page2")
          .onClick(()=>{
            router.pushUrl({
              url:"pages/LifeCyclePage2"
            })
          })

Button("replace 跳转Page2")
          .onClick(()=>{
            router.replaceUrl({
              url:"pages/LifeCyclePage2"
            })
          })
      }
    }
    .height('100%')
    .width("100%")
  }
}
```

LifeCyclePage2.ets

```ts
import router from '@ohos.router'
@Entry
@Component
struct LifeCyclePage2 {
  pageName: string = "LifeCycle Page2"

aboutToAppear() {
    console.log(`${this.pageName} aboutToAppear,页面创建完成`)
  }

onBackPress() {
    console.log(`${this.pageName} aboutToAppear,页面返回前触发`)
  }

onPageShow() {
    console.log(`${this.pageName} aboutToAppear,页面显示完成`)
  }

onPageHide() {
    console.log(`${this.pageName} aboutToAppear,页面隐藏完成`)
  }

aboutToDisappear() {
    console.log(`${this.pageName} aboutToAppear,页面销毁完成`)
  }

build() {
    Column({space:35}) {
      Row(){
        Text(this.pageName)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .margin({top:35})

Row({space:5}){
        Button("push 跳转Page1")
          .onClick(()=>{
            router.pushUrl({
              url:"pages/LifeCyclePage1"
            })
          })

Button("replace 跳转Page1")
          .onClick(()=>{
            router.replaceUrl({
              url:"pages/LifeCyclePage1"
            })
          })
      }
    }
    .height('100%')
    .width("100%")
  }
}
```

首先点击 "push跳转" 按钮，查看打印结果

![image-20240313221952327](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313221952327.png)

> 会发现在不断地触发创建和隐藏钩子，但是没有触发`aboutToDisappear` 页面销毁钩子，这说明通过push方式跳转的页面，系统会帮我们做缓存

接下来点击 “replace跳转” 按钮，查看打印结果

![image-20240313222147108](https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20240313222147108.png)

> 发现通过 replace 跳转会触发上一页面的销毁钩子

## UIAbility的启动模式

### 模式介绍

| 模式类型  | 作用                                                         |
| --------- | ------------------------------------------------------------ |
| singleton | 每一个UIAbility只存在唯一实例。是默认启动模式，任务列表中只会存在一个相同的UIAbility |
| standard  | 每次启动UIAbility都会创建一个实例。任务列表中会存在多个相同的UIAbility |
| specified | 每个UIAbility实例可以设置key标识，启动UIAbility时，需要指定Key，存在相同的Key的实力会直接被拉起，不存在则创建一个新的实例 |

### 案例演示

下面我们来使用一下 specified 模式

首先新建 `pages/DocumentPage.ets` 页面

```ts
import { Header } from '../components/Header'
import common from '@ohos.app.ability.common'
import Want from '@ohos.app.ability.Want'
@Entry
@Component
struct DocumentPage {
  @State index: number = 1
  @State documentList:number[] = []

context = getContext(this) as common.UIAbilityContext

build() { 
    Column() {
      Header({title:"文档列表"})

Column({space:15}){
        Row(){
          Button("添加文档")
            .onClick(()=>{
              this.documentList.push(this.index)

let want:Want = {
                deviceId:"",// deviceId为空表示本设备
                bundleName:"com.example.myapplication", // 包的名称，对应AppScope/app.json5的app.bundleName
                abilityName:"DocumentAbility", // 要跳转到目标ability名称
                moduleName:"entry", // 当前的模块名称
                parameters:{
                  instanceKey: this.index // 传过去的key
                }
              }

// 跳转到一个新的Ability
              this.context.startAbility(want)

this.index++
            })
        }

ForEach(this.documentList,id=>{
          Row({space:15}){
            Image($r("app.media.doc"))
              .width(25)

Text(`文档${id}`)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .onClick(()=>{
                let want:Want = {
                  deviceId:"",// deviceId为空表示本设备
                  bundleName:"com.example.myapplication", // 包的名称，对应AppScope/app.json5的app.bundleName
                  abilityName:"DocumentAbility", // 要跳转到目标ability名称
                  moduleName:"entry", // 当前的模块名称
                  parameters:{
                    instanceKey: id // 传过去的key
                  }
                }
                // 跳转到一个新的Ability
                this.context.startAbility(want)
              })
          }
          .width("100%")
        })
      }
      .width('100%')
      .height('100%')
      .padding(15)
    }
    .width('100%')
    .height('100%')
  }
}
```

接着新建文档编辑页面 `pages/DocumentEdit.ets`

```ts
import Want from '@ohos.app.ability.Want'
import common from '@ohos.app.ability.common'
@Entry
@Component
struct DocumentEdit {
  @State docEdit: boolean = true
  @State docName: string = ""
  context = getContext(this) as common.UIAbilityContext

onPageShow(){
    let abilityInfo = this.context
    console.log(`DocumnetAbility: ${JSON.stringify(abilityInfo)}`)
  }

build() {
    Column() {
      Row({ space: 15 }) {
        Image($r("app.media.back"))
          .width(25)
        .onClick(()=>{
          let want:Want = {
            deviceId:"",// deviceId为空表示本设备
            bundleName:"com.example.myapplication", // 包的名称，对应AppScope/app.json5的app.bundleName
            abilityName:"EntryAbility", // 要跳转到目标ability名称
            moduleName:"entry", // 当前的模块名称
          }
          // 跳转到一个新的Ability
          this.context.startAbility(want)
        })

if(this.docEdit){
          TextInput({
            placeholder: "请输入文档名称",
            text: this.docName
          })
            .onChange(val=>{
              this.docName = val
            })
            .layoutWeight(1)
        }else {
          Text(this.docName)
            .fontSize(25)
            .layoutWeight(1)
        }

Button("确定")
          .onClick(() => {
            this.docEdit = !this.docEdit
          })
      }
      .width('100%')

Row(){
        TextArea({
          placeholder: 'The text area can hold an unlimited amount of text. input your word...',
        })
          .placeholderFont({ size: 16, weight: 400 })
          .fontSize(16)
          .fontColor('#182431')
          .height("98%")
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .padding(15)
  }
}
```

然后再首页中添加跳转按钮

```ts
import router from '@ohos.router'

class RouterItem {
  url: string
  title: string

constructor(url, title) {
    this.url = url
    this.title = title
  }
}

@Entry
@Component
struct Index {
  @State message: string = '页面列表'
  routerList: RouterItem[] = [
    new RouterItem("pages/ImagePage", "查看图片页面"),
    new RouterItem("pages/ItemsPage", "商品列表页面"),
    new RouterItem("pages/StatePage", "Jack和他的女朋友们"),
    new RouterItem("pages/TaskListPage", "任务列表"),
    new RouterItem("pages/AnimationPage", "小鱼动画"),
    new RouterItem("pages/AnimationPageV2", "小鱼动画V2"),
    new RouterItem("pages/LifeCyclePage", "生命周期案例1"),
    new RouterItem("pages/LifeCyclePage1", "生命周期案例2"),
    new RouterItem("pages/DocumentPage", "文档列表页面"),
  ]