鸿蒙开发HarmonyOS4.0入门与实践

课程地址：https://www.bilibili.com/video/BV1Sa4y1Z7B1/

源码地址：https://gitee.com/szxio/harmonyOS4

准备工作

官网地址

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

工具下载

打开 HUAWEI DevEco Studio和SDK下载和升级 | 华为开发者联盟
网站，选择对应的文件点击下载安装即可

入门案例

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

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

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

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

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

华为手机模拟器安装

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

ArkUI组件

Image组件

方式一：加载网络图片

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

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

添加网络权限，更多文档说明

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

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

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

方式二：加载本地文件

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

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

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

抗锯齿打开效果

抗锯齿关闭效果

Text组件

基本用法

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

配置国际显示

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

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

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

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

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

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

TextInput组件

绑定一个值改变图片宽度

@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组件

普通用法

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	普通按钮（默认不带圆角）。

图片按钮

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滑动条

// 滑块
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))
    })

Columl和Row

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

在交叉轴的对齐方式

设置图片大小Demo

@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%")
    }
}

List和ForEach

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

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")
    }
}

实现效果

Toast

import promptAction from '@ohos.promptAction'

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

自定义组件

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

// 定义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)
    }
}

使用方法

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

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

自定义构建函数

全局自定义构建函数

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

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

        // ......
    }
}

使用方法

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

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

局部构建函数

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

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

        // ......
    }
}

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

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%")

        // ......
    }
}

样式封装

公共样式封装

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

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

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

自定义样式封装

可以封装特殊组件的样式

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

使用

// 折扣价
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类型以及这些类型的数组
• 嵌套类型以及数组中的对象属性发生变化，无法触发页面更新

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)
    }
}

任务列表Demo

// 任务对象
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()
            })
    }
}

实现效果

@Prop和@Link

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

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

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

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 封装任务列表组件

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()
            })
    }
}

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

// 任务对象
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")
    }
}

效果一致

@Provide和@Consume

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

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

代码示例

@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
                    })
            }
        }
    }
}

效果展示

@Observed和@ObjectLink

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

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

修改 components/taskComponents/TaskListItem

@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指向

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

页面路由

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

修改首页代码

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组件，添加点击返回功能

// 定义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 文件，添加页面路由信息

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

如果不配置，则不会跳转

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

效果展示

动画

属性动画

实例代码

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) // 背景图片铺满
    }
}

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

显示动画

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

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%")

组件转场动画

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

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 轴上的位置，设置为负数，表示从屏幕外面移动到屏幕里面
        })
}

效果展示

实现摇杆功能

完整代码

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)
    }
}

Stage模型

文档介绍

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

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

生命周期

页面及组件的生命周期

完成流程图

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

案例一

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

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

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

@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)
        }
    }
}

会打印如下

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

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

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

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

案例二

首先准备两个页面

LifeCyclePage1.ets

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

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跳转” 按钮，查看打印结果

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

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

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

UIAbility的启动模式

模式介绍

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

案例演示

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

首先新建 pages/DocumentPage.ets 页面

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

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)
    }
}

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

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", "文档列表页面"),
    ]

    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}`)
                        }
                    }
                )
            })
    }
}

然后再 ets 文件夹右键，选择新建一个 Ability，名称是 DocumentAbility.ts

完成之后会自动帮我们创建好文件，将 DocumentAbility.ts 文件中的默认打开页面修改成文档编辑页面

接着修改 src/main/resources/base/profile/main_pages.json ，设置 DocumentAbility 的启动模式为 specified

然后新建 src/main/ets/myabilitystage/MyAbilityStage.ts 接收key，并返回一个新的key

import AbilityStage from '@ohos.app.ability.AbilityStage';
import Want from '@ohos.app.ability.Want';

export default class MyAbility extends AbilityStage {
    onAcceptWant(want: Want): string {
        // 判断被启动的Ability的名称
        if (want.abilityName === "DocumentAbility") {
            return `DocumentAbility_${want.parameters.instanceKey}`
        }
        return ""
    }
}

然后在 src/main/ets/myabilitystage/MyAbilityStage.ts 中指定 srcEntry

现在启动手机模拟器，查看效果，通过动画我们就实现根据Key打开Ability

网络请求

内置的Httprequest请求

准备node服务

需要安装 express

npm install express

新建 nodeServe/index.js

let express = require('express');
let app = express();
let allData = require("./data.json")
app.use('/images', express.static('images')); // 设置静态资源目录

app.get("/shop", (req, res) => {
    console.log(req.query, '接收的参数')
    let {pageNo, pageSize} = req.query
    // 确保pageNo和pageSize是正整数
    pageNo = Math.max(1, parseInt(pageNo, 10));
    pageSize = Math.max(1, parseInt(pageSize, 10));
    // 计算起始索引和结束索引
    let startIndex = (pageNo - 1) * pageSize;
    let endIndex = startIndex + pageSize;
    // 返回当前页的数据
    let currentPageData = allData.slice(startIndex, endIndex);
    // 返回总页数
    let totalPages = Math.ceil(allData.length / pageSize);
    res.send({
        code: "200",
        data: {
            total: allData.length,
            rows: currentPageData,
            totalPages: totalPages
        }
    })
})

app.listen(3000, () => {
    console.log(`服务启动成功 http://localhost:3000`)
})

准备json数据，新建 data.json 文件，内容如下，这个文件模拟了10条数据

[
  {
    "id": 1,
    "name": "新白鹿烤鱼餐厅(西湖店)",
    "images": [
      "/images/1.jpg"
    ],
    "area": "西湖区",
    "address": "西湖大道1号西湖天地F5",
    "avgPrice": 61,
    "comments": 8045,
    "score": 47,
    "openHours": "11:00-21:00"
  },
  {
    "id": 2,
    "name": "两岸咖啡(下城区店)",
    "images": [
      "/images/2.jpg",
      "/images/3.jpg"
    ],
    "area": "下城区",
    "address": "中山路5号下城区广场F7",
    "avgPrice": 80,
    "comments": 1500,
    "score": 39,
    "openHours": "09:00-23:00"
  },
  {
    "id": 3,
    "name": "味庄餐厅(上城区店)",
    "images": [
      "/images/4.jpg",
      "/images/5.jpg"
    ],
    "area": "上城区",
    "address": "清泰街5号上城区购物中心F4",
    "avgPrice": 55,
    "comments": 5689,
    "score": 43,
    "openHours": "11:00-21:00"
  },
  {
    "id": 4,
    "name": "杭州小笼包(拱墅区店)",
    "images": [],
    "area": "拱墅区",
    "address": "莫干山路2号拱墅区购物中心F2",
    "avgPrice": 48,
    "comments": 4500,
    "score": 42,
    "openHours": "07:00-21:00"
  },
  {
    "id": 5,
    "name": "咖啡时光(江干区店)",
    "images": [],
    "area": "江干区",
    "address": "钱塘路10号江干区广场F1",
    "avgPrice": 75,
    "comments": 3200,
    "score": 41,
    "openHours": "10:00-22:00"
  },
  {
    "id": 6,
    "name": "大福来餐厅(滨江店)",
    "images": [],
    "area": "滨江区",
    "address": "江南大道6号滨江购物中心F6",
    "avgPrice": 68,
    "comments": 2900,
    "score": 40,
    "openHours": "11:30-21:30"
  },
  {
    "id": 7,
    "name": "老杭州餐厅(下城区店)",
    "images": [],
    "area": "下城区",
    "address": "中山路3号下城区广场F3",
    "avgPrice": 58,
    "comments": 6500,
    "score": 45,
    "openHours": "10:30-20:30"
  },
  {
    "id": 8,
    "name": "豪客来牛排馆(江干区店)",
    "images": [],
    "area": "江干区",
    "address": "钱塘路8号江干区广场F8",
    "avgPrice": 95,
    "comments": 1200,
    "score": 38,
    "openHours": "11:00-21:00"
  },
  {
    "id": 9,
    "name": "小尾羊火锅(上城区店)",
    "images": [],
    "area": "上城区",
    "address": "清泰街10号上城区购物中心F10",
    "avgPrice": 70,
    "comments": 0,
    "score": 37,
    "openHours": "11:00-21:00"
  },
  {
    "id": 10,
    "name": "新概念咖啡(下城区店)",
    "images": [],
    "area": "下城区",
    "address": "中山路12号下城区广场F8",
    "avgPrice": 50,
    "comments": 1000,
    "score": 36,
    "openHours": "08:00-22:00"
  }
]

然后启动 node 服务

node index.js

测试服务是否正常运行

viewModel

新建 src/main/ets/viewModel，这个文件用来放所有页面模型数据

在该文件夹下添加如下文件

ShopInfo.ts

export default class ShopInfo {
    id: number
    name: string
    images: string[]
    area: string
    address: string
    avgPrice: number
    comments: number
    score: number
    openHours: string
}

ResponseInfo.ts

class responseData {
    total: number
    totalPages: number
    rows: any[]
}

export default class ResponseInfo {
    code: number
    data: responseData
}

model

新建 src/main/ets/model 文件夹，这个文件夹用来放有关请求的文件

在该文件夹下新增

ShopModel.ts

import http from '@ohos.net.http'
import ResponseInfo from '../viewModel/ResponseInfo'

class ShopModel {
    pageNo: number = 1
    pageSize: number = 3
    baseUrl: string = "http://localhost:3000"

    buildUrl(url) {
        return `${this.baseUrl}${url}`
    }

    getListFun(): Promise<ResponseInfo> {
        return new Promise((resolve, reject) => {
            // 1.创建Http请求对象
            let httpRequest = http.createHttp()
            // 2.发送请求体
            httpRequest.request(
                // 请求路径
                this.buildUrl(`/shop?pageNo=${this.pageNo}&pageSize=${this.pageSize}}`),
                // 请求体
                {
                    method: http.RequestMethod.GET,  // 请求方式
                })
                .then(res => {
                    // 3.拿到请求结果
                    if (res.responseCode === 200) {
                        resolve(JSON.parse(res.result.toString()))
                    } else {
                        console.log(`请求失败：${JSON.stringify(res)}`)
                        reject()
                    }
                })
                .catch(err => {
                    console.log(`请求失败：${JSON.stringify(err)}`)
                    reject()
                })
        })
    }
}

export default new ShopModel()

pages

新建页面 ShopPage.ets

import {Header} from '../components/Header'
import ShopInfo from '../viewModel/ShopInfo'
import {ShopItem} from '../views/ShopItem'
import ShopModel from "../model/ShopModel"

@Entry
@Component
struct
ShopPage
{
@State
    shopList
:
    ShopInfo[] = []
@State
    total
:
    number = 0
@State
    isLoading
:
    boolean = false

    aboutToAppear()
    {
        this.getShopList()
    }

    build()
    {
        Column()
        {
            Header({title: "商铺列表"})

            List({space: 10})
            {
                ForEach(this.shopList, (shop: ShopInfo, index: number) => {
                    ListItem()
                    {
                        ShopItem({shop: shop})
                    }
                })
            }
        .
            layoutWeight(1)
                .width('100%')
                .padding(10)
                .onReachEnd(() => {
                    console.log("触底")
                    // 页面触底方法
                    if (!this.isLoading && this.shopList.length < this.total) {
                        this.isLoading = true
                        ShopModel.pageNo++
                        this.getShopList()
                        console.log("触底加载")
                    }
                })

        }
    .
        width('100%')
            .height('100%')
            .backgroundColor("#ececec")
    }

    getShopList()
    {
        ShopModel.getListFun().then(res => {
            const shops = res.data.rows
            shops.forEach(item => {
                if (item.images && item.images.length > 0) {
                    item.images.forEach((img, i) => {
                        item.images[i] = `http://localhost:3000` + img
                    })
                } else {
                    item.images = [$r("app.media.mt")]
                }
            })

            this.shopList = this.shopList.concat(shops)
            this.total = res.data.total // 获取总数
            this.isLoading = false
        })
    }
}

里面用到了 ShopItem 组件，代码如下

view

新建 src/main/ets/views 文件夹，我们将页面用到的组件都放在这个文件夹中

新增 ShopItem.ets

import ShopInfo from '../viewModel/ShopInfo'

@Component
export
struct
ShopItem
{
    shop: ShopInfo

    build()
    {
        Column({space: 8})
        {
            Row()
            {
                Text(this.shop.name)
                    .fontSize(20)
                    .fontWeight(FontWeight.Bold)

                Text(`${this.computedScore(this.shop.score)}分`)
                    .fontColor(Color.Orange)
                    .fontSize(21)
                    .fontWeight(FontWeight.Bold)
            }
        .
            width("100%")
                .justifyContent(FlexAlign.SpaceBetween)

            Row({space: 5})
            {
                Image($r("app.media.dh"))
                    .width(15)

                Text(this.shop.address)
                    .fontColor("#a3a3a3")
            }
        .
            width("100%")

            Row()
            {
                Text(`${this.shop.comments}条评价`)
                    .fontSize(18)
                    .fontWeight(FontWeight.Bold)

                Text(`￥ ${this.shop.avgPrice}/人`)
                    .fontSize(18)
                    .fontWeight(FontWeight.Bold)
            }
        .
            width("100%")
                .justifyContent(FlexAlign.SpaceBetween)

            List({space: 10})
            {
                ForEach(this.shop.images, src => {
                    ListItem()
                    {
                        Image(src)
                            .width(150)
                            .borderRadius(5)
                    }
                })
            }
        .
            width("100%")
                .listDirection(Axis.Horizontal) // 水平滑动
        }
    .
        width("100%")
            .padding(15)
            .borderRadius(15)
            .backgroundColor(Color.White)
    }

    computedScore(score
:
    number
)
    {
        return (score / 10).toFixed(1)
    }
}

实现效果

总结

上面商铺列表的核心请求逻辑在 ShopModel.ts 文件中，主要代码利用了内置的 httpRequest 来完成请求

// 1.创建Http请求对象
let httpRequest = http.createHttp()
// 2.发送请求体
httpRequest.request(
    // 请求路径
    this.buildUrl(`/shop?pageNo=${this.pageNo}&pageSize=${this.pageSize}}`),
    // 请求体
    {
        method: http.RequestMethod.GET,  // 请求方式
    }
)
    .then(res => {
        // 3.拿到请求结果
        if (res.responseCode === 200) {
            resolve(JSON.parse(res.result.toString()))
        } else {
            console.log(`请求失败：${JSON.stringify(res)}`)
            reject()
        }
    })
    .catch(err => {
        console.log(`请求失败：${JSON.stringify(err)}`)
        reject()
    })

第三方库Axios使用

工具安装

首先需要安装一个命令行工具

打开官网相关文档
，点击如下按钮

选择自己的系统进行下载

下载好之后，进入ohpm/bin 目录下，执行 init.bat

然后等待安装完成后，输入 ohpm -v 查看版本

接着配置环境变量

将 bin 目录的位置添加到环境变量中

然后再随便目录下查看版本

可以出现版本号表示安装成功

安装axios

打开**OpenHarmony三方库中心仓**网站，搜索 axios 即可查看安装和使用方式

在项目根目录下执行

ohpm install @ohos/axios

项目中使用

首先简单封装一下 axios，新建 src/main/ets/utils/service.ts

import axios from '@ohos/axios'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: "http://localhost:3000",
    // 超时1分钟
    timeout: 1000 * 60 * 60,
})

// request拦截器
service.interceptors.request.use(
    (config) => {
        return config
    },
    (error) => {
        Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    (res) => {
        // 二进制数据则直接返回
        if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
            return res.data
        }
        return res.data
    },
    (error) => {
        return Promise.reject(error)
    }
)

export default service

然后新建接口请求api文件，这个文件用来放所有的请求部分

src/main/ets/api/ShopModelApi.ts

import service from "../utils/service"

/**
 * 获取商铺列表方法
 * @param pageNo
 * @param pageSize
 * @returns
 */
export function getShopModelListFun(pageNo, pageSize) {
    return service({
        url: "/shop",
        method: "get",
        params: {
            pageNo,
            pageSize
        }
    })
}

然后修改 src/main/ets/model/ShopModel.ts，使用我们上面写好的方法来加载数据

import {getShopModelListFun} from '../api/ShopModelApi'

class ShopModel {
    pageNo: number = 1
    pageSize: number = 3

    getListFun() {
        return getShopModelListFun(this.pageNo, this.pageSize)
    }
}

export default new ShopModel()

应用数据持久化

首选项实现轻量级数据持久化

场景介绍

用户首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。当用户希望有一个全局唯一存储的地方，可以采用用户首选项来进行存储。Preferences会将该数据缓存在内存中，当用户读取的时候，能够快速从内存中获取数据。Preferences会随着存放的数据量越多而导致应用占用的内存越大，因此，Preferences不适合存放过多的数据，适用的场景一般为应用保存用户的个性化设置（字体大小，是否开启夜间模式）等。

运作机制

如图所示，用户程序通过JS接口调用用户首选项读写对应的数据文件。开发者可以将用户首选项持久化文件的内容加载到Preferences实例，每个文件唯一对应到一个Preferences实例，系统会通过静态容器将该实例存储在内存中，直到主动从内存中移除该实例或者删除该文件。

应用首选项的持久化文件保存在应用沙箱内部，可以通过context获取其路径。具体可见获取应用开发路径
。

约束限制

• Key键为string类型，要求非空且长度不超过80个字节。
• 如果Value值为string类型，可以为空，不为空时长度不超过8192个字节。
• 内存会随着存储数据量的增大而增大，所以存储的数据量应该是轻量级的，建议存储的数据不超过一万条，否则会在内存方面产生较大的开销。

使用方法

封装 PreferenceUtils 文件，添加操作缓存的几个方法。新建 src/main/ets/utils/PreferencesUtils.ts

import dataPreferences from '@ohos.data.preferences';

class PreferencesUtils {
    private prefMap: Map<string, dataPreferences.Preferences> = new Map()

    /**
     * 加载Preference
     * @param context 上下文实例
     * @param name 每个Preferences实例的唯一标识
     */
    async onLoadPreferences(context, name: string) {
        try {
            // 创建Preference实例
            let pre = await dataPreferences.getPreferences(context, name)
            // 将得到的Preference保存到一个map中
            this.prefMap.set(name, pre)
            console.log("test-preference", `创建【preference ${name}】成功`)
        } catch (e) {
            console.log("test-preference", `创建【preference ${name}】失败`, JSON.stringify(e))
        }
    }

    /**
     * 保存缓存数据
     * @param name preference唯一表示
     * @param key 缓存的键名
     * @param value 缓存的键值
     */
    async putPreferences(name: string, key: string, value: dataPreferences.ValueType) {
        const pref = this.prefMap.get(name)
        if (!pref) {
            console.log("test-preferences", `preferences:【${name}】实例不存在`)
            return
        }
        try {
            // 写入数据
            await pref.put(key, value)
            // 刷入磁盘
            await pref.flush()
            console.log("test-preferences", `保存【${key} = ${value}】成功`)
        } catch (e) {
            console.log("test-preferences", `保存【${key} = ${value}】失败`, JSON.stringify(e))
        }
    }

    /**
     * 读取缓存数据
     * @param name preference唯一表示
     * @param key 读取的键名
     * @param defValue 当键名不存在时默认的返回值
     * @returns
     */
    async getPreferences(name: string, key: string, defValue: dataPreferences.ValueType) {
        const pref = this.prefMap.get(name)
        if (!pref) {
            console.log("test-preferences", `preferences:【${name}】实例不存在`)
            return
        }
        try {
            let value = await pref.get(key, defValue)
            console.log("test-preferences", `读取【${key} = ${value}】成功`)
            return value
        } catch (e) {
            console.log("test-preferences", `读取【${key}】失败`, JSON.stringify(e))
        }
    }

    /**
     * 删除指定key的缓存数据
     * @param name preference唯一表示
     * @param key 要删除的键名
     */
    async deletePreferences(name: string, key: string) {
        const pref = this.prefMap.get(name)
        if (!pref) {
            console.log("test-preferences", `preferences:【${name}】实例不存在`)
            return
        }
        try {
            await pref.delete(key)
            console.log("test-preferences", `删除【${key}】成功`)
        } catch (e) {
            console.log("test-preferences", `删除【${key}】失败`, JSON.stringify(e))
        }
    }

    /**
     * 监听缓存变化
     * @param name preference唯一表示
     * @param callback 缓存变化后触发的回调，会通过参数传递当前变化的key
     */
    async onPreferences(name: string, callback) {
        const pref = this.prefMap.get(name)
        if (!pref) {
            console.log("test-preferences", `preferences:【${name}】实例不存在`)
            return
        }
        pref.on("change", callback)
    }
}

export default new PreferencesUtils()

然后再应用Ability启动时，去获取 Preference 实例

然后修改首页，增加了控制字体大小的功能，并且将修改后的结果保存到缓存中，重新启动时会从缓存读取上次保存的字体大小

新增一个控制字体大小的组件 src/main/ets/views/IndexFontSizePanel.ets

import PreferenceUtils from "../utils/PreferencesUtils"

@Component
export
struct
IndexFontSizePanel
{
@Consume
    fontSize
:
    number

    fontSizeMap:object = {
        14: "小",
        16: "标准",
        18: "大",
        20: "特大"
    }

    build()
    {
        Column({space: 10})
        {
            Row()
            {
                Text(`${this.fontSizeMap[this.fontSize]}`)
                    .fontSize(this.fontSize)
            }
        .
            width("100%")
                .height(20)
                .justifyContent(FlexAlign.Center)

            Row({space: 10})
            {
                Text(`A`).fontSize(14).fontWeight(FontWeight.Bold)

                Slider({
                    min: 14,
                    max: 20,
                    step: 2,
                    value: this.fontSize
                })
                    .onChange(val => {
                        this.fontSize = val
                        // 修改字体大小后将最新值保存到缓存中
                        PreferenceUtils.putPreferences("MyPreference", "fontSize", val)
                    })
                    .layoutWeight(1)
                    .trackThickness(6)

                Text(`A`).fontSize(20).fontWeight(FontWeight.Bold)
            }
        .
            width("100%")
                .padding({left: 5, right: 5})
        }
    .
        width("100%")
            .padding(10)
            .backgroundColor('#fff1f0f0')
            .borderRadius(20)
    }
}

然后再IndexPages中使用

import RouterItem from '../viewModel/RouterItem'
import {IndexFontSizePanel} from '../views/IndexFontSizePanel'
import {RouterItemBox} from '../views/RouterItemBox'
import PreferenceUtils from "../utils/PreferencesUtils"

const 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", "文档列表页面"),
    new RouterItem("pages/ShopPage", "商铺列表"),
]

@Entry
@Component
struct
Index
{
@State
    message
:
    string = '页面列表'
    tag: string = "Index Page"
@State
    isShowPanel
:
    boolean = false
@Provide
    fontSize
:
    number = 16

    // 页面加载成功后，从缓存中读取fontSize
    async
    aboutToAppear()
    {
        this.fontSize = await PreferenceUtils.getPreferences("MyPreference", "fontSize", 16) as number
    }

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

                Image($r("app.media.settingPng"))
                    .width(25)
                    .onClick(() => {
                        animateTo({
                            duration: 500,
                            curve: Curve.EaseOut
                        }, () => {
                            this.isShowPanel = !this.isShowPanel
                        })
                    })
            }
        .
            width("100%")
                .justifyContent(FlexAlign.SpaceBetween)
                .padding(10)

            List({space: 10})
            {
                ForEach(routerList, (r: RouterItem, index: number) => {
                    ListItem()
                    {
                        RouterItemBox({
                            item: r,
                            rid: index + 1
                        })
                    }
                })
            }
        .
            width("100%")
                .layoutWeight(1)
                .padding(10)

            if (this.isShowPanel) {
                IndexFontSizePanel()
                    .transition({
                        translate: {y: 115}
                    })
            }
        }
    .
        width('100%')
            .height("100%")
    }
}

注意：首选项缓存只能在模拟器或者真机中有效

关系型数据库

官方文档

新建页面

新建页面 src/main/ets/pages/TaskSqlPage.ets

import {Header} from '../components/Header'
import {HeaderCar} from '../views/task/HeaderCar'
import {TaskItem} from '../views/task/TaskListItem'

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

    build()
    {
        Column()
        {
            Header({title: "任务列表SQL版本"})

            Column()
            {
                // 头部卡片
                HeaderCar({
                    taskTotal: this.taskTotal,
                    finishTotal: this.finishTotal
                })

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

views/task/HeaderCar

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)
    }
}

src/main/ets/views/task/TaskListItem.ets

import {Task} from '../../viewModel/TaskInfo'
import {TaskDialog} from './TaskDialog'
import {RowItem} from './TaskRowItem'
import taskModel from "../../model/TaskModel"

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

    // 任务弹框
    dialogController: CustomDialogController = new CustomDialogController({
        builder: TaskDialog({
            onTaskConfirm: this.addTaskName.bind(this)
        }),
    })

    aboutToAppear()
    {
        console.log("test-tag:TaskItem onPageShow")
        taskModel.getTaskList().then(res => {
            this.taskList = res
            console.log("test-tag:查询数据", JSON.stringify(this.taskList))
            this.handleTaskChange()
        })
    }

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

    addTaskName(taskName
:
    string
)
    {
        taskModel.addTask(taskName)
            .then(() => {
                console.log(`test-tag:添加任务成功：${taskName}`)
                this.taskList.push(new Task(1, taskName))
                this.handleTaskChange()
            })
            .catch(err => {
                console.log(`test-tag:添加任务失败：${JSON.stringify(err)}`)
            })

    }

    build()
    {
        Column()
        {
            Row()
            {
                Button("添加任务")
                    .width(200)
                    .margin({top: 30, bottom: 30})
                    .backgroundColor("#36D")
                    .onClick(() => {
                        this.dialogController.open()
                    })
            }

            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, task.id)
                    })
                })
            }
        .
            width("100%")
                .layoutWeight(1)
        }
    }

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

添加弹框组件

src/main/ets/views/task/TaskDialog.ets

@CustomDialog
export
struct
TaskDialog
{
    controller: CustomDialogController
    // 任务名称
    name: string
    // 点击确认后触发的事件
    onTaskConfirm: (name: string) => void

        build()
    {
        Column({space: 20})
        {
            Row()
            {
                TextInput({
                    placeholder: "请输入任务名称",
                    text: this.name
                })
                    .onChange(val => {
                        this.name = val
                    })
            }
        .
            width("100%")

            Row()
            {
                Button("取消")
                    .backgroundColor(Color.Gray)
                    .width("100")
                    .onClick(() => {
                        this.controller.close()
                    })

                Button("确定")
                    .backgroundColor("#36d")
                    .fontColor(Color.White)
                    .width("100")
                    .onClick(() => {
                        // 对外触发确认事件，并发送填写的任务名称
                        this.onTaskConfirm(this.name)
                        this.controller.close()
                    })
            }
        .
            width("100%")
                .justifyContent(FlexAlign.SpaceAround)
        }
    .
        width('100%')
            .padding(20)
    }
}

src/main/ets/views/task/TaskRowItem.ets

import {Task} from '../../viewModel/TaskInfo'

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

@Component
export
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("#036D")
                .onChange(val => {
                    this.task.finish = val
                    this.handleTaskChange()
                })
        }
    .
        carStyle()
            .padding(20)
            .justifyContent(FlexAlign.SpaceBetween)
    }
}

封装接口方法

src/main/ets/model/TaskModel.ets

import relationalStore from "@ohos.data.relationalStore"
import {Task} from '../viewModel/TaskInfo';

class TaskModel {
    // 数据库实例
    private rdbStore: relationalStore.RdbStore
    // 表名称
    private tableName: string = 'TASK'

    /**
     * 初始化数据库
     * @param context 上下文
     */
    initTaskDB(context) {
        // rdb配置
        const config = {
            name: "Task.db", // 数据库文件名，也是数据库唯一标识符。
            securityLevel: relationalStore.SecurityLevel.S1
        };
        // 创建数据库的SQL语句
        const sql = `CREATE TABLE IF NOT EXISTS TASK (
                  ID INTEGER PRIMARY KEY AUTOINCREMENT,
                  NAME TEXT NOT NULL,
                  FINISH bit
                 )`
        relationalStore.getRdbStore(context, config, (err, rdbStore) => {
            if (err) {
                console.log("test-tag", `数据库Task.db创建失败`)
                return
            }
            // 执行SQL
            rdbStore.executeSql(sql)
            // 保存rdb
            this.rdbStore = rdbStore
            console.log(`test-tag 初始化数据库成功`)
        })
    }


    /**
     * 查询数据
     */
    async getTaskList() {
        // 1.构建查询条件
        let predicates = new relationalStore.RdbPredicates(this.tableName)
        // 2.查询
        let result = await this.rdbStore.query(predicates, ['ID', 'NAME', 'FINISH'])
        // 3.解析查询结果
        // 3.1.定义一个数组，组装最终的查询结果
        let tasks: Task[] = []
        // 3.2.遍历封装
        while (!result.isAtLastRow) {
            // 3.3.指针移动到下一行
            result.goToNextRow()
            // 3.4.获取数据
            let id = result.getLong(result.getColumnIndex('ID'))
            let name = result.getString(result.getColumnIndex('NAME'))
            let finish = result.getLong(result.getColumnIndex('FINISH'))
            // 3.5.封装到数组
            tasks.push({id, name, finish: !!finish})
        }
        console.log('test-tag', '查询到数据：', JSON.stringify(tasks))
        return tasks
    }

    /**
     * 添加任务
     * @param name 任务名称
     */
    async addTask(name: string) {
        return await this.rdbStore.insert(this.tableName, {
            name,
            finish: false
        })
    }

    /**
     * 更新数据
     * @param id
     * @param finish
     * @returns
     */
    async updateTaskById(id: number, finish: boolean) {
        // 1 要更新的数据
        let data = {finish}
        // 2 创建条件构造器
        let predicates = new relationalStore.RdbPredicates(this.tableName)
        // 3 先找到这个数据
        predicates.equalTo("ID", id)
        // 4 更新
        return await this.rdbStore.update(data, predicates)
    }

    /**
     * 删除数据
     * @param id
     * @param finish
     * @returns
     */
    async deleteTaskById(id: number) {
        // 1 创建条件构造器
        let predicates = new relationalStore.RdbPredicates(this.tableName)
        // 2 先找到这个数据
        predicates.equalTo("ID", id)
        // 3 删除
        return await this.rdbStore.delete(predicates)
    }
}

export default new TaskModel()

通知

基础通知

import notify from '@ohos.notificationManager';
import {Header} from '../components/Header'
import image from '@ohos.multimedia.image';

@Entry
@Component
struct
NotificationMessagePage
{
@State
    mid
:
    number = 100
@State
    picture
:
    PixelMap = null

    async
    aboutToAppear()
    {
        // 获取资源管理器
        let rm = getContext(this).resourceManager;
        // 读取图片
        let file = await rm.getMediaContent($r('app.media.xiaomi14'))
        // 创建PixelMap
        image.createImageSource(file.buffer).createPixelMap()
            .then(value => this.picture = value)
            .catch(reason => console.log('testTag', '加载图片异常', JSON.stringify(reason)))
    }

    build()
    {
        Column()
        {
            Header({title: "消息通知"})

            Column()
            {
                Row()
                {
                    Button("发送normal通知").onClick(() => {
                        this.publishBasicText()
                    })
                }
            .
                width('100%')

                Row()
                {
                    Button("发送longText通知").onClick(() => {
                        this.publishLongText()
                    })
                }
            .
                width('100%')

                Row()
                {
                    Button("发送multiLine通知").onClick(() => {
                        this.publishMultilineText()
                    })
                }
            .
                width('100%')

                Row()
                {
                    Button("发送picture通知").onClick(() => {
                        this.publishPictureText()
                    })
                }
            .
                width('100%')
            }
        .
            width('100%')
                .height('100%')
                .padding(15)
        }
    .
        width('100%')
            .height('100%')
    }

    // normal通知
    publishBasicText()
    {
        let request: notify.NotificationRequest = {
            id: this.mid++,
            content: {
                contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
                normal: {
                    title: "通知标题" + this.mid,
                    text: "我是通知内容",
                    additionalText: "我是附加内容"
                }
            },
            showDeliveryTime: true, // 是否显示通知时间
            deliveryTime: new Date().getTime(), // 通知时间
            groupName: "wechat", // 通知分组
            slotType: notify.SlotType.SOCIAL_COMMUNICATION // 通知通道
        }
        this.publish(request)
    }

    // 长文本通知
    publishLongText()
    {
        let request: notify.NotificationRequest = {
            id: this.mid++,
            content: {
                contentType: notify.ContentType.NOTIFICATION_CONTENT_LONG_TEXT,
                longText: {
                    title: "通知标题" + this.mid,
                    text: "我是通知内容",
                    additionalText: "我是附加内容",
                    longText: "我是很长的文本，我是很长的文本，我是很长的文本，我是很长的文本",
                    expandedTitle: "展开后的标题",
                    briefText: "通知展开后的概要"
                }
            },
            showDeliveryTime: true, // 是否显示通知时间
            deliveryTime: new Date().getTime(), // 通知时间
            groupName: "wechat", // 通知分组
            slotType: notify.SlotType.SOCIAL_COMMUNICATION // 通知通道
        }
        this.publish(request)
    }

    // 多行标题
    publishMultilineText()
    {
        let request: notify.NotificationRequest = {
            id: this.mid++,
            content: {
                contentType: notify.ContentType.NOTIFICATION_CONTENT_MULTILINE,
                multiLine: {
                    title: "通知标题" + this.mid,
                    text: "我是通知内容",
                    additionalText: "我是附加内容",
                    briefText: "通知展开时的概要",
                    longTitle: "展开时的标题",
                    lines: [
                        "第一行",
                        "第二行",
                        "第三行"
                    ]
                }
            },
            showDeliveryTime: true, // 是否显示通知时间
            deliveryTime: new Date().getTime(), // 通知时间
            groupName: "wechat", // 通知分组
            slotType: notify.SlotType.SOCIAL_COMMUNICATION // 通知通道
        }
        this.publish(request)
    }

    // 图文消息
    publishPictureText()
    {
        let request: notify.NotificationRequest = {
            id: this.mid++,
            content: {
                contentType: notify.ContentType.NOTIFICATION_CONTENT_PICTURE,
                picture: {
                    title: "通知标题" + this.mid,
                    text: "我是通知内容",
                    additionalText: "我是附加内容",
                    briefText: "通知展开时的概要",
                    expandedTitle: "展开时的标题",
                    picture: this.picture // 图片信息
                }
            },
            showDeliveryTime: true, // 是否显示通知时间
            deliveryTime: new Date().getTime(), // 通知时间
            groupName: "wechat", // 通知分组
            slotType: notify.SlotType.SOCIAL_COMMUNICATION // 通知通道
        }
        this.publish(request)
    }


    publish(request
:
    notify.NotificationRequest
)
    {
        notify.publish(request).then(() => {
            console.log("通知发送成功")
        }).catch(err => {
            console.log(`通知发送失败：${JSON.stringify(err)}`)
        })
    }
}

不同的通道类型，发送消息提醒的权限

notify.SlotType 枚举类型

效果展示

进度条通知

import promptAction from '@ohos.promptAction'
import notify from '@ohos.notificationManager';

enum DownloadState {
    NOT_BEGIN = '未开始',
    DOWNLOADING = '下载中',
    PAUSE = '已暂停',
    FINISHED = '已完成',
}

@Component
export
struct
ProgressCar
{
    // 下载进度
@State
    progressValue
:
    number = 0
    progressMaxValue: number = 100
    // 任务状态
@State
    state
:
    DownloadState = DownloadState.NOT_BEGIN
    // 下载的文件名
    filename: string = '圣诞星.mp4'
    // 模拟下载的任务的id
    taskId: number = -1
    // 通知id
    notificationId: number = 999
    isSupport: boolean = false

    async
    aboutToAppear()
    {
        // 1.判断当前系统是否支持进度条模板
        // 注意：进度条模板名称固定 downloadTemplate
        this.isSupport = await notify.isSupportTemplate("downloadTemplate")
    }

    build()
    {
        Column({space: 10})
        {
            Row({space: 10})
            {
                Image($r('app.media.video')).width(50)

                Column({space: 5})
                {
                    Row()
                    {
                        Text(this.filename)
                        Text(`${this.progressValue}%`).fontColor('#c1c2c1')
                    }
                .
                    width('100%')
                        .justifyContent(FlexAlign.SpaceBetween)

                    Progress({
                        value: this.progressValue,
                        total: this.progressMaxValue,
                    })

                    Row({space: 5})
                    {
                        Text(`${(this.progressValue * 0.43).toFixed(2)}MB`)
                            .fontSize(14).fontColor('#c1c2c1')

                        Blank()

                        if (this.state === DownloadState.NOT_BEGIN) {
                            Button('开始').downloadButton()
                                .onClick(() => this.download())

                        } else if (this.state === DownloadState.DOWNLOADING) {
                            Button('取消').downloadButton().backgroundColor('#d1d2d3')
                                .onClick(() => this.cancel())

                            Button('暂停').downloadButton()
                                .onClick(() => this.pause())

                        } else if (this.state === DownloadState.PAUSE) {
                            Button('取消').downloadButton().backgroundColor('#d1d2d3')
                                .onClick(() => this.cancel())

                            Button('继续').downloadButton()
                                .onClick(() => this.download())
                        } else {
                            Button('打开').downloadButton()
                                .onClick(() => this.open())
                        }
                    }
                .
                    width('100%')
                }
            .
                layoutWeight(1)
            }
        .
            width('100%')
                .borderRadius(20)
                .padding(15)
                .backgroundColor(Color.White)
                .shadow({radius: 15, color: "#ff929292", offsetX: 10, offsetY: 10})

            Row()
            {
                Button("重新开始")
                    .onClick(() => {
                        this.cancel()
                    })
            }
        }
    }

    // 下载
    download()
    {
        if (this.taskId > -1) {
            clearInterval(this.taskId)
        }
        this.taskId = setInterval(() => {
            if (this.progressValue >= 100) {
                // 如果已经下载完成，删除定时任务
                clearInterval(this.taskId)
                // 标记任务已完成
                this.state = DownloadState.FINISHED
                // 发送通知
                this.publishDownloadNotification()
                return
            }
            this.progressValue += 2
            // 发送通知
            this.publishDownloadNotification()
        }, 500)

        this.state = DownloadState.DOWNLOADING
    }

    // 取消
    cancel()
    {
        if (this.taskId > -1) {
            clearInterval(this.taskId)
            this.taskId = -1
        }
        this.progressValue = 0
        this.state = DownloadState.NOT_BEGIN
        // 取消通知
        this.cleanProgressNotifyMessage()
    }

    // 暂停
    pause()
    {
        // 取消定时任务
        if (this.taskId > 0) {
            clearInterval(this.taskId);
            this.taskId = -1
        }
        // 标记任务状态：已暂停
        this.state = DownloadState.PAUSE
        // 发送通知
        this.publishDownloadNotification()
    }

    // 打开
    open()
    {
        promptAction.showToast({
            message: "功能暂未实现"
        })
    }

    // 发送进度条模板
    publishDownloadNotification()
    {
        // 1.判断当前系统是否支持进度条模板
        if (!this.isSupport) {
            return
        }
        // 2.准备进度条模板的参数
        let template = {
            name: "downloadTemplate",
            data: {
                // 当前的进度
                progressValue: this.progressValue,
                // 最大进度
                progressMaxValue: this.progressMaxValue
            }
        }
        // 3.准备消息request
        let request: notify.NotificationRequest = {
            id: this.notificationId,
            template: template,
            content: {
                contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
                normal: {
                    title: this.filename + "：" + this.state,
                    text: "",
                    additionalText: this.progressValue + "%"
                }
            }
        }
        // 4.发送通知
        notify.publish(request)
            .then(() => {
                console.log("test-notify", "发送通知成功")
            })
            .catch(err => {
                console.log("test-notify", "发送通知失败", JSON.stringify(err))
            })
    }

    // 取消进度条通知
    cleanProgressNotifyMessage()
    {
        // 根据消息ID清除通知
        notify.cancel(this.notificationId)
    }
}

@Extend(Button) function downloadButton() {
.
    width(75).height(28).fontSize(14)
}

效果

添加行为意图

通过给通知添加行为意图，可以实现点击通知后自动返回到应用内

import wantAgent, {WantAgent} from '@ohos.app.ability.wantAgent'

@Component
export
struct
ProgressCar
{
    // 行为意图
    wantAgentInstance: WantAgent

    async
    aboutToAppear()
    {
        // 1.判断当前系统是否支持进度条模板
        // 注意：进度条模板名称固定 downloadTemplate
        this.isSupport = await notify.isSupportTemplate("downloadTemplate")

        // 2. 创建拉取当前应用的行为意图
        // 2.1 创建wantInfo信息
        let wantInfo: wantAgent.WantAgentInfo = {
            wants: [
                {
                    bundleName: "com.example.myapplication",
                    abilityName: "EntryAbility" // 声明要拉起的AbilityName
                }
            ],
            requestCode: 0,
            operationType: wantAgent.OperationType.START_ABILITY, // 开启一个Ability
            wantAgentFlags: [wantAgent.WantAgentFlags.CONSTANT_FLAG]
        }
        // 2.2 创建wantAgent实例
        this.wantAgentInstance = await wantAgent.getWantAgent(wantInfo)
    }

    // .....省略其他代码

    // 发送进度条模板
    publishDownloadNotification()
    {
        // 1.判断当前系统是否支持进度条模板
        if (!this.isSupport) {
            return
        }
        // 2.准备进度条模板的参数
        let template = {
            name: "downloadTemplate",
            data: {
                // 当前的进度
                progressValue: this.progressValue,
                // 最大进度
                progressMaxValue: this.progressMaxValue
            }
        }
        // 3.准备消息request
        let request: notify.NotificationRequest = {
            id: this.notificationId,
            template: template,
            // 设置行为意图
            wantAgent: this.wantAgentInstance,
            content: {
                contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT,
                normal: {
                    title: this.filename + "：" + this.state,
                    text: "",
                    additionalText: this.progressValue + "%"
                }
            }
        }
        // 4.发送通知
        notify.publish(request)
            .then(() => {
                console.log("test-notify", "发送通知成功")
            })
            .catch(err => {
                console.log("test-notify", "发送通知失败", JSON.stringify(err))
            })
    }
}

黑马健康实战案例

欢迎页实现

静态代码

// 文字样式封装
@Extend(Text) function opacityColor(opacity: number, fontSize: number = 10) {
.
    fontColor(Color.White)
        .fontSize(fontSize)
        .opacity(opacity)
}

@Entry
@Component
struct
WelcomePage
{
    build()
    {
        Column({space: 10})
        {
            Row()
            {
                Image($r("app.media.home_slogan")).width(200)
            }
        .
            layoutWeight(1)

            Image($r("app.media.home_logo")).width(150)

            Row()
            {
                Text("黑马健康APP支持")
                    .opacityColor(0.8, 13)
                Text("IPV6")
                    .opacityColor(0.8, 13)
                    .border({style: BorderStyle.Solid, width: 1, color: Color.White, radius: 16})
                    .padding({left: 5, right: 5})
                Text("网络")
                    .opacityColor(0.8, 13)
            }

            Text(`'减更多'指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
                .opacityColor(0.6)

            Text(`浙ICP备0000000号-36D`)
                .opacityColor(0.4)
                .margin({bottom: 35})

        }
    .
        width('100%')
            .height('100%')
            .backgroundColor($r("app.color.welcome_page_background"))
    }
}

用户协议弹框

新建一个弹框组件页面

src/main/ets/view/welcome/UserPrivacyDialog.ets

@CustomDialog
export default struct
UserPrivacyDialog
{
    // 定义一个构造器，类型是自定义弹框类型
    controller: CustomDialogController
    confirm:() => void
        cancel
:
    () => void

        build()
    {
        Column({space: 10})
        {
            Text($r("app.string.user_privacy_title"))
                .fontSize(22)
                .fontWeight(FontWeight.Bold)

            Text($r("app.string.user_privacy_content"))

            Button("我同意")
                .width(150)
                .backgroundColor($r("app.color.primary_color"))
                .onClick(() => {
                    this.confirm()
                })

            Button("不同意")
                .width(150)
                .backgroundColor($r("app.color.lightest_primary_color"))
                .onClick(() => {
                    this.cancel()
                    this.controller.close()
                })
        }
    .
        width("100%")
            .padding(15)
    }
}

然后在欢迎页使用

// 首选项工具
import preferenceUtil from "../common/utils/PreferenceUtil"
import router from '@ohos.router'
import common from '@ohos.app.ability.common'

// 是否同意的Key
const PREF_KEY = 'userPrivacyKey'

@Entry
@Component
struct
WelcomePage
{
    // 上下文
    context = getContext(this) as common.UIAbilityContext
    // 定义弹框
    controller: CustomDialogController = new CustomDialogController({
        builder: UserPrivacyDialog({
            confirm: this.confirm.bind(this),
            cancel: this.cancel.bind(this)
        })
    })

    // 弹框确定方法
    confirm()
    {
        // 设置首选项
        preferenceUtil.putPreferenceValue(PREF_KEY, true)
        // 跳转到首页
        this.jumpToIndex()
    }

    // 弹框不同意方法
    cancel()
    {
        // terminateSelf 终止自身
        this.context.terminateSelf()
    }

    // 页面显示触发
    async
    aboutToAppear()
    {
        // 判断用户是否同意
        let isAgree = await preferenceUtil.getPreferenceValue(PREF_KEY, false)
        if (isAgree) {
            this.jumpToIndex()
        } else {
            this.controller.open()
        }
    }

    // 跳转到首页
    jumpToIndex()
    {
        setTimeout(() => {
            router.replaceUrl({
                url: "pages/Index"
            })
        }, 2000)
    }

    build()
    {
        // .... 省略重复代码
    }
}

首页Tab实现

import {CommonConstants} from '../common/constants/CommonConstants'

@Entry
@Component
struct
Index
{
@State
    currentIndex
:
    number = 0

    // 自定义tabBar
@Builder
    builderTabBar(title
:
    Resource, image
:
    Resource, index
:
    number
)
    {
        Column({space: CommonConstants.SPACE_2})
        {
            Image(image)
                .width(22)
                .fillColor(this.selectColor(index))
            Text(title)
                .fontSize(14)
                .fontColor(this.selectColor(index))
        }
    }

    // 根据当前选中的tab自动切换选中颜色
    selectColor(index
:
    number
)
    {
        return this.currentIndex === index ? $r("app.color.primary_color") : $r("app.color.gray")
    }

    build()
    {
        // barPosition:BarPosition.End 定义Tab的位置
        Tabs({barPosition: BarPosition.End})
        {
            TabContent()
            {
                Text("页签1")
            }
        .
            tabBar(this.builderTabBar($r("app.string.tab_record"), $r("app.media.ic_calendar"), 0))

            TabContent()
            {
                Text("页签2")
            }
        .
            tabBar(this.builderTabBar($r("app.string.tab_discover"), $r("app.media.discover"), 1))

            TabContent()
            {
                Text("页签3")
            }
        .
            tabBar(this.builderTabBar($r("app.string.tab_user"), $r("app.media.ic_user_portrait"), 2))
        }
    .
        width('100%')
            .onChange(index => {
                this.currentIndex = index
            })
    }
}

头部搜索框

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
HeaderSearch
{
    build()
    {
        Row({space: CommonConstants.SPACE_4})
        {
            Search({placeholder: "请输入食物名称"})
                .layoutWeight(1)

            // 角标
            Badge({count: 2, style: {fontSize: 12}})
            {
                Image($r("app.media.ic_public_email"))
                    .width(24)
            }

        }
    .
        width(CommonConstants.THOUSANDTH_940)
    }
}

日期和日期弹框

日期展示组件

import {CommonConstants} from '../../common/constants/CommonConstants'
import DateUtils from '../../common/utils/DateUtils'
import DatePickDialog from './DatePickDialog'


@Component
export default struct
StatsCard
{
    // 从全局存储中读取数据
@StorageProp("selectedDate")
    selectedDate
:
    number = DateUtils.beginTimeOfDate(new Date())

    controller: CustomDialogController = new CustomDialogController({
        builder: DatePickDialog({
            selectedDate: new Date(this.selectedDate)
        })
    })

    build()
    {
        Column()
        {
            // 日期行
            Row({space: CommonConstants.SPACE_4})
            {
                Text(DateUtils.formatDateTime(this.selectedDate))
                    .fontColor($r("app.color.secondary_color"))

                Image($r("app.media.ic_public_spinner"))
                    .width(25)
                    .fillColor($r("app.color.secondary_color"))
            }
        .
            width("100%")
                .padding({left: 15, top: 10, bottom: 25})
                .onClick(() => {
                    this.controller.open()
                })

            // 轮播卡片
            Row()
            {

            }
        .
            width("100%")
                .height(200)
                .backgroundColor(Color.White)
                .borderRadius(18)
                .margin({top: -20})

        }
    .
        width(CommonConstants.THOUSANDTH_940)
            .backgroundColor($r("app.color.stats_title_bgc"))
            .borderRadius(18)
    }
}

日期弹框组件

import {CommonConstants} from '../../common/constants/CommonConstants'

@CustomDialog
export default struct
DatePickDialog
{
    controller: CustomDialogController
private
    selectedDate: Date = new Date()

    build()
    {
        Column({space: CommonConstants.SPACE_4})
        {
            DatePicker({
                start: new Date('2020-1-1'),
                end: new Date('2100-1-1'),
                selected: this.selectedDate
            })
                .onChange((value: DatePickerResult) => {
                    this.selectedDate.setFullYear(value.year, value.month, value.day)
                })

            Row({space: CommonConstants.SPACE_4})
            {
                Button("取消")
                    .width(120)
                    .backgroundColor($r("app.color.light_gray"))
                    .onClick(() => {
                        this.controller.close()
                    })

                Button("确定")
                    .width(120)
                    .backgroundColor($r("app.color.primary_color"))
                    .onClick(() => {
                        // 将选中的日期保存到全局存储中
                        AppStorage.SetOrCreate("selectedDate", this.selectedDate.getTime())
                        this.controller.close()
                    })

            }
        }
    .
        padding(CommonConstants.SPACE_2)
    }
}

用到的日期工具类代码

DateUtils.ts

export default class DateUtils {
    static beginTimeOfDate(date: Date) {
        // 获取日期对象的时间戳（包含时分秒）
        const timestampWithTime = date.getTime();

        // 创建一个新的Date对象，将时间设置为1970-01-01 00:00:00
        const dateWithoutTime = new Date(1970, 0, 1, 0, 0, 0, 0);

        // 将包含时分秒的时间戳赋值给不含时分秒的日期对象
        dateWithoutTime.setTime(timestampWithTime);

        // 返回不包含时分秒的时间戳
        return dateWithoutTime.getTime();
    }

    static formatDateTime(dateTime: number) {
        let date = new Date(dateTime)
        // 获取年、月、日
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
        const day = date.getDate();

        // 格式化月和日，如果不足两位数，前面补0
        const formattedMonth = month < 10 ? '0' + month : month;
        const formattedDay = day < 10 ? '0' + day : day;

        // 返回格式化的日期字符串
        return `${year}/${formattedMonth}/${formattedDay}`;
    }
}

统计信息卡片

使用轮播组件，将两个组件包裹起来

import {CommonConstants} from '../../common/constants/CommonConstants'
import CalorieState from './CalorieStats'
import NutrientState from './NutrientStats'


@Component
export default struct
StatsCard
{
    build()
    {
        Column()
        {
            // 1. 日期行

            // 2. 轮播卡片
            Swiper()
            {
                // 2.1 热量信息
                CalorieState()
                // 2.2 卡路里信息
                NutrientState()
            }
        .
            width("100%")
                .backgroundColor(Color.White)
                .borderRadius(18)
                .margin({top: -20})
                .indicatorStyle({selectedColor: $r("app.color.primary_color")})

        }
    .
        width(CommonConstants.THOUSANDTH_940)
            .backgroundColor($r("app.color.stats_title_bgc"))
            .borderRadius(18)
    }
}

热量信息卡片

CalorieStats.ets

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
CalorieState
{
    intake:number = 600 // 饮食摄入
    expend:number = 192 // 运动消耗
    recommend:number = CommonConstants.RECOMMEND_CALORIE // 推荐卡路里

    // 计算还可以吃多少
    remainCalorie()
    {
        return this.recommend - this.intake + this.expend
    }

    build()
    {
        Row()
        {
            this.StatsBuilder("饮食摄入", this.intake)

            Stack()
            {
                // 进度条
                Progress({
                    value: this.intake,
                    total: this.recommend,
                    type: ProgressType.Ring
                })
                    .width(130)
                    .style({strokeWidth: 8})
                    .color(this.remainCalorie() < 0 ? Color.Red : $r("app.color.primary_color"))

                this.StatsBuilder("还可以吃", this.remainCalorie(), this.recommend)
            }

            this.StatsBuilder("运动消耗", this.expend)
        }
    .
        width("100%")
            .justifyContent(FlexAlign.SpaceEvenly)
            .padding({top: 30, bottom: 35})
    }

@Builder
    StatsBuilder(label
:
    string, value
:
    number, tip ? : number
)
    {
        Column({space: CommonConstants.SPACE_6})
        {
            Text(label)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)

            Text(`${value.toFixed(0)}`)
                .fontSize(25)
                .fontWeight(FontWeight.Bold)

            if (tip) {
                Text(`推荐${tip.toFixed(0)}`)
                    .fontSize(14)
                    .fontColor($r("app.color.light_gray"))
            }
        }
    }
}

卡路里信息卡片

NutrientState.ets

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
NutrientState
{
    carbon:number = 23 // 碳水
    protein:number = 9 // 蛋白质
    fat:number = 7 // 脂肪

    recommendCarbon:number = CommonConstants.RECOMMEND_CARBON
    recommendProtein:number = CommonConstants.RECOMMEND_PROTEIN
    recommendFat:number = CommonConstants.RECOMMEND_FAT

    build()
    {
        Row()
        {
            this.StatsBuilder("碳水化合物", this.carbon, this.recommendCarbon, $r("app.color.carbon_color"))

            this.StatsBuilder("蛋白质", this.protein, this.recommendProtein, $r("app.color.protein_color"))

            this.StatsBuilder("脂肪", this.fat, this.recommendFat, $r("app.color.fat_color"))
        }
    .
        width("100%")
            .justifyContent(FlexAlign.SpaceEvenly)
            .padding({top: 30, bottom: 35})
    }

@Builder
    StatsBuilder(label
:
    string, value
:
    number, recommend
:
    number, color
:
    ResourceStr
)
    {
        Column({space: CommonConstants.SPACE_6})
        {
            Stack()
            {
                // 进度条
                Progress({
                    value: value,
                    total: recommend,
                    type: ProgressType.Ring
                })
                    .width(105)
                    .style({strokeWidth: 6})
                    .color(value > recommend ? Color.Red : color)

                Column({space: CommonConstants.SPACE_6})
                {
                    Text("摄入推荐")
                        .fontColor($r("app.color.gray"))

                    Text(`${value.toFixed(0)}/${recommend.toFixed(0)}`)
                        .fontSize(20)
                        .fontWeight(FontWeight.Bold)
                }
            }

            Text(`${label}(克)`)
                .fontColor($r("app.color.light_gray"))
        }

    }
}

实现记录列表

import {CommonConstants} from '../../common/constants/CommonConstants'

@Extend(Text) function grayText() {
.
    fontSize(14)
        .fontColor($r("app.color.light_gray"))
}

@Component
export default struct
RecordList
{
    build()
    {
        List({space: CommonConstants.SPACE_10})
        {
            ForEach([1, 2, 3, 4, 5], item => {
                ListItem()
                {
                    Column({space: CommonConstants.SPACE_6})
                    {
                        // 主分类信息
                        Row({space: CommonConstants.SPACE_6})
                        {
                            Image($r("app.media.ic_breakfast"))
                                .width(24)

                            Text("早餐")
                                .fontSize(18)
                                .fontWeight(CommonConstants.FONT_WEIGHT_700)
                            Text("建议423~592千卡")
                                .grayText()
                            Blank()
                            Text("190")
                                .fontColor($r("app.color.primary_color"))
                                .fontWeight(CommonConstants.FONT_WEIGHT_700)
                            Text("千卡")
                                .grayText()
                            Image($r("app.media.ic_public_add_norm_filled"))
                                .width(24)
                                .fillColor($r("app.color.primary_color"))

                        }
                    .
                        width("100%")

                        // 子分类信息
                        List({space: CommonConstants.SPACE_6})
                        {
                            ForEach([1, 2], child => {
                                ListItem()
                                {
                                    Row({space: CommonConstants.SPACE_4})
                                    {
                                        Image($r("app.media.toast"))
                                            .width(50)

                                        Column({space: CommonConstants.SPACE_6})
                                        {
                                            Text("全麦吐司")
                                                .fontWeight(CommonConstants.FONT_WEIGHT_500)
                                                .fontSize(14)
                                            Text("1片")
                                                .fontSize(12)
                                                .fontColor($r("app.color.gray"))
                                                .textAlign(TextAlign.Start)
                                        }
                                    .
                                        alignItems(HorizontalAlign.Start)

                                        Blank()

                                        Text("91千卡")
                                            .grayText()
                                    }
                                .
                                    width("100%")
                                }
                            .
                                swipeAction({
                                    // 左滑出现删除按钮
                                    end: this.deleteBuilder.bind(this)
                                })
                            })
                        }
                    }
                .
                    padding(15)
                        .backgroundColor(Color.White)
                        .borderRadius(10)
                }
            })
        }
    .
        layoutWeight(1)
            .width(CommonConstants.THOUSANDTH_940)
            .margin({top: 15, bottom: 15})
    }

    // 左滑出现删除按钮
@Builder
    deleteBuilder()
    {
        Row()
        {
            Image($r("app.media.ic_public_delete_filled"))
                .width(25)
                .fillColor(Color.Red)
                .margin({left: 5})
        }
    .
        width(35)
            .justifyContent(FlexAlign.End)
    }
}

添加食物列表页面

新建页面ItemIndexPage

import {CommonConstants} from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemTabList from '../view/ItemIndex/ItemTabList'

@Entry
@Component
struct
ItemIndexPage
{
    build()
    {
        Column()
        {
            // 头部导航组件
            this.ItemHeaderBuilder()

            // tab列表组件
            ItemTabList()
        }
    .
        width('100%')
            .height('100%')
    }

@Builder
    ItemHeaderBuilder()
    {
        Row()
        {
            Image($r("app.media.ic_public_back"))
                .width(30)
                .interpolation(ImageInterpolation.High)
                .onClick(() => {
                    router.back()
                })

            Text("早餐")
                .fontSize(18)
                .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
    .
        height(35)
            .width(CommonConstants.THOUSANDTH_940)
            .justifyContent(FlexAlign.SpaceBetween)
    }
}

tab列表组件代码

ItemTabList.ets

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
ItemTabList
{
    build()
    {
        Column()
        {
            Tabs()
            {
                TabContent()
                {
                    this.TabContentList()
                }
            .
                tabBar("全部")

                TabContent()
                {
                    this.TabContentList()
                }
            .
                tabBar("主食")

                TabContent()
                {
                    this.TabContentList()
                }
            .
                tabBar("肉蛋奶")
            }
        }
    .
        layoutWeight(1)
            .width(CommonConstants.THOUSANDTH_940)
    }

@Builder
    TabContentList()
    {
        List({space: CommonConstants.SPACE_6})
        {
            ForEach([1, 2, 3, 4, 5], child => {
                ListItem()
                {
                    Row({space: CommonConstants.SPACE_4})
                    {
                        Image($r("app.media.toast"))
                            .width(50)

                        Column({space: CommonConstants.SPACE_6})
                        {
                            Text("全麦吐司")
                                .fontWeight(CommonConstants.FONT_WEIGHT_500)
                                .fontSize(14)
                            Text("91千卡/1片")
                                .fontSize(12)
                                .fontColor($r("app.color.gray"))
                                .textAlign(TextAlign.Start)
                        }
                    .
                        alignItems(HorizontalAlign.Start)

                        Blank()

                        Image($r("app.media.ic_public_add_norm_filled"))
                            .width(25)
                            .fillColor($r("app.color.primary_color"))
                            .interpolation(ImageInterpolation.High)
                    }
                .
                    width("100%")
                }
            })
        }
    .
        height("100%")
            .width("100%")
    }
}

效果显示

底部Panel实现

ItemIndexPage.ets 页面增加 Panel 组件

import {CommonConstants} from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemTabList from '../view/ItemIndex/ItemTabList'
import PanelHeader from '../view/ItemIndex/PanelHeader'
import PanelFoodInfo from '../view/ItemIndex/PanelFoodInfo'
import PanelInput from '../view/ItemIndex/PanelInput'

@Entry
@Component
struct
ItemIndexPage
{
@State
    showPanel
:
    boolean = false

    onPanelShow()
    {
        this.showPanel = true
    }

    onPanelClose()
    {
        this.showPanel = false
    }

    build()
    {
        Column()
        {
            // 头部导航组件
            this.ItemHeaderBuilder()
            // tab列表组件
            ItemTabList({onPanelShow: this.onPanelShow.bind(this)})
            // 底部弹框组件
            Panel(this.showPanel)
            {
                // 弹框顶部日期
                PanelHeader()
                // 食物信息
                PanelFoodInfo()
                // 键盘区域
                PanelInput({
                    onPanelClose: this.onPanelClose.bind(this)
                })
            }
        .
            mode(PanelMode.Full)
                .dragBar(false)
                .backgroundMask("#98eeeeee")
                .backgroundColor(Color.White)
        }
    .
        width('100%')
            .height('100%')
    }

@Builder
    ItemHeaderBuilder()
    {
        Row()
        {
            Image($r("app.media.ic_public_back"))
                .width(30)
                .interpolation(ImageInterpolation.High)
                .onClick(() => {
                    router.back()
                })

            Text("早餐")
                .fontSize(18)
                .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
    .
        height(35)
            .width(CommonConstants.THOUSANDTH_940)
            .justifyContent(FlexAlign.SpaceBetween)
    }
}

PanelHeader 弹框顶部日期

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
PanelHeader
{
    build()
    {
        Row({space: CommonConstants.SPACE_4})
        {
            Text("1月17日 早餐")
            Image($r("app.media.ic_public_spinner"))
                .width(20)
        }
    .
        height(45)
    }
}

PanelFoodInfo 食物信息

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
PanelFoodInfo
{
    build()
    {
        Column({space: CommonConstants.SPACE_10})
        {
            Row()
            {
                Image($r("app.media.toast"))
                    .width(130)
            }

            Row()
            {
                Text("全麦吐司")
                    .fontWeight(CommonConstants.FONT_WEIGHT_700)
            }
        .
            backgroundColor($r("app.color.lightest_primary_color"))
                .padding(10)
                .borderRadius(4)
                .margin({bottom: 10})

            Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)

            Row({space: CommonConstants.SPACE_10})
            {
                this.NutrientInfo("热量(千卡)", 91.0)
                this.NutrientInfo("碳水(克)", 15.5)
                this.NutrientInfo("蛋白质(克)", 4.4)
                this.NutrientInfo("脂肪(克)", 1.3)
            }

            Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
        }
    .
        margin({top: -10})
    }

@Builder
    NutrientInfo(label
:
    string, number
:
    number
)
    {
        Column({space: CommonConstants.SPACE_6})
        {
            Text(label)
                .fontSize(13)
                .fontColor($r("app.color.light_gray"))

            Text(`${number}`)
                .fontSize(16)
                .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
    }
}

PanelInput 键盘区域

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
PanelInput
{
    onPanelClose:() => void

        build()
    {
        Column()
        {
            Row({space: CommonConstants.SPACE_10})
            {
                Column()
                {
                    Text(`1`)
                        .fontSize(50)
                        .fontWeight(CommonConstants.FONT_WEIGHT_700)
                        .fontColor($r("app.color.primary_color"))

                    Divider().width(100).backgroundColor($r("app.color.primary_color"))
                }

                Text(" / 片")
                    .fontSize(25)
                    .fontWeight(CommonConstants.FONT_WEIGHT_700)
                    .fontColor($r("app.color.primary_color"))

            }
        .
            alignItems(VerticalAlign.Bottom)

            // 自定义键盘
            Row()
            {

            }
        .
            height(300)

            // 按钮
            Row({space: CommonConstants.SPACE_10})
            {
                Button("取消")
                    .width(110)
                    .backgroundColor($r("app.color.light_gray"))
                    .type(ButtonType.Normal)
                    .borderRadius(5)
                    .onClick(() => {
                        this.onPanelClose()
                    })

                Button("确定")
                    .width(110)
                    .backgroundColor($r("app.color.primary_color"))
                    .type(ButtonType.Normal)
                    .borderRadius(5)
                    .onClick(() => {
                        this.onPanelClose()
                    })
            }
        .
            margin({top: 10})
        }
    }
}

实现数字键盘

这里使用到了Grid布局

键盘组件代码实现

import {CommonConstants} from '../../common/constants/CommonConstants'


@Component
export default struct
PanelInput
{
    // 父组件传递过来的关闭Panel方法
    onPanelClose: () => void
        onChangeAmount
:
    (amount) => void
        gridList
:
    string[] = [
        "1", "2", "3",
        "4", "5", "6",
        "7", "8", "9",
        ".", "0"
    ]

    // 食物数量,声明成Link类型，实现父子组件双向绑定
@Link
    amount
:
    number
    // 每次点击的数组
@State
    value
:
    string = ""

@Styles
    keyBoxStyle()
    {
    .
        height(60)
            .backgroundColor(Color.White)
            .borderRadius(5)
    }

    build()
    {
        Column()
        {
            Row({space: CommonConstants.SPACE_10})
            {
                Column()
                {
                    Text(`${this.amount.toFixed(1)}`)
                        .fontSize(50)
                        .fontWeight(CommonConstants.FONT_WEIGHT_700)
                        .fontColor($r("app.color.primary_color"))

                    Divider().width(100).backgroundColor($r("app.color.primary_color"))
                }

                Text(" / 片")
                    .fontSize(20)
                    .fontWeight(CommonConstants.FONT_WEIGHT_700)
                    .fontColor($r("app.color.light_gray"))

            }
        .
            alignItems(VerticalAlign.Bottom)

            // 自定义键盘
            Grid()
            {
                ForEach(this.gridList, item => {
                    GridItem()
                    {
                        Text(`${item}`).fontSize(16).fontWeight(CommonConstants.FONT_WEIGHT_900)
                    }
                .
                    keyBoxStyle()
                        .onClick(() => {
                            this.clickNumber(item)
                        })
                })

                GridItem()
                {
                    Text(`删除`).fontSize(16).fontWeight(CommonConstants.FONT_WEIGHT_900)
                }
            .
                keyBoxStyle()
                    .onClick(() => {
                        this.removeKey()
                    })
            }
        .
            width("100%")
                .height(280)
                .columnsTemplate("1fr 1fr 1fr")
                .columnsGap(8)
                .rowsGap(8)
                .backgroundColor($r("app.color.index_page_background"))
                .padding(8)
                .margin({top: 10})


            // 按钮
            Row({space: CommonConstants.SPACE_10})
            {
                Button("取消")
                    .width(110)
                    .backgroundColor($r("app.color.light_gray"))
                    .type(ButtonType.Normal)
                    .borderRadius(5)
                    .onClick(() => {
                        this.onPanelClose()
                    })

                Button("确定")
                    .width(110)
                    .backgroundColor($r("app.color.primary_color"))
                    .type(ButtonType.Normal)
                    .borderRadius(5)
                    .onClick(() => {
                        this.onPanelClose()
                    })
            }
        .
            margin({top: 10})
        }
    }

    // 删除按钮
    removeKey()
    {
        this.value = this.value.substring(0, this.value.length - 1)
        this.amount = this.parseFloat(this.value)
    }

    // 点击键盘事件
    clickNumber(num
:
    string
)
    {
        // 1.拼接用户输入的内容
        let val = this.value + num
        // 2.校验输入的格式是否正确
        let firstIndex = val.indexOf(".")
        let lastIndex = val.lastIndexOf(".")
        if (firstIndex !== lastIndex || (lastIndex !== -1 && lastIndex < val.length - 2)) {
            return
        }
        // 3.将字符串转成数值类型
        let amount = this.parseFloat(val)
        // 4.保存
        if (amount > 999) {
            this.amount = 999
            this.value = "999"
        } else {
            this.amount = amount
            this.value = val
        }
    }

    parseFloat(str
:
    string
)
    {
        if (!str) {
            return 0
        }
        if (str.endsWith(".")) {
            str = str.substring(0, str.length - 1)
        }
        return parseFloat(str || '0')
    }
}

父组件代码

import {CommonConstants} from '../common/constants/CommonConstants'
import router from '@ohos.router'
import ItemTabList from '../view/ItemIndex/ItemTabList'
import PanelHeader from '../view/ItemIndex/PanelHeader'
import PanelFoodInfo from '../view/ItemIndex/PanelFoodInfo'
import PanelInput from '../view/ItemIndex/PanelInput'

@Entry
@Component
struct
ItemIndexPage
{
@State
    showPanel
:
    boolean = false
@State
    amount
:
    number = 1

    onPanelShow()
    {
        this.showPanel = true
    }

    onPanelClose()
    {
        this.showPanel = false
    }

    build()
    {
        Column()
        {
            // 头部导航组件
            this.ItemHeaderBuilder()
            // tab列表组件
            ItemTabList({onPanelShow: this.onPanelShow.bind(this)})
            // 底部弹框组件
            Panel(this.showPanel)
            {
                // 弹框顶部日期
                PanelHeader()
                // 食物信息
                PanelFoodInfo({
                    amount: $amount
                })
                // 键盘区域
                PanelInput({
                    onPanelClose: this.onPanelClose.bind(this),
                    amount: $amount
                })
            }
        .
            mode(PanelMode.Full)
                .dragBar(false)
                .backgroundMask("#98eeeeee")
                .backgroundColor(Color.White)
        }
    .
        width('100%')
            .height('100%')
    }

@Builder
    ItemHeaderBuilder()
    {
        Row()
        {
            Image($r("app.media.ic_public_back"))
                .width(30)
                .interpolation(ImageInterpolation.High)
                .onClick(() => {
                    router.back()
                })

            Text("早餐")
                .fontSize(18)
                .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
    .
        height(35)
            .width(CommonConstants.THOUSANDTH_940)
            .justifyContent(FlexAlign.SpaceBetween)
    }
}

食物信息组件修改，根据传递进来的数量，自动计算对应的热量信息

import {CommonConstants} from '../../common/constants/CommonConstants'

@Component
export default struct
PanelFoodInfo
{
@Link
    amount
:
    number

    build()
    {
        Column({space: CommonConstants.SPACE_10})
        {
            Row()
            {
                Image($r("app.media.toast"))
                    .width(130)
            }

            Row()
            {
                Text("全麦吐司")
                    .fontWeight(CommonConstants.FONT_WEIGHT_700)
            }
        .
            backgroundColor($r("app.color.lightest_primary_color"))
                .padding(10)
                .borderRadius(4)
                .margin({bottom: 10})

            Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)

            Row({space: CommonConstants.SPACE_10})
            {
                this.NutrientInfo("热量(千卡)", 91.0)
                this.NutrientInfo("碳水(克)", 15.5)
                this.NutrientInfo("蛋白质(克)", 4.4)
                this.NutrientInfo("脂肪(克)", 1.3)
            }

            Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
        }
    .
        margin({top: -10})
    }

@Builder
    NutrientInfo(label
:
    string, number
:
    number
)
    {
        Column({space: CommonConstants.SPACE_6})
        {
            Text(label)
                .fontSize(13)
                .fontColor($r("app.color.light_gray"))

            Text(`${(number * this.amount).toFixed(1)}`)
                .fontSize(16)
                .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
    }
}

多设备响应式开发

同一个页面，在手机、折叠手机、平板等设备上显示的方式是不一样的，我们可以通过官方提供的 @ohos.mediaquery
库来获取当前屏幕的宽度，然后根据不同宽度做不同处理

第一步：定义一个Bean，这个文件的作用是传入一个配置对象，然后调用 getValue 方法返回不同尺寸下对应的值

src/main/ets/common/bean/BreanpointType.ets

declare interface BreakpointTypeOptions<T> {
    sm?: T,
    md?: T,
    lg?: T
}

export default class BreakpointType<T> {
    options: BreakpointTypeOptions<T>

    constructor(options: BreakpointTypeOptions<T>) {
        this.options = options
    }

    getValue(breakpoint: string): T {
        return this.options[breakpoint]
    }
}

第二步：定义一个常量类，声明各种查询条件及配置对象

src/main/ets/common/constants/BreakpointConstants.ets

import BreakpointType from '../bean/BreanpointType';

export default class BreakpointConstants {
    /**
     * 小屏幕设备的 Breakpoints 标记.
     */
    static readonly BREAKPOINT_SM: string = 'sm';

    /**
     * 中等屏幕设备的 Breakpoints 标记.
     */
    static readonly BREAKPOINT_MD: string = 'md';

    /**
     * 大屏幕设备的 Breakpoints 标记.
     */
    static readonly BREAKPOINT_LG: string = 'lg';

    /**
     * 当前设备的 breakpoints 存储key
     */
    static readonly CURRENT_BREAKPOINT: string = 'currentBreakpoint';

    /**
     * 小屏幕设备宽度范围.
     */
    static readonly RANGE_SM: string = '(320vp<=width<600vp)';

    /**
     * 中屏幕设备宽度范围.
     */
    static readonly RANGE_MD: string = '(600vp<=width<840vp)';

    /**
     * 大屏幕设备宽度范围.
     */
    static readonly RANGE_LG: string = '(840vp<=width)';

    /**
     * 定义Bar在不同屏幕下的位置
     */
    static readonly BAR_POSITION: BreakpointType<BarPosition> = new BreakpointType({
        sm: BarPosition.End,
        md: BarPosition.Start,
        lg: BarPosition.Start,
    })

    /**
     * 定义Bar在不同屏幕下的布局方向
     */
    static readonly BAR_VERTICAL: BreakpointType<boolean> = new BreakpointType({
        sm: false,
        md: true,
        lg: true
    })

}

第三步：创建媒体查询工具类，创建不同尺寸的监听器，当命中时将结果保存到全局存储中

src/main/ets/common/utils/BreakpotionSystem.ets

import mediaQuery from '@ohos.mediaquery';
import BreakpointConstants from '../constants/BreakpointConstants';

export default class BreakpointSystem {
    // 创建容器宽度监听器
    private smListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_SM)
    private mdListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_MD)
    private lgListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_LG)

    // 开始监听容器
    register() {
        this.smListener.on("change", this.smListenerCallback.bind(this))
        this.mdListener.on("change", this.mdListenerCallback.bind(this))
        this.lgListener.on("change", this.lgListenerCallback.bind(this))
    }

    // 取消注册
    unRegister() {
        this.smListener.off("change", this.smListenerCallback.bind(this))
        this.mdListener.off("change", this.mdListenerCallback.bind(this))
        this.lgListener.off("change", this.lgListenerCallback.bind(this))
    }

    // 监听器命中的回调
    smListenerCallback(result: mediaQuery.MediaQueryResult) {
        if (result.matches) {
            this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM)
        }
    }

    mdListenerCallback(result: mediaQuery.MediaQueryResult) {
        if (result.matches) {
            this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD)
        }
    }

    lgListenerCallback(result: mediaQuery.MediaQueryResult) {
        if (result.matches) {
            this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG)
        }
    }

    // 更新缓存值
    updateCurrentBreakpoint(breakpoint: string) {
        AppStorage.SetOrCreate(BreakpointConstants.CURRENT_BREAKPOINT, breakpoint)
    }
}

第四步：页面使用

现在我们来修改首页代码，加入响应式功能，实现在不同设备上，Bar的位置显示到不同的地方

src/main/ets/pages/Index.ets

import BreakpointConstants from '../common/constants/BreakpointConstants'
import {CommonConstants} from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpotionSystem'
import RecordIndex from '../view/record/RecordIndex'

@Entry
@Component
struct
Index
{
@State
    currentIndex
:
    number = 0
    // 创建监听设备宽度的实例
    breakpointSystem:BreakpointSystem = new BreakpointSystem()
    // 获取当前设备宽度的缓存值
@StorageProp("currentBreakpoint")
    currentBreakpoint
:
    string = BreakpointConstants.BREAKPOINT_SM


    aboutToAppear()
    {
        this.breakpointSystem.register()
    }

    aboutToDisappear()
    {
        this.breakpointSystem.unRegister()
    }

    // 自定义tabBar
@Builder
    builderTabBar(title
:
    Resource, image
:
    Resource, index
:
    number
)
    {
        Column({space: CommonConstants.SPACE_2})
        {
            Image(image)
                .width(22)
                .fillColor(this.selectColor(index))
            Text(title)
                .fontSize(14)
                .fontColor(this.selectColor(index))
        }
    }

    // 根据当前选中的tab自动切换选中颜色
    selectColor(index
:
    number
)
    {
        return this.currentIndex === index ? $r("app.color.primary_color") : $r("app.color.gray")
    }

    // 根据设备宽度设置Bar栏位置
    chooseBarPosition()
    {
        return BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint)
    }

    build()
    {
        // barPosition:BarPosition.End 定义Tab的位置
        Tabs({barPosition: this.chooseBarPosition()})
        {
            TabContent()
            {
                RecordIndex()
            }
        .
            tabBar(this.builderTabBar($r("app.string.tab_record"), $r("app.media.ic_calendar"), 0))

            TabContent()
            {
                Text("页签2")
            }
        .
            tabBar(this.builderTabBar($r("app.string.tab_discover"), $r("app.media.discover"), 1))

            TabContent()
            {
                Text("页签3")
            }
        .
            tabBar(this.builderTabBar($r("app.string.tab_user"), $r("app.media.ic_user_portrait"), 2))
        }
    .
        width('100%')
            .onChange(index => {
                this.currentIndex = index
            })
            .vertical(BreakpointConstants.BAR_VERTICAL.getValue(this.currentBreakpoint))
    }
}

还要修改卡片信息，在平板设备上就不要左右滑动显示了，而是直接显示两个卡片

src/main/ets/view/record/StatsCard.ets

import BreakpointType from '../../common/bean/BreanpointType'
import BreakpointConstants from '../../common/constants/BreakpointConstants'
import {CommonConstants} from '../../common/constants/CommonConstants'
import DateUtils from '../../common/utils/DateUtils'
import CalorieState from './CalorieStats'
import DatePickDialog from './DatePickDialog'
import NutrientState from './NutrientStats'


@Component
export default struct
StatsCard
{
    // 从全局存储中读取数据
@StorageProp("selectedDate")
    selectedDate
:
    number = DateUtils.beginTimeOfDate(new Date())
@StorageProp("currentBreakpoint")
    currentBreakpoint
:
    string = BreakpointConstants.BREAKPOINT_SM

    controller: CustomDialogController = new CustomDialogController({
        builder: DatePickDialog({
            selectedDate: new Date(this.selectedDate)
        })
    })

    build()
    {
        Column()
        {
            // 1. 日期行
            Row({space: CommonConstants.SPACE_4})
            {
                Text(DateUtils.formatDateTime(this.selectedDate))
                    .fontColor($r("app.color.secondary_color"))

                Image($r("app.media.ic_public_spinner"))
                    .width(25)
                    .fillColor($r("app.color.secondary_color"))
            }
        .
            padding({left: 15, top: 5, bottom: 5})
                .onClick(() => {
                    this.controller.open()
                })

            // 2. 轮播卡片
            Swiper()
            {
                // 2.1 热量信息
                CalorieState()
                // 2.2 卡路里信息
                NutrientState()
            }
        .
            width("100%")
                .backgroundColor(Color.White)
                .borderRadius(18)
                .indicatorStyle({selectedColor: $r("app.color.primary_color")})
                // 设置滑动组件一页显示几个组件
                .displayCount(
                    new BreakpointType({
                        sm: 1,
                        md: 1,
                        lg: 2
                    }).getValue(this.currentBreakpoint)
                )
                // 设置是否显示指示点
                .indicator(
                    new BreakpointType({
                        sm: true,
                        md: true,
                        lg: false
                    }).getValue(this.currentBreakpoint)
                )
                // 设置是否禁用滑动功能
                .disableSwipe(
                    new BreakpointType({
                        sm: false,
                        md: false,
                        lg: true
                    }).getValue(this.currentBreakpoint)
                )
        }
    .
        width(CommonConstants.THOUSANDTH_940)
            .backgroundColor($r("app.color.stats_title_bgc"))
            .borderRadius(18)
    }
}

最后来看预览效果

首先点击这里，将多设备预览功能按钮打开，这样可以同时看到页面在手机、折叠屏、平板三种设备的显示效果

下面是不同设备的显示结果

显示不同的记录项

核心处理代码

ItemModel.ets

import GroupInfo from '../viewmodel/GroupInfo'
import RecordItem from '../viewmodel/RecordItem'
import {FoodCategories, FoodCategoryEnum, WorkoutCategories, WorkoutCategoryEnum} from './ItemCategoryModel'

const foods: RecordItem[] = [
    new RecordItem(0, '米饭', $r('app.media.rice'), FoodCategoryEnum.STAPLE, '碗', 209, 46.6, 4.7, 0.5),
    new RecordItem(1, '馒头', $r('app.media.steamed_bun'), FoodCategoryEnum.STAPLE, '个', 114, 24.0, 3.6, 0.6),
    new RecordItem(2, '面包', $r('app.media.bun'), FoodCategoryEnum.STAPLE, '个', 188, 35.2, 5.0, 3.1),
    new RecordItem(3, '全麦吐司', $r('app.media.toast'), FoodCategoryEnum.STAPLE, '片', 91, 15.5, 4.4, 1.3),
    new RecordItem(4, '紫薯', $r('app.media.purple_potato'), FoodCategoryEnum.STAPLE, '个', 163, 42.0, 1.6, 0.4),
    new RecordItem(5, '煮玉米', $r('app.media.corn'), FoodCategoryEnum.STAPLE, '根', 111, 22.6, 4.0, 1.2),
    new RecordItem(6, '黄瓜', $r('app.media.cucumber'), FoodCategoryEnum.FRUIT, '根', 29, 5.3, 1.5, 0.4),
    new RecordItem(7, '蓝莓', $r('app.media.blueberry'), FoodCategoryEnum.FRUIT, '盒', 71, 18.1, 0.9, 0.4),
    new RecordItem(8, '草莓', $r('app.media.strawberry'), FoodCategoryEnum.FRUIT, '颗', 14, 3.1, 0.4, 0.1),
    new RecordItem(9, '火龙果', $r('app.media.pitaya'), FoodCategoryEnum.FRUIT, '个', 100, 24.6, 2.2, 0.5),
    new RecordItem(10, '奇异果', $r('app.media.kiwi'), FoodCategoryEnum.FRUIT, '个', 25, 8.4, 0.5, 0.3),
    new RecordItem(11, '煮鸡蛋', $r('app.media.egg'), FoodCategoryEnum.MEAT, '个', 74, 0.1, 6.2, 5.4),
    new RecordItem(12, '煮鸡胸肉', $r('app.media.chicken_breast'), FoodCategoryEnum.MEAT, '克', 1.15, 0.011, 0.236, 0.018),
    new RecordItem(13, '煮鸡腿肉', $r('app.media.chicken_leg'), FoodCategoryEnum.MEAT, '克', 1.87, 0.0, 0.243, 0.092),
    new RecordItem(14, '牛肉', $r('app.media.beef'), FoodCategoryEnum.MEAT, '克', 1.22, 0.0, 0.23, 0.033),
    new RecordItem(15, '鱼肉', $r("app.media.fish"), FoodCategoryEnum.MEAT, '克', 1.04, 0.0, 0.206, 0.024),
    new RecordItem(16, '牛奶', $r("app.media.milk"), FoodCategoryEnum.MEAT, '毫升', 0.66, 0.05, 0.03, 0.038),
    new RecordItem(17, '酸奶', $r("app.media.yogurt"), FoodCategoryEnum.MEAT, '毫升', 0.7, 0.10, 0.032, 0.019),
    new RecordItem(18, '核桃', $r("app.media.walnut"), FoodCategoryEnum.NUT, '颗', 42, 1.2, 1.0, 3.8),
    new RecordItem(19, '花生', $r("app.media.peanut"), FoodCategoryEnum.NUT, '克', 3.13, 0.13, 0.12, 0.254),
    new RecordItem(20, '腰果', $r("app.media.cashew"), FoodCategoryEnum.NUT, '克', 5.59, 0.416, 0.173, 0.367),
    new RecordItem(21, '无糖拿铁', $r("app.media.coffee"), FoodCategoryEnum.OTHER, '毫升', 0.43, 0.044, 0.028, 0.016),
    new RecordItem(22, '豆浆', $r("app.media.soybean_milk"), FoodCategoryEnum.OTHER, '毫升', 0.31, 0.012, 0.030, 0.016),
]

const workouts: RecordItem[] = [
    new RecordItem(10000, '散步', $r('app.media.ic_walk'), WorkoutCategoryEnum.WALKING, '小时', 111),
    new RecordItem(10001, '快走', $r('app.media.ic_walk'), WorkoutCategoryEnum.WALKING, '小时', 343),
    new RecordItem(10002, '慢跑', $r('app.media.ic_running'), WorkoutCategoryEnum.RUNNING, '小时', 472),
    new RecordItem(10003, '快跑', $r('app.media.ic_running'), WorkoutCategoryEnum.RUNNING, '小时', 652),
    new RecordItem(10004, '自行车', $r('app.media.ic_ridding'), WorkoutCategoryEnum.RIDING, '小时', 497),
    new RecordItem(10005, '动感单车', $r('app.media.ic_ridding'), WorkoutCategoryEnum.RIDING, '小时', 587),
    new RecordItem(10006, '瑜伽', $r('app.media.ic_aerobics'), WorkoutCategoryEnum.AEROBICS, '小时', 172),
    new RecordItem(10007, '健身操', $r('app.media.ic_aerobics'), WorkoutCategoryEnum.AEROBICS, '小时', 429),
    new RecordItem(10008, '游泳', $r('app.media.ic_swimming'), WorkoutCategoryEnum.SWIMMING, '小时', 472),
    new RecordItem(10009, '冲浪', $r('app.media.ic_swimming'), WorkoutCategoryEnum.SWIMMING, '小时', 429),
    new RecordItem(10010, '篮球', $r('app.media.ic_basketball'), WorkoutCategoryEnum.BALLGAME, '小时', 472),
    new RecordItem(10011, '足球', $r('app.media.ic_football'), WorkoutCategoryEnum.BALLGAME, '小时', 515),
    new RecordItem(10012, '排球', $r("app.media.ic_volleyball"), WorkoutCategoryEnum.BALLGAME, '小时', 403),
    new RecordItem(10013, '羽毛球', $r("app.media.ic_badminton"), WorkoutCategoryEnum.BALLGAME, '小时', 386),
    new RecordItem(10014, '乒乓球', $r("app.media.ic_table_tennis"), WorkoutCategoryEnum.BALLGAME, '小时', 257),
    new RecordItem(10015, '哑铃飞鸟', $r("app.media.ic_dumbbell"), WorkoutCategoryEnum.STRENGTH, '小时', 343),
    new RecordItem(10016, '哑铃卧推', $r("app.media.ic_dumbbell"), WorkoutCategoryEnum.STRENGTH, '小时', 429),
    new RecordItem(10017, '仰卧起坐', $r("app.media.ic_sit_up"), WorkoutCategoryEnum.STRENGTH, '小时', 515),
]

class ItemModel {
    // 根据大类返回对应的所有内容
    list(isFood: boolean) {
        return isFood ? foods : workouts
    }

    // 获取不同的分类以及分类对应的list
    getGroupList(isFood: boolean) {
        // 根据是否是食物切换显示不同的类型列表
        let categories = isFood ? FoodCategories : WorkoutCategories
        let items = isFood ? foods : workouts

        // 遍历tab类型
        let data = categories.map(itemCategory => new GroupInfo(itemCategory, []))
        items.forEach(item => {
            data[item.categoryId].items.push(item)
        })
        return data
    }
}

let itemModel = new ItemModel()

export default itemModel as ItemModel

tab列表页面获取数据后遍历显示不同的页签以及对应的list

ItemTabList.ets

import {CommonConstants} from '../../common/constants/CommonConstants'
import RecordItem from '../../viewmodel/RecordItem'
import itemModel from "../../model/ItemModel"
import GroupInfo from '../../viewmodel/GroupInfo'

@Component
export default struct
ItemTabList
{
    onPanelShow:(item: RecordItem) => void
        // 是否是食物类型
    @State
    isFood:boolean = true

    build()
    {
        Column()
        {
            Tabs()
            {
                TabContent()
                {
                    this.TabContentList(itemModel.list(this.isFood))
                }
            .
                tabBar("全部")

                // 获取不同的分类信息
                ForEach(itemModel.getGroupList(this.isFood), (groupInfo: GroupInfo) => {
                    TabContent()
                    {
                        this.TabContentList(groupInfo.items)
                    }
                .
                    tabBar(groupInfo.type.name)
                })
            }
        .
            barMode(BarMode.Scrollable)
        }
    .
        layoutWeight(1)
            .width(CommonConstants.THOUSANDTH_940)
    }

@Builder
    TabContentList(items
:
    RecordItem[]
)
    {
        List({space: CommonConstants.SPACE_6})
        {
            ForEach(items, (item: RecordItem) => {
                ListItem()
                {
                    Row({space: CommonConstants.SPACE_4})
                    {
                        Image(item.image)
                            .width(50)

                        Column({space: CommonConstants.SPACE_6})
                        {
                            Text(item.name)
                                .fontWeight(CommonConstants.FONT_WEIGHT_500)
                                .fontSize(14)
                            Text(`${item.calorie}千卡 / ${item.unit}`)
                                .fontSize(12)
                                .fontColor($r("app.color.gray"))
                                .textAlign(TextAlign.Start)
                        }
                    .
                        alignItems(HorizontalAlign.Start)

                        Blank()

                        Image($r("app.media.ic_public_add_norm_filled"))
                            .width(25)
                            .fillColor($r("app.color.primary_color"))
                            .interpolation(ImageInterpolation.High)
                    }
                .
                    width("100%")
                        .onClick(() => {
                            this.onPanelShow(item)
                        })
                }
            })
        }
    .
        height("100%")
            .width("100%")
    }
}

然后点击每一个分类时将当前的分类信息传递给信息展示弹框中

PanelFoodInfo.ets

import {CommonConstants} from '../../common/constants/CommonConstants'
import RecordItem from '../../viewmodel/RecordItem'

@Component
export default struct
PanelFoodInfo
{
@Link
    amount
:
    number
@Link
    recordItem
:
    RecordItem

    build()
    {
        Column({space: CommonConstants.SPACE_10})
        {
            Row()
            {
                Image(this.recordItem.image)
                    .width(130)
            }

            Row()
            {
                Text(this.recordItem.name)
                    .fontWeight(CommonConstants.FONT_WEIGHT_700)
            }
        .
            backgroundColor($r("app.color.lightest_primary_color"))
                .padding(10)
                .borderRadius(4)
                .margin({bottom: 10})

            Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)

            Row({space: CommonConstants.SPACE_10})
            {
                this.NutrientInfo("热量(千卡)", this.recordItem.calorie)
                if (this.recordItem.id < 10000) {
                    this.NutrientInfo("碳水(克)", this.recordItem.carbon)
                    this.NutrientInfo("蛋白质(克)", this.recordItem.protein)
                    this.NutrientInfo("脂肪(克)", this.recordItem.fat)
                }
            }

            Divider().width(CommonConstants.THOUSANDTH_940).opacity(0.6)
        }
    .
        margin({top: -10})
    }

@Builder
    NutrientInfo(label
:
    string, number
:
    number
)
    {
        Column({space: CommonConstants.SPACE_6})
        {
            Text(label)
                .fontSize(13)
                .fontColor($r("app.color.light_gray"))

            Text(`${(number * this.amount).toFixed(1)}`)
                .fontSize(16)
                .fontWeight(CommonConstants.FONT_WEIGHT_700)
        }
    }
}

实现效果