方式二：加载本地文件
```js
// 加载本地文件
Image($r("app.media.icon"))
.width(300)
.interpolation(ImageInterpolation.High)
```
app 是固定的开头，media.icon 表示当前图片所在目录，图片的后缀不需要写
`interpolation(ImageInterpolation.High)` 表示抗锯齿效果，可以提高图片的清晰度
抗锯齿打开效果
抗锯齿关闭效果
### Text组件
基本用法
```js
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无所谓
然后可以使用下面方式来展示配置的国际化语言
```ts
Text($r("app.string.Image_width")) // 字体内容
.fontSize(30) // 字体大小
.fontWeight(FontWeight.Bold) // 字体加粗
.textAlign(TextAlign.Center) // 水平居中
.width("100%") // 宽度
.textCase(TextCase.UpperCase) // 设置字体变大写
.fontColor("#09c") // 字体颜色
```
默认根据当前手机系统的语言，显示对应的value值，可以修改系统语言，显示不同的文字
### TextInput组件
绑定一个值改变图片宽度
```ts
@Entry
@Component
struct ImagePage {
@State imageWidth:number = 200
build() {
Row(){
Column(){
Image($r("app.media.icon"))
.width(this.imageWidth)
.interpolation(ImageInterpolation.High)
Text($r("app.string.Image_width"))
.fontSize(30)
TextInput({
placeholder:"请输入图片宽度",
text:this.imageWidth.toString()
})
.width(200)
.type(InputType.Number)
.onChange(value=>{
this.imageWidth = value ? parseInt(value) : 20
})
}
.width("100%")
}
.height("100%")
}
}
```
### Button组件
普通用法
```ts
Button("缩小").width(80).type(ButtonType.Circle).stateEffect(true).onClick(()=>{
if(this.imageWidth >= 10){
this.imageWidth -= 10
}
})
Button("放大").width(80).stateEffect(true).margin(10).onClick(()=>{
if(this.imageWidth < 300){
this.imageWidth += 10
}
})
```
type支持的类型
| 类型 | 描述 |
| ------- | ------------------------------------ |
| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 |
| Circle | 圆形按钮。 |
| Normal | 普通按钮（默认不带圆角）。 |
图片按钮
```ts
Button(){
Image($r("app.media.jian")).width(20).margin(15)
}
.width(80)
.type(ButtonType.Circle)
.stateEffect(true)
.onClick(()=>{
if(this.imageWidth >= 10){
this.imageWidth -= 10
}
})
```
### Slider滑动条
```ts
// 滑块
Slider({
value: this.imageWidth,
step: 10,
min:10,
max:100,
// 设置Slider的滑块与滑轨显示样式,
// OutSet 滑块在滑轨上。
// InSet 滑块在滑轨内。
style: SliderStyle.OutSet
})
.blockColor("#36D") // 设置滑块的颜色。
.trackColor("#ececec") // 设置滑轨的背景颜色。
.selectedColor("#09C") // 设置滑轨的已滑动部分颜色。
.showSteps(true) // 设置当前是否显示步长刻度值
.showTips(true) // 设置滑动时是否显示百分比气泡提示。
.trackThickness(7) // 滑动条的粗细
.onChange((value: number, mode: SliderChangeMode) => {
this.imageWidth = parseInt(value.toFixed(0))
})
```
### Columl和Row
Column和Row在主轴方向上的对齐方式
在交叉轴的对齐方式
### 设置图片大小Demo
```ts
@Entry
@Component
struct ImagePage {
@State imageWidth:number = 200
build() {
Column({
space:20
}){
Row(){
Image($r("app.media.icon"))
.width(this.imageWidth)
.interpolation(ImageInterpolation.High)
}
.width("100%")
.height(350)
.margin({
bottom:20
})
.justifyContent(FlexAlign.Center)
.backgroundColor("#ececec")
Row(){
Text($r("app.string.Image_width"))
.fontSize(20)
.margin({
right:15
})
TextInput({
placeholder:"请输入图片宽度",
text:this.imageWidth.toString()
})
.width(200)
.type(InputType.Number)
.onChange(value=>{
this.imageWidth = value ? parseInt(value) : 20
})
}
Row(){
/*文字类型按钮*/
Button("缩小").width(80).stateEffect(true).onClick(()=>{
if(this.imageWidth >= 10){
this.imageWidth -= 10
}
})
/*文字类型按钮*/
Button("放大").width(80).stateEffect(true).margin(10).onClick(()=>{
if(this.imageWidth < 300){
this.imageWidth += 10
}
})
}
.width("80%")
.justifyContent(FlexAlign.SpaceBetween)
Row(){
// 滑块
Slider({
value: this.imageWidth,
step: 10,
min:10,
max:100,
// 设置Slider的滑块与滑轨显示样式,
// OutSet 滑块在滑轨上。
// InSet 滑块在滑轨内。
style: SliderStyle.OutSet
})
.blockColor("#36D") // 设置滑块的颜色。
.trackColor("#ececec") // 设置滑轨的背景颜色。
.selectedColor("#09C") // 设置滑轨的已滑动部分颜色。
.showSteps(true) // 设置当前是否显示步长刻度值
.showTips(true) // 设置滑动时是否显示百分比气泡提示。
.trackThickness(7) // 滑动条的粗细
.onChange((value: number, mode: SliderChangeMode) => {
this.imageWidth = parseInt(value.toFixed(0))
})
}
.width("90%")
}
.width("100%")
.height("100%")
}
}
```
### List和ForEach
- layoutWeight(1) 样式权重，数值越大，权重越高，会将除了其他低权重区域的高度减掉之后，剩下的都是自己的
```ts
class Item {
name:string
price:number
img:Resource
discount:number
constructor(name:string,img:Resource,price:number,discount?:number) {
this.name = name
this.img = img
this.price = price
this.discount = discount
}
}
@Entry
@Component
struct ItemsPage {
@State ItemList:Array父组件是对象类型，子组件是对象属性
不可以是数组、any | 父子类型一致：string、number、boolean、enum、object、class、以及他们的数组
数组中的元素增、删、改、查等都会引起刷新
嵌套类型以及数组中的对象属性无法引起刷新 | | 初始化方式 | 不允许子组件进行初始化 | 父组件传递、禁止子组件进进行初始化 | 现在我们使用@Prop和@Link将上面的代码进行组件封装 新建 `components/taskComponents/HeaderCar` 定义顶部卡片组件 ```ts const FinishColor = "#36D" // 定义卡片公共样式 @Styles function carStyle() { .borderRadius(8) .shadow({ radius: 20, color: "#bbb", offsetX: 3, offsetY: 4 }) .backgroundColor(Color.White) .width("100%") } @Component export struct HeaderCar { // 定义从父组件接收的字段 @Prop finishTotal: number @Prop taskTotal: number build() { Row(){ Text("任务列表") .fontSize(25) .fontWeight(FontWeight.Bold) // 栈组件，让多个组件堆叠在一起 Stack(){ // 进度条 Progress({ value:this.finishTotal, total:this.taskTotal, type:ProgressType.ScaleRing // 设置成环形进度条 }) .width(100) .color(FinishColor) .style({ strokeWidth:5 }) Row(){ Text(`${this.finishTotal}`) .fontColor(FinishColor) .fontSize(25) Text(` / ${this.taskTotal}`) .fontSize(25) } } } .carStyle() .padding(35) .justifyContent(FlexAlign.SpaceBetween) } } ``` 新建 `components/taskComponents/TaskListItem` 封装任务列表组件 ```ts class Task{ static id = 1 name:string finish:boolean constructor() { this.name = `任务${Task.id++}` this.finish = false } } // 定义卡片公共样式 @Styles function carStyle() { .borderRadius(8) .shadow({ radius: 20, color: "#bbb", offsetX: 3, offsetY: 4 }) .backgroundColor(Color.White) .width("100%") } const FinishColor = "#36D" @Component export struct TaskItem { @Link taskTotal: number @Link finishTotal: number @State taskList: Task[] = [] handleTaskChange(){ this.taskTotal = this.taskList.length this.finishTotal = this.taskList.filter(i=>i.finish).length } build() { Column(){ Button("添加任务") .width(200) .margin({top:30,bottom:30}) .backgroundColor(FinishColor) .onClick(()=>{ this.taskList.push(new Task()) this.handleTaskChange() }) Row(){ List({space:20}){ ForEach(this.taskList,(task:Task,index)=> { ListItem(){ Row(){ if(task.finish){ Text(`${task.name}`) .fontColor("#ccc") .decoration({ type: TextDecorationType.LineThrough }) }else{ Text(`${task.name}`) } Checkbox() .select(task.finish) .selectedColor(FinishColor) .onChange(val=>{ task.finish = val this.handleTaskChange() }) } .carStyle() .padding(20) .justifyContent(FlexAlign.SpaceBetween) } .swipeAction({ // 往左边滑动时出现自定义的构建函数 end:this.deleteBuilder(index) }) }) } .width("100%") .layoutWeight(1) } } } // 自定义删除按钮的构建函数 @Builder deleteBuilder(index){ Button(){ Image($r("app.media.deleteIcon")) .width(20) .interpolation(ImageInterpolation.High) } .width(40) .height(40) .margin({left:15}) .backgroundColor(Color.Red) .onClick(()=>{ this.taskList.splice(index,1) this.handleTaskChange() }) } } ``` 最后父组件引用上面个子组件 ```ts // 任务对象 import { HeaderCar } from '../components/taskComponents/HeaderCar' import { TaskItem } from '../components/taskComponents/TaskListItem' @Entry @Component struct TaskList { // 任务总数量 @State taskTotal:number = 0 // 已完成数量 @State finishTotal:number = 0 onPageShow(){ // 调用子组件的方法 TaskItem.prototype.handleTaskChange() } build() { Column() { // 头部卡片 HeaderCar({ taskTotal:this.taskTotal, finishTotal:this.finishTotal }) // 底部的任务列表组件 TaskItem({ taskTotal:$taskTotal, finishTotal:$finishTotal }) .layoutWeight(1) } .width("100%") .height("100%") .padding(15) .backgroundColor("#ececec") } } ``` 效果一致  ### @Provide和@Consume @Provide和@Consume适用于跨组件传递数据的场景 在父组件定义一个变量，并且用@Provide修饰，然后子组件或者孙子组件使用@Consume修饰接收的变量，然后父组件引用这些子组件时不需要传递参数，子组件可以自动的获取父组件的变量值。并且支持双向同步 代码示例 ```ts @Entry @Component struct ProvidePage { @Provide name: string = "李四" build() { Column(){ Row(){ Text(`父组件的值：${this.name}`) .fontSize(30) } // 定义子组件 NameCom() } } } @Component struct NameCom { @Consume name: string build(){ Column(){ Row(){ Text(`${this.name}`) } Row(){ TextInput({ text:this.name }) .onChange(val => { this.name = val }) } } } } ``` 效果展示  ### @Observed和@ObjectLink 上面我们知道，嵌套的字段发生改变时，页面不会刷新。为了解决这个问题，我们就要使用 @Observed和@ObjectLink 现在我们来修改任务列表这个代码，我们发现点击完右侧的复选框后，文字的样式并没有发生变化 修改 `components/taskComponents/TaskListItem` ```ts @Observed class Task{ static id = 1 name:string finish:boolean constructor() { this.name = `任务${Task.id++}` this.finish = false } } // 定义卡片公共样式 @Styles function carStyle() { .borderRadius(8) .shadow({ radius: 20, color: "#bbb", offsetX: 3, offsetY: 4 }) .backgroundColor(Color.White) .width("100%") } const FinishColor = "#36D" @Component export struct TaskItem { @Link taskTotal: number @Link finishTotal: number @State taskList: Task[] = [] handleTaskChange(){ this.taskTotal = this.taskList.length this.finishTotal = this.taskList.filter(i=>i.finish).length } build() { Column(){ Button("添加任务") .width(200) .margin({top:30,bottom:30}) .backgroundColor(FinishColor) .onClick(()=>{ this.taskList.push(new Task()) this.handleTaskChange() }) Row(){ List({space:20}){ ForEach(this.taskList,(task:Task,index)=> { ListItem(){ // 每一行组件 RowItem({ task:task, // 将父组件定义的方法传递给子组件，并绑定this为父组件的this handleTaskChange:this.handleTaskChange.bind(this) }) } .swipeAction({ // 往左边滑动时出现自定义的构建函数 end:this.deleteBuilder(index) }) }) } .width("100%") .layoutWeight(1) } } } // 自定义删除按钮的构建函数 @Builder deleteBuilder(index){ Button(){ Image($r("app.media.deleteIcon")) .width(20) .interpolation(ImageInterpolation.High) } .width(40) .height(40) .margin({left:15}) .backgroundColor(Color.Red) .onClick(()=>{ this.taskList.splice(index,1) this.handleTaskChange() }) } } @Component struct RowItem { @ObjectLink task:Task handleTaskChange: ()=>void build() { Row(){ if(this.task.finish){ Text(`${this.task.name}`) .fontColor("#ccc") .decoration({ type: TextDecorationType.LineThrough }) }else{ Text(`${this.task.name}`) } Checkbox() .select(this.task.finish) .selectedColor(FinishColor) .onChange(val=>{ this.task.finish = val this.handleTaskChange() }) } .carStyle() .padding(20) .justifyContent(FlexAlign.SpaceBetween) } } ``` 给 `class Task` 添加了 @Observe 修饰，然后将每一行做了组件抽离，并接收参数，使用 @ObjectLink 修饰 然后我们需要在RowItem组件中调用父组件的handleTaskChange方法，所以定义了一个handleTaskChange参数，通过父组件传递过来，但是在子组件调用时，this指向会发生变化，所以父组件在传递方法时，使用bind改变这个方法内部的this指向 现在代码的运行效果就是正常的  ## 页面路由 1. 页面栈的最大容量上限是32个，使用 `router.clear()` 方法可以清空页面栈，释放内存 2. Router有两种跳转模式，分别为： - router.pushUrl()：目标页面不会替换当前页面，而是压入页面栈，因此可以用 `router.back()` 返回当前页面 - router.replaceUrl()：目标页面会替换当前页面，当前页面会被销毁并释放资源，无法返回当前页面 3. Router有两种页面实例模式，分别是： - Standard：标准页面实例，每次跳转都会新建一个目标页面压入页面栈，默认就是此模式 - Single：单实例模式，如果目标页已经在页面栈中，则距离页面栈顶部最近的同Url页面会被移动到栈顶，并重新加载 修改首页代码 ```ts import router from '@ohos.router' class RouterItem { url: string title: string constructor(url, title) { this.url = url this.title = title } } @Entry @Component struct Index { @State message: string = '页面列表' routerList: RouterItem[] = [ new RouterItem("pages/ImagePage", "查看图片页面"), new RouterItem("pages/ItemsPage", "商品列表页面"), new RouterItem("pages/StatePage", "Jack和他的女朋友们"), new RouterItem("pages/TaskListPage", "任务列表"), ] build() { Column() { Row() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) .fontColor("#36d") .onClick(() => { this.message = "Hello ArkTS" }) } List({ space: 20 }) { ForEach(this.routerList, (r: RouterItem, index: number) => { ListItem() { RouterItemBox({ item: r, rid: index + 1 }) } }) } .width("100%") .margin({ top: 35 }) .layoutWeight(1) } .width('100%') .height("100%") .padding(15) } } @Component struct RouterItemBox { item: RouterItem rid: number build() { Row() { Text(`${this.rid}.`) .fontColor(Color.White) .fontSize(18) .fontWeight(FontWeight.Bold) Blank() Text(`${this.item.title}`) .fontColor(Color.White) .fontSize(18) .fontWeight(FontWeight.Bold) } .width("100%") .padding({ top: 15, right: 25, bottom: 15, left: 25 }) .backgroundColor("#36D") .borderRadius(30) .shadow({ radius: 8, color: "#ff484848", offsetX: 5, offsetY: 5 }) .justifyContent(FlexAlign.SpaceBetween) .onClick(() => { router.pushUrl( { url: this.item.url }, router.RouterMode.Single, err => { if(err){ console.log(`页面跳转出错，errCode：${err.code}，errMsg：${err.message}`) } } ) }) } } ``` 修改公共的Header组件，添加点击返回功能 ```ts // 定义Header组件 import router from '@ohos.router' @Component export struct Header { // 定义参数，父组件使用时通过参数传递过来 private title:string build() { // 顶部标题 Row(){ Row({space:15}){ Image($r("app.media.back")) .width(30) .onClick(()=>{ // 返回前确认弹框,用户点击确认后，才会继续往下执行代码。否则不会继续往下执行 router.showAlertBeforeBackPage({ message:"确认离开当前页面吗?", }) // 返回上一页 router.back() }) Text(this.title) .fontSize(20) } Image($r("app.media.refresh")) .width(25) } .width("100%") .padding({ left:15, right:15, top:15, bottom:15 }) .alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.SpaceBetween) } } ``` 最后需要配置页面地址，找到 `resources/base/profile/main_pages.json` 文件，添加页面路由信息 ```json { "src": [ "pages/Index", "pages/ImagePage", "pages/ItemsPage", "pages/StatePage", "pages/TaskListPage" ] } ``` 如果不配置，则不会跳转 另外，在新建时，可以选择新建 Page，这样会自动的往该文件中添加路由信息  效果展示  ## 动画 ### 属性动画  实例代码 ```ts import router from '@ohos.router' @Entry @Component struct AnimationPage { // 小鱼坐标 @State fishX: number = 200 @State fishY: number = 180 // 小鱼角度 @State angle: number = 0 // 小鱼图片 @State src: Resource = $r("app.media.yu") // 是否开始游戏 @State isBegin: boolean = false // 移动速度 @State speed: number = 20 build() { Row() { Stack() { Button("返回") .position({ x: 15, y: 15 }) .width(80) .backgroundColor("#bc515151") .onClick(() => { router.back() }) if (!this.isBegin) { Button("开始游戏") .onClick(() => { this.isBegin = true }) } else { Image(this.src) .position({ x: this.fishX - 40, y: this.fishY - 40 }) .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" }) .width(80) .height(80) .animation({ duration: 500, // 动画时长,当上面的动画值发生变化时会触发动画 }) } // 摇杆区域 if (this.isBegin) { Row() { Button("←") .backgroundColor("#bc515151") .onClick(() => { this.fishX -= this.speed this.src = $r("app.media.yu") }) Column({ space: 40 }) { Button("↑") .backgroundColor("#bc515151") .onClick(() => { this.fishY -= this.speed }) Button("↓") .backgroundColor("#bc515151") .onClick(() => { this.fishY += this.speed }) } Button("→") .backgroundColor("#bc515151") .onClick(() => { this.fishX += this.speed this.src = $r("app.media.yuR") }) } .width(240) .height(240) .position({ x: 15, y: 150 }) } } .height('100%') .width("100%") } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .backgroundImage($r("app.media.yuBg")) .backgroundImageSize(ImageSize.Cover) // 背景图片铺满 } } ``` 上面代码完成了小鱼游动的效果，点击上下箭头，可以看到小鱼很平滑的在移动  ### 显示动画  修改上面的代码为显示动画 ```ts Stack() { Button("返回") .position({ x: 15, y: 15 }) .width(80) .backgroundColor("#bc515151") .onClick(() => { router.back() }) if (!this.isBegin) { Button("开始游戏") .onClick(() => { this.isBegin = true }) } else { Image(this.src) .position({ x: this.fishX - 40, y: this.fishY - 40 }) .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" }) .width(80) .height(80) } // 摇杆区域 if (this.isBegin) { Row() { Button("←") .backgroundColor("#bc515151") .onClick(() => { // 全局暴露的动画函数，第一个参数设置动画相关内容 // 第二个是修改的动画值 animateTo( { duration: 500 }, () => { this.fishX -= this.speed this.src = $r("app.media.yu") }) }) Column({ space: 40 }) { Button("↑") .backgroundColor("#bc515151") .onClick(() => { animateTo( { duration: 500 }, () => { this.fishY -= this.speed }) }) Button("↓") .backgroundColor("#bc515151") .onClick(() => { animateTo( { duration: 500 }, () => { this.fishY += this.speed }) }) } Button("→") .backgroundColor("#bc515151") .onClick(() => { animateTo( { duration: 500 }, () => { this.fishX += this.speed this.src = $r("app.media.yuR") }) }) } .width(240) .height(240) .position({ x: 15, y: 150 }) } } .height('100%') .width("100%") ``` ### 组件转场动画  为小鱼添加入场动画，修改开始游戏按钮的方法 ```ts if (!this.isBegin) { Button("开始游戏") .onClick(() => { // 点击开始游戏后，使用animateTo控制小鱼开始执行入场动画 // 注意：必须使用animateTo方法的回调控制变量，才能触发transition动画 animateTo( { duration:1000 }, ()=>{ this.isBegin = true } ) }) } else { Image(this.src) .position({ x: this.fishX - 40, y: this.fishY - 40 }) .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" }) .width(80) .height(80) // 添加初始位置，点击开始游戏后，由下面的样式变成上面定义的样式 .transition({ type:TransitionType.Insert, // Insert 表示入场动画 translate:{x:-this.fishX}, // x 轴上的位置，设置为负数，表示从屏幕外面移动到屏幕里面 }) } ``` 效果展示  ### 实现摇杆功能 完整代码 ```ts import router from '@ohos.router' import curves from '@ohos.curves' @Entry @Component struct AnimationPage { // 小鱼坐标 @State fishX: number = 300 @State fishY: number = 180 // 小鱼角度 @State angle: number = 0 // 小鱼图片 @State src: Resource = $r("app.media.yuR") // 是否开始游戏 @State isBegin: boolean = false // 移动速度 @State speed: number = 20 // 摇杆中心区域坐标 centerX: number = 120 centerY: number = 120 // 大小圆的半径 maxRadius: number = 100 radius: number = 20 // 摇杆小圆球的初始位置 @State positionX: number = this.centerX @State positionY: number = this.centerY // 角度正弦和余弦 sin: number = 0 cos: number = 0 taskId: number = 1 scaleTaskId: number = 1 @State fishScale:number = 1 build() { Row() { Stack() { Button("返回") .position({ x: 15, y: 15 }) .width(80) .backgroundColor("#bc515151") .onClick(() => { router.back() }) if (!this.isBegin) { Button("开始游戏") .onClick(() => { // 点击开始游戏后，使用animateTo控制小鱼开始执行入场动画 // 注意：必须使用animateTo方法的回调控制变量，才能触发transition动画 animateTo( { duration:1000 }, ()=>{ this.isBegin = true } ) }) } else { Image(this.src) .position({ x: this.fishX - 40, y: this.fishY - 40 }) .rotate({ angle: this.angle, centerX: "50%", centerY: "50%" }) .width(80) .height(80) .scale({x:this.fishScale,y:this.fishScale}) // 添加初始位置，点击开始游戏后，由下面的样式变成上面定义的样式 .transition({ type:TransitionType.Insert, // Insert 表示入场动画 translate:{x:-this.fishX}, // x 轴上的位置 }) .interpolation(ImageInterpolation.High) } // 摇杆区域 Row() { Circle({width:this.maxRadius * 2,height:this.maxRadius * 2}) .fill("#3a101020") .position({x:this.centerX-this.maxRadius,y:this.centerY-this.maxRadius}) Circle({width:this.radius*2,height:this.radius *2}) .fill("#ffeaa311") .position({x:this.positionX-this.radius,y:this.positionY-this.radius}) } .width(240) .height(240) .justifyContent(FlexAlign.Center) .position({ x: 0, y: 120 }) .onTouch(this.onTouchEvent.bind(this)) } .height('100%') .width("100%") } .justifyContent(FlexAlign.Center) .alignItems(VerticalAlign.Center) .backgroundImage($r("app.media.yuBg")) .backgroundImageSize(ImageSize.Cover) // 背景图片铺满 } // 处理摇杆区域的触摸事件 onTouchEvent(event:TouchEvent){ // 区分不同的类型 switch (event.type){ // 手指松开事件 case TouchType.Up: animateTo( { curve:curves.springMotion() }, ()=>{ // 还原小球的位置 this.positionX = this.centerX this.positionY = this.centerY // 还原小鱼的倾斜角度 this.angle = 0 // 还原小鱼大小 this.fishScale = 1 } ) clearInterval(this.taskId) clearInterval(this.scaleTaskId) break // 手指点击事件 case TouchType.Down: // 不断的更新小鱼的位置 this.taskId = setInterval(()=>{ this.fishX += this.speed * this.cos this.fishY += this.speed * this.sin },40) // 每隔500毫秒让小鱼逐渐变大 this.scaleTaskId = setInterval(()=>{ animateTo( { curve:curves.springMotion() }, ()=>{ this.fishScale += 0.2 } ) },500) break // 手指移动事件 case TouchType.Move: // 1.获取手指位置坐标 let x = event.touches[0].x let y = event.touches[0].y // 2.计算手指与中心点坐标的差值 let vx = x - this.centerX let vy = y - this.centerY // 3.计算手指与中心点连线和x轴半径的夹角，单位是弧度 let angle = Math.atan2(vy,vx) // 4.计算手指与中心点的距离 let distance = this.getDistance(vx,vy) // 5.计算摇杆小球的坐标 this.cos = Math.cos(angle) this.sin = Math.sin(angle) animateTo( { // 设置动画为连续动画 curve:curves.responsiveSpringMotion() }, ()=>{ this.positionX = this.centerX + distance * Math.cos(angle) this.positionY = this.centerY + distance * Math.sin(angle) // 6.计算小鱼的位置 this.speed = 5 // 计算角度绝对值，如果小于90则需要翻转图片 if(Math.abs(angle * 2) < Math.PI){ this.src = $r("app.media.yuR") }else{ this.src = $r("app.media.yu") angle = angle < 0 ? angle + Math.PI : angle - Math.PI } // 弧度转角度计算公式：弧度 * (180 / π) this.angle = angle * (180 / Math.PI) } ) break } } getDistance(x,y){ // 求平方根,计算两点的距离 let d = Math.sqrt(x*x + y*y) return Math.min(d,this.maxRadius) } } ```  ## Stage模型 ### 文档介绍 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/application-configuration-file-overview-stage-0000001428061460-V2 在需要的时候来翻阅文档即可 ## 生命周期 ### 页面及组件的生命周期 完成流程图  接下来通过两个案例来查看生命周期函数的执行情况 #### 案例一 首先给首页添加生命周期函数 ```ts import router from '@ohos.router' class RouterItem { url: string title: string constructor(url, title) { this.url = url this.title = title } } @Entry @Component struct Index { @State message: string = '页面列表' routerList: RouterItem[] = [ new RouterItem("pages/ImagePage", "查看图片页面"), new RouterItem("pages/ItemsPage", "商品列表页面"), new RouterItem("pages/StatePage", "Jack和他的女朋友们"), new RouterItem("pages/TaskListPage", "任务列表"), new RouterItem("pages/AnimationPage", "小鱼动画"), new RouterItem("pages/AnimationPageV2", "小鱼动画V2"), new RouterItem("pages/LifeCyclePage", "生命周期案例1"), new RouterItem("pages/LifeCyclePage1", "生命周期案例2"), ] tag: string = "Index Page" aboutToAppear(){ console.log(`${this.tag} aboutToAppear,页面创建完成`) } onBackPress(){ console.log(`${this.tag} aboutToAppear,页面返回前触发`) } onPageShow(){ console.log(`${this.tag} aboutToAppear,页面显示完成`) } onPageHide(){ console.log(`${this.tag} aboutToAppear,页面隐藏完成`) } aboutToDisappear(){ console.log(`${this.tag} aboutToAppear,页面销毁完成`) } build() { Column() { Row() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) .fontColor("#36d") } List({ space: 20 }) { ForEach(this.routerList, (r: RouterItem, index: number) => { ListItem() { RouterItemBox({ item: r, rid: index + 1 }) } }) } .width("100%") .margin({ top: 35 }) .layoutWeight(1) } .width('100%') .height("100%") .padding(15) } } @Component struct RouterItemBox { item: RouterItem rid: number build() { Row() { Text(`${this.rid}.`) .fontColor(Color.White) .fontSize(18) .fontWeight(FontWeight.Bold) Blank() Text(`${this.item.title}`) .fontColor(Color.White) .fontSize(18) .fontWeight(FontWeight.Bold) } .width("100%") .padding({ top: 15, right: 25, bottom: 15, left: 25 }) .backgroundColor("#36D") .borderRadius(30) .shadow({ radius: 8, color: "#ff484848", offsetX: 5, offsetY: 5 }) .justifyContent(FlexAlign.SpaceBetween) .onClick(() => { router.pushUrl( { url: this.item.url }, router.RouterMode.Single, err => { if(err){ console.log(`页面跳转出错，errCode：${err.code}，errMsg：${err.message}`) } } ) }) } } ``` 在加载完首页后会触发 `aboutToAppear` 和 `onPageShow`  然后点击跳转到 `pages/LifeCyclePage`，页面代码如下 ```ts @Entry @Component struct LifeCyclePage { @State isShow: boolean = false @State emptyList: any[] = [0] tag: string = "LifeCyclePage" aboutToAppear() { console.log(`${this.tag} aboutToAppear,页面创建完成`) } onBackPress() { console.log(`${this.tag} aboutToAppear,页面返回前触发`) } onPageShow() { console.log(`${this.tag} aboutToAppear,页面显示完成`) } onPageHide() { console.log(`${this.tag} aboutToAppear,页面隐藏完成`) } aboutToDisappear() { console.log(`${this.tag} aboutToAppear,页面销毁完成`) } build() { Row() { Column({ space: 35 }) { Button("显示组件") .margin({ top: 30 }) .onClick(() => { this.isShow = !this.isShow }) if (this.isShow) { MyText() } Button("增加组件") .onClick(() => { this.emptyList.push(this.emptyList.length + 1) }) ForEach(this.emptyList, (item,index) => { Row({ space: 25 }) { MyText() Button("删除") .onClick(() => { this.emptyList.splice(index, 1) }) } .width("100%") .justifyContent(FlexAlign.Center) }) } .width('100%') .height("100%") .alignItems(HorizontalAlign.Center) } .height('100%') } } @Component struct MyText { messages: string = "hello world" tag: string = "MyText" aboutToAppear() { console.log(`${this.tag} aboutToAppear,页面创建完成`) } // 组件没有onBackPress、onPageShow、onPageHide这三个钩子函数 onBackPress() { console.log(`${this.tag} aboutToAppear,页面返回前触发`) } onPageShow() { console.log(`${this.tag} aboutToAppear,页面显示完成`) } onPageHide() { console.log(`${this.tag} aboutToAppear,页面隐藏完成`) } aboutToDisappear() { console.log(`${this.tag} aboutToAppear,页面销毁完成`) } build() { Column() { Text(this.messages) } } } ``` 会打印如下  - 首先调用页面的 aboutToAppear 页面创建钩子 - 然后触发组件的 aboutToAppear 页面创建钩子 - 接着触发首页的 aboutToDisappear 页面销毁钩子 - 最后触发页面的 onPageShow 显示钩子 这时在页面上显示和隐藏组件，或者增加遍历组件，都只会触发组件的 aboutToAppear 创建和 aboutToDisappear 销毁  这也再次印证了组件是不包含 `onBackPress` 、`onPageShow`、`onPageHide` 这三个页面级别的生命周期函数 然后再返回首页时，会触发下面的钩子  #### 案例二 首先准备两个页面 LifeCyclePage1.ets ```ts import router from '@ohos.router' @Entry @Component struct LifeCyclePage1 { pageName: string = "LifeCycle Page1" aboutToAppear() { console.log(`${this.pageName} aboutToAppear,页面创建完成`) } onBackPress() { console.log(`${this.pageName} aboutToAppear,页面返回前触发`) } onPageShow() { console.log(`${this.pageName} aboutToAppear,页面显示完成`) } onPageHide() { console.log(`${this.pageName} aboutToAppear,页面隐藏完成`) } aboutToDisappear() { console.log(`${this.pageName} aboutToAppear,页面销毁完成`) } build() { Column({space:35}) { Row(){ Text(this.pageName) .fontSize(30) .fontWeight(FontWeight.Bold) } .margin({top:35}) Row({space:5}){ Button("push 跳转Page2") .onClick(()=>{ router.pushUrl({ url:"pages/LifeCyclePage2" }) }) Button("replace 跳转Page2") .onClick(()=>{ router.replaceUrl({ url:"pages/LifeCyclePage2" }) }) } } .height('100%') .width("100%") } } ``` LifeCyclePage2.ets ```ts import router from '@ohos.router' @Entry @Component struct LifeCyclePage2 { pageName: string = "LifeCycle Page2" aboutToAppear() { console.log(`${this.pageName} aboutToAppear,页面创建完成`) } onBackPress() { console.log(`${this.pageName} aboutToAppear,页面返回前触发`) } onPageShow() { console.log(`${this.pageName} aboutToAppear,页面显示完成`) } onPageHide() { console.log(`${this.pageName} aboutToAppear,页面隐藏完成`) } aboutToDisappear() { console.log(`${this.pageName} aboutToAppear,页面销毁完成`) } build() { Column({space:35}) { Row(){ Text(this.pageName) .fontSize(30) .fontWeight(FontWeight.Bold) } .margin({top:35}) Row({space:5}){ Button("push 跳转Page1") .onClick(()=>{ router.pushUrl({ url:"pages/LifeCyclePage1" }) }) Button("replace 跳转Page1") .onClick(()=>{ router.replaceUrl({ url:"pages/LifeCyclePage1" }) }) } } .height('100%') .width("100%") } } ``` 首先点击 "push跳转" 按钮，查看打印结果  > 会发现在不断地触发创建和隐藏钩子，但是没有触发`aboutToDisappear` 页面销毁钩子，这说明通过push方式跳转的页面，系统会帮我们做缓存 接下来点击 “replace跳转” 按钮，查看打印结果  > 发现通过 replace 跳转会触发上一页面的销毁钩子 ## UIAbility的启动模式 ### 模式介绍 | 模式类型 | 作用 | | --------- | ------------------------------------------------------------ | | singleton | 每一个UIAbility只存在唯一实例。是默认启动模式，任务列表中只会存在一个相同的UIAbility | | standard | 每次启动UIAbility都会创建一个实例。任务列表中会存在多个相同的UIAbility | | specified | 每个UIAbility实例可以设置key标识，启动UIAbility时，需要指定Key，存在相同的Key的实力会直接被拉起，不存在则创建一个新的实例 | ### 案例演示 下面我们来使用一下 specified 模式 首先新建 `pages/DocumentPage.ets` 页面 ```ts import { Header } from '../components/Header' import common from '@ohos.app.ability.common' import Want from '@ohos.app.ability.Want' @Entry @Component struct DocumentPage { @State index: number = 1 @State documentList:number[] = [] context = getContext(this) as common.UIAbilityContext build() { Column() { Header({title:"文档列表"}) Column({space:15}){ Row(){ Button("添加文档") .onClick(()=>{ this.documentList.push(this.index) let want:Want = { deviceId:"",// deviceId为空表示本设备 bundleName:"com.example.myapplication", // 包的名称，对应AppScope/app.json5的app.bundleName abilityName:"DocumentAbility", // 要跳转到目标ability名称 moduleName:"entry", // 当前的模块名称 parameters:{ instanceKey: this.index // 传过去的key } } // 跳转到一个新的Ability this.context.startAbility(want) this.index++ }) } ForEach(this.documentList,id=>{ Row({space:15}){ Image($r("app.media.doc")) .width(25) Text(`文档${id}`) .fontSize(20) .fontWeight(FontWeight.Bold) .onClick(()=>{ let want:Want = { deviceId:"",// deviceId为空表示本设备 bundleName:"com.example.myapplication", // 包的名称，对应AppScope/app.json5的app.bundleName abilityName:"DocumentAbility", // 要跳转到目标ability名称 moduleName:"entry", // 当前的模块名称 parameters:{ instanceKey: id // 传过去的key } } // 跳转到一个新的Ability this.context.startAbility(want) }) } .width("100%") }) } .width('100%') .height('100%') .padding(15) } .width('100%') .height('100%') } } ``` 接着新建文档编辑页面 `pages/DocumentEdit.ets` ```ts import Want from '@ohos.app.ability.Want' import common from '@ohos.app.ability.common' @Entry @Component struct DocumentEdit { @State docEdit: boolean = true @State docName: string = "" context = getContext(this) as common.UIAbilityContext onPageShow(){ let abilityInfo = this.context console.log(`DocumnetAbility: ${JSON.stringify(abilityInfo)}`) } build() { Column() { Row({ space: 15 }) { Image($r("app.media.back")) .width(25) .onClick(()=>{ let want:Want = { deviceId:"",// deviceId为空表示本设备 bundleName:"com.example.myapplication", // 包的名称，对应AppScope/app.json5的app.bundleName abilityName:"EntryAbility", // 要跳转到目标ability名称 moduleName:"entry", // 当前的模块名称 } // 跳转到一个新的Ability this.context.startAbility(want) }) if(this.docEdit){ TextInput({ placeholder: "请输入文档名称", text: this.docName }) .onChange(val=>{ this.docName = val }) .layoutWeight(1) }else { Text(this.docName) .fontSize(25) .layoutWeight(1) } Button("确定") .onClick(() => { this.docEdit = !this.docEdit }) } .width('100%') Row(){ TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word...', }) .placeholderFont({ size: 16, weight: 400 }) .fontSize(16) .fontColor('#182431') .height("98%") } .width('100%') .layoutWeight(1) } .width('100%') .height('100%') .padding(15) } } ``` 然后再首页中添加跳转按钮 ```ts import router from '@ohos.router' class RouterItem { url: string title: string constructor(url, title) { this.url = url this.title = title } } @Entry @Component struct Index { @State message: string = '页面列表' routerList: RouterItem[] = [ new RouterItem("pages/ImagePage", "查看图片页面"), new RouterItem("pages/ItemsPage", "商品列表页面"), new RouterItem("pages/StatePage", "Jack和他的女朋友们"), new RouterItem("pages/TaskListPage", "任务列表"), new RouterItem("pages/AnimationPage", "小鱼动画"), new RouterItem("pages/AnimationPageV2", "小鱼动画V2"), new RouterItem("pages/LifeCyclePage", "生命周期案例1"), new RouterItem("pages/LifeCyclePage1", "生命周期案例2"), new RouterItem("pages/DocumentPage", "文档列表页面"), ] 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
```ts
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
```sh
npm install express
```
新建 nodeServe/index.js
```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条数据
```json
[{"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 服务
```sh
node index.js
```
测试服务是否正常运行
#### viewModel
新建 src/main/ets/viewModel，这个文件用来放所有页面模型数据
在该文件夹下添加如下文件
ShopInfo.ts
```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
```ts
class responseData{
total: number
totalPages: number
rows: any[]
}
export default class ResponseInfo{
code: number
data: responseData
}
```
#### model
新建 src/main/ets/model 文件夹，这个文件夹用来放有关请求的文件
在该文件夹下新增
ShopModel.ts
```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
#### 总结
上面商铺列表的核心请求逻辑在 ShopModel.ts 文件中，主要代码利用了内置的 httpRequest 来完成请求
```ts
// 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使用
#### 工具安装
首先需要安装一个命令行工具
打开[官网相关文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/ide-command-line-ohpm-0000001490235312-V2)，点击如下按钮
选择自己的系统进行下载
下载好之后，进入ohpm/bin 目录下，执行 init.bat
然后等待安装完成后，输入 `ohpm -v` 查看版本
**接着配置环境变量**
将 bin 目录的位置添加到环境变量中
然后再随便目录下查看版本
可以出现版本号表示安装成功
#### 安装axios
打开**[OpenHarmony三方库中心仓](https://ohpm.openharmony.cn/#/cn/home)**网站，搜索 axios 即可查看安装和使用方式
在项目根目录下执行
```sh
ohpm install @ohos/axios
```
#### 项目中使用
首先简单封装一下 axios，新建 src/main/ets/utils/service.ts
```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
```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，使用我们上面写好的方法来加载数据
```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获取其路径。具体可见[获取应用开发路径](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/application-context-stage-0000001427744560-V3#ZH-CN_TOPIC_0000001574128741__获取应用开发路径)。
#### 约束限制
- Key键为string类型，要求非空且长度不超过80个字节。
- 如果Value值为string类型，可以为空，不为空时长度不超过8192个字节。
- 内存会随着存储数据量的增大而增大，所以存储的数据量应该是轻量级的，建议存储的数据不超过一万条，否则会在内存方面产生较大的开销。
#### 使用方法
封装 PreferenceUtils 文件，添加操作缓存的几个方法。新建 src/main/ets/utils/PreferencesUtils.ts
```ts
import dataPreferences from '@ohos.data.preferences';
class PreferencesUtils {
private prefMap: Map
### 添加行为意图
通过给通知添加行为意图，可以实现点击通知后自动返回到应用内
```ts
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))
})
}
}
```
## 黑马健康实战案例
### 欢迎页实现
静态代码
```ts
// 文字样式封装
@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
```ts
@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)
}
}
```
然后在欢迎页使用
```ts
// 首选项工具
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实现
```ts
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
})
}
}
```
### 头部搜索框
```ts
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)
}
}
```
### 日期和日期弹框
日期展示组件
```ts
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)
}
}
```
日期弹框组件
```ts
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`
```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}`;
}
}
```
### 统计信息卡片
使用轮播组件，将两个组件包裹起来
```ts
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`
```ts
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`
```ts
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"))
}
}
}
```
### 实现记录列表
```ts
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`
```ts
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`
```ts
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 组件
```ts
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` 弹框顶部日期
```ts
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` 食物信息
```ts
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` 键盘区域
```ts
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布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-layout-development-create-grid-0000001504486057-V2#section3518453204812)
键盘组件代码实现
```ts
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')
}
}
```
父组件代码
```ts
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)
}
}
```
食物信息组件修改，根据传递进来的数量，自动计算对应的热量信息
```ts
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](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-layout-development-media-query-0000001454445606-V2) 库来获取当前屏幕的宽度，然后根据不同宽度做不同处理
第一步：定义一个Bean，这个文件的作用是传入一个配置对象，然后调用 getValue 方法返回不同尺寸下对应的值
src/main/ets/common/bean/BreanpointType.ets
```ts
declare interface BreakpointTypeOptions