【HarmonyOS之旅】基于ArkTS开发(二) -＞ UI开发三

目录

1 -> 绘制图形

1.1 -> 绘制基本几何图形

1.2 -> 绘制自定义几何图形

2 -> 添加动画效果

2.1 -> animateTo实现闪屏动画

2.2 -> 页面转场动画

3 -> 常见组件说明

1 -> 绘制图形

绘制能力主要是通过框架提供的绘制组件来支撑，支持svg标准绘制命令。

1.1 -> 绘制基本几何图形

绘制组件封装了一些常见的基本几何图形，比如矩形Rect、圆形Circle、椭圆形Ellipse等，为开发者省去了路线计算的过程。

FoodDetail页面的食物成分表里，给每一项成分名称前都加上一个圆形的图标作为成分标签。

1. 创建Circle组件，在每一项含量成分前增加一个圆形图标作为标签。设置Circle的直径为 6vp。修改FoodDetail页面的ContentTable组件里的IngredientItem方法，在成分名称前添加Circle。

  1. // FoodDetail.ets
  2. @Component
  3. struct ContentTable {
  4.   private foodItem: FoodData
  5.  
  6.   @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {
  7.     Flex() {
  8.       Text(title)
  9.         .fontSize(17.4)
  10.         .fontWeight(FontWeight.Bold)
  11.         .layoutWeight(1)
  12.       Flex({ alignItems: ItemAlign.Center }) {
  13.         Circle({width: 6, height: 6})
  14.           .margin({right: 12})
  15.           .fill(colorValue)
  16.         Text(name)
  17.           .fontSize(17.4)
  18.           .flexGrow(1)
  19.         Text(value)
  20.           .fontSize(17.4)
  21.       }
  22.       .layoutWeight(2)
  23.     }
  24.   }
  25.  
  26.   build() {
  27.     ......
  28.   }
  29. }

2. 每个成分的标签颜色不一样，所以我们在build方法中，调用IngredientItem，给每个Circle填充不一样的颜色。

  1. // FoodDetail.ets
  2. @Component
  3. struct ContentTable {
  4.   private foodItem: FoodData
  5.  
  6.   @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {
  7.     Flex() {
  8.       Text(title)
  9.         .fontSize(17.4)
  10.         .fontWeight(FontWeight.Bold)
  11.         .layoutWeight(1)
  12.       Flex({ alignItems: ItemAlign.Center }) {
  13.         Circle({width: 6, height: 6})
  14.           .margin({right: 12})
  15.           .fill(colorValue)
  16.         Text(name)
  17.           .fontSize(17.4)
  18.           .flexGrow(1)
  19.         Text(value)
  20.           .fontSize(17.4)
  21.       }
  22.       .layoutWeight(2)
  23.     }
  24.   }
  25.  
  26.   build() {
  27.     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
  28.       this.IngredientItem('Calories', '#FFf54040', 'Calories', this.foodItem.calories + 'kcal')
  29.       this.IngredientItem('Nutrition', '#FFcccccc', 'Protein', this.foodItem.protein + 'g')
  30.       this.IngredientItem(' ', '#FFf5d640', 'Fat', this.foodItem.fat + 'g')
  31.       this.IngredientItem(' ', '#FF9e9eff', 'Carbohydrates', this.foodItem.carbohydrates + 'g')
  32.       this.IngredientItem(' ', '#FF53f540', 'VitaminC', this.foodItem.vitaminC + 'mg')
  33.     }
  34.     .height(280)
  35.     .padding({ top: 30, right: 30, left: 30 })
  36.   }
  37. }

1.2 -> 绘制自定义几何图形

除绘制基础几何图形，开发者还可以使用Path组件来绘制自定义的路线，下面进行绘制应用的Logo图案。

1. 在pages文件夹下创建新的页面Logo.ets。

2. Logo.ets中删掉模板代码，创建Logo Component。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   build() {
  5.  
  6.   }
  7. }

3. 创建Flex组件为根节点，宽高设置为100%，设置其在主轴方向和交叉轴方向的对齐方式都为Center，创建Shape组件为Flex子组件。

Shape组件是所有绘制组件的父组件。如果需要组合多个绘制组件成为一个整体，需要创建Shape作为其父组件。

我们要绘制的Logo的大小630px * 630px。声明式UI范式支持多种长度单位的设置，在前面的章节中，我们直接使用number作为参数，即采用了默认长度单位vp，虚拟像素单位。vp和设备分辨率以及屏幕密度有关。比如设备分辨率为1176 * 2400，屏幕基准密度(resolution)为3，vp = px / resolution，则该设备屏幕宽度是392vp。

但是绘制组件采用svg标准，默认采取px为单位的，为方便统一，在这绘制Logo这一部分，统一采取px为单位。声明式UI框架同样也支持px单位，入参类型为string，设置宽度为630px，即210vp，设置方式为width('630px')或者width(210)。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   build() {
  5.     Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  6.       Shape() {
  7.  
  8.       }
  9.       .height('630px')
  10.       .width('630px')
  11.     }
  12.     .width('100%')
  13.     .height('100%')
  14.   }
  15. }

4. 给页面填充渐变色。设置为线性渐变，偏移角度为180deg，三段渐变 #BDE895 -->95DE7F --> #7AB967，其区间分别为[0, 0.1], (0.1, 0.6], (0.6, 1]。

  1. .linearGradient(
  2.   {
  3.     angle: 180,
  4.     colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
  5. })

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   build() {
  5.     Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  6.       Shape() {
  7.  
  8.       }
  9.       .height('630px')
  10.       .width('630px')
  11.     }
  12.     .width('100%')
  13.     .height('100%')
  14.     .linearGradient(
  15.     {
  16.       angle: 180,
  17.       colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
  18.     })
  19.   }
  20. }

5. 绘制第一条路线Path，设置其绘制命令。

  1. Path()
  2.   .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')

Path的绘制命令采用svg标准，上述命令可分解为：

M162 128.7

将笔触移动到(Moveto)坐标点(162, 128.7)。

a222 222 0 0 1 100.8 374.4

画圆弧线(elliptical arc)半径rx，ry为222，x轴旋转角度x-axis-rotation为0，角度大小large-arc-flag为0，即小弧度角，弧线方向(sweep-flag)为1，即逆时针画弧线，小写a为相对位置，即终点坐标为(162 + 100.8 = 262.8, 128.7 + 374.4 = 503.1)。

H198

画水平线(horizontal lineto)到198，即画(262.8, 503.1)到(198, 503.1)的水平线。

a36 36 0 0 3 -36 -36

画圆弧线(elliptical arc)，含义同上，结束点为(198 - 36 = 162, 503.1 - 36 = 467.1)。

V128.7

画垂直线(vertical lineto)到128.7，即画(162, 467.1)到(162, 128.7)的垂直线。

z

关闭路径(closepath)。

填充颜色为白色。

.fill(Color.White)
  1. @Entry
  2. @Component
  3. struct Logo {
  4.   build() {
  5.     Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  6.       Shape() {
  7.         Path()
  8.           .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
  9.           .fill(Color.White)
  10.       }
  11.       .height('630px')
  12.       .width('630px')
  13.     }
  14.     .width('100%')
  15.     .height('100%')
  16.     .linearGradient(
  17.       {
  18.         angle: 180,
  19.         colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
  20.       })
  21.   }
  22. }

6. 在Shape组件内绘制第二个Path。第二条Path的背景色为渐变色，但是渐变色的填充是其整体的box，所以需要clip将其裁剪，入参为Shape，即按照Shape的形状进行裁剪。

  1. Path()
  2.   .commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z')
  3.   .fill('none')
  4.   .linearGradient(
  5.   {
  6.     angle: 30,
  7.     colors: [["#C4FFA0", 0],  ["#ffffff", 1]]
  8.   })
  9.   .clip(new Path().commands('M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'))

Path的绘制命令比较长，可以将其作为组件的成员变量，通过this调用。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
  5.   build() {
  6.     ......
  7.         Path()
  8.           .commands(this.pathCommands1)
  9.           .fill('none')
  10.           .linearGradient(
  11.           {
  12.             angle: 30,
  13.             colors: [["#C4FFA0", 0],  ["#ffffff", 1]]
  14.           })
  15.           .clip(new Path().commands(this.pathCommands1))
  16.      ......
  17.   }
  18. }

7. 在Shape组件内绘制第二个Path。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
  5.   private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
  6.   build() {
  7.     Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  8.       Shape() {
  9.         Path()
  10.           .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
  11.           .fill(Color.White)
  12.  
  13.         Path()
  14.           .commands(this.pathCommands1)
  15.           .fill('none')
  16.           .linearGradient(
  17.           {
  18.             angle: 30,
  19.             colors: [["#C4FFA0", 0],  ["#ffffff", 1]]
  20.           })
  21.           .clip(new Path().commands(this.pathCommands1))
  22.  
  23.         Path()
  24.           .commands(this.pathCommands2)
  25.           .fill('none')
  26.           .linearGradient(
  27.           {
  28.             angle: 50,
  29.             colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4],  ["#ffffff", 0.7]]
  30.           })
  31.           .clip(new Path().commands(this.pathCommands2))
  32.       }
  33.       .height('630px')
  34.       .width('630px')
  35.     }
  36.     .width('100%')
  37.     .height('100%')
  38.     .linearGradient(
  39.       {
  40.         angle: 180,
  41.         colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
  42.       })
  43.   }
  44. }

完成应用Logo的绘制。Shape组合了三个Path组件，通过svg命令绘制出一个艺术的叶子，寓意绿色健康饮食方式。

8. 添加应用的标题和slogan。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   private pathCommands1:string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
  5.   private pathCommands2:string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
  6.   build() {
  7.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  8.       Shape() {
  9.         Path()
  10.           .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
  11.           .fill(Color.White)
  12.  
  13.         Path()
  14.           .commands(this.pathCommands1)
  15.           .fill('none')
  16.           .linearGradient(
  17.           {
  18.             angle: 30,
  19.             colors: [["#C4FFA0", 0],  ["#ffffff", 1]]
  20.           })
  21.           .clip(new Path().commands(this.pathCommands1))
  22.  
  23.         Path()
  24.           .commands(this.pathCommands2)
  25.           .fill('none')
  26.           .linearGradient(
  27.           {
  28.             angle: 50,
  29.             colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4],  ["#ffffff", 0.7]]
  30.           })
  31.           .clip(new Path().commands(this.pathCommands2))
  32.       }
  33.       .height('630px')
  34.       .width('630px')
  35.  
  36.       Text('Healthy Diet')
  37.         .fontSize(26)
  38.         .fontColor(Color.White)
  39.         .margin({ top:300 })
  40.  
  41.       Text('Healthy life comes from a balanced diet')
  42.         .fontSize(17)
  43.         .fontColor(Color.White)
  44.         .margin({ top:4 })
  45.     }
  46.     .width('100%')
  47.     .height('100%')
  48.     .linearGradient(
  49.       {
  50.         angle: 180,
  51.         colors: [['#BDE895', 0.1], ["#95DE7F", 0.6],  ["#7AB967", 1]]
  52.       })
  53.   }
  54. }

2 -> 添加动画效果

2.1 -> animateTo实现闪屏动画

声明式UI范式组件动画包括属性动画和animateTo显式动画：

  1. 属性动画：设置组件通用属性变化的动画效果。
  2. 显式动画：可以设置组件从状态A到状态B的变化动画效果，包括样式、位置信息和节点的增加删除等，开发者无需关注变化过程，只需指定起点和终点的状态。animateTo还提供播放状态的回调接口，是对属性动画的增强与封装。

闪屏页面的动画效果是Logo图标的渐出和放大效果的动画，动画结束后跳转到食物分类列表页面。接下来，我们就使用animateTo来实现启动页动画的闪屏效果。

1. 动画效果自动播放。闪屏动画的预期效果是，进入Logo页面后，animateTo动画效果自动开始播放，可以借助于组件显隐事件的回调接口来实现。调用Shape的onAppear方法，设置其显式动画。

  1. Shape() {
  2.   ...
  3. }
  4. .onAppear(() => {
  5.    animateTo()
  6. })

2. 创建opacity和scale数值的成员变量，用装饰器@State修饰。表示其为有状态的数据，即改变会触发页面的刷新。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   @State private opacityValue: number = 0
  5.   @State private scaleValue: number = 0
  6.   build() {
  7.     Shape() {
  8.       ...
  9.     }
  10.    .scale({ x: this.scaleValue, y: this.scaleValue })
  11.    .opacity(this.opacityValue)
  12.    .onAppear(() => {
  13.      animateTo()
  14.     })
  15.   }
  16. }

3. 设置animateTo的动画曲线curve。Logo的加速曲线为先慢后快，使用贝塞尔曲线cubicBezier，cubicBezier(0.4, 0, 1, 1)。

需要使用动画能力接口中的插值计算，首先要导入curves模块。

import Curves from '@ohos.curves'

@ohos.curves模块提供了线性Curve. Linear、阶梯step、三阶贝塞尔(cubicBezier)和弹簧(spring)插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   @State private opacityValue: number = 0
  5.   @State private scaleValue: number = 0
  6.   private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)
  7.  
  8.   build() {
  9.     Shape() {
  10.       ...
  11.     }
  12.    .scale({ x: this.scaleValue, y: this.scaleValue })
  13.    .opacity(this.opacityValue)
  14.    .onAppear(() => {
  15.      animateTo({
  16.         curve: this.curve1
  17.      })
  18.     })
  19.   }
  20. }

4. 设置动画时长为1s，延时0.1s开始播放，设置显示动效event的闭包函数，即起点状态到终点状态为透明度opacityValue和大小scaleValue从0到1，实现Logo的渐出和放大效果。

  1. @Entry
  2. @Component
  3. struct Logo {
  4.   @State private opacityValue: number = 0
  5.   @State private scaleValue: number = 0
  6.   private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)
  7.  
  8.   build() {
  9.     Shape() {
  10.       ...
  11.     }
  12.    .scale({ x: this.scaleValue, y: this.scaleValue })
  13.    .opacity(this.opacityValue)
  14.    .onAppear(() => {
  15.      animateTo({
  16.       duration: 1000, 
  17.       curve: this.curve1, 
  18.       delay: 100, 
  19.      }, () => {
  20.        this.opacityValue = 1
  21.        this.scaleValue = 1
  22.       })
  23.     })
  24.   }
  25. }

5. 闪屏动画播放结束后定格1s，进入FoodCategoryList页面。设置animateTo的onFinish回调接口，调用定时器Timer的setTimeout接口延时1s后，调用router.replace，显示FoodCategoryList页面。

  1. import router from '@ohos.router'
  2.  
  3. @Entry
  4. @Component
  5. struct Logo {
  6.   @State private opacityValue: number = 0
  7.   @State private scaleValue: number = 0
  8.   private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)
  9.  
  10.   build() {
  11.     Shape() {
  12.       ...
  13.     }
  14.    .scale({ x: this.scaleValue, y: this.scaleValue })
  15.    .opacity(this.opacityValue)
  16.    .onAppear(() => {
  17.  
  18.      animateTo({
  19.       duration: 1000,
  20.        curve: this.curve1, 
  21.        delay: 100, 
  22.        onFinish: () => {
  23.          setTimeout(() => {
  24.            router.replace({ url: "pages/FoodCategoryList" })
  25.          }, 1000);
  26.        }
  27.      }, () => {
  28.        this.opacityValue = 1
  29.        this.scaleValue = 1
  30.       })
  31.     })
  32.   }
  33. }

整体代码如下。

  1. import Curves from '@ohos.curves'
  2. import router from '@ohos.router'
  3.  
  4. @Entry
  5. @Component
  6. struct Logo {
  7.   @State private opacityValue: number = 0
  8.   @State private scaleValue: number = 0
  9.   private curve1 = Curves.cubicBezier(0.4, 0, 1, 1)
  10.   private pathCommands1: string = 'M319.5 128.1 c103.5 0 187.5 84 187.5 187.5 v15 a172.5 172.5 0 0 3 -172.5 172.5 H198 a36 36 0 0 3 -13.8 -1 207 207 0 0 0 87 -372 h48.3 z'
  11.   private pathCommands2: string = 'M270.6 128.1 h48.6 c51.6 0 98.4 21 132.3 54.6 a411 411 0 0 3 -45.6 123 c-25.2 45.6 -56.4 84 -87.6 110.4 a206.1 206.1 0 0 0 -47.7 -288 z'
  12.  
  13.   build() {
  14.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  15.       Shape() {
  16.         Path()
  17.           .commands('M162 128.7 a222 222 0 0 1 100.8 374.4 H198 a36 36 0 0 3 -36 -36')
  18.           .fill(Color.White)
  19.         Path()
  20.           .commands(this.pathCommands1)
  21.           .fill('none')
  22.           .linearGradient(
  23.           {
  24.             angle: 30,
  25.             colors: [["#C4FFA0", 0], ["#ffffff", 1]]
  26.           })
  27.           .clip(new Path().commands(this.pathCommands1))
  28.  
  29.         Path()
  30.           .commands(this.pathCommands2)
  31.           .fill('none')
  32.           .linearGradient(
  33.           {
  34.             angle: 50,
  35.             colors: [['#8CC36A', 0.1], ["#B3EB90", 0.4], ["#ffffff", 0.7]]
  36.           })
  37.           .clip(new Path().commands(this.pathCommands2))
  38.       }
  39.       .height('630px')
  40.       .width('630px')
  41.       .scale({ x: this.scaleValue, y: this.scaleValue })
  42.       .opacity(this.opacityValue)
  43.       .onAppear(() => {
  44.         animateTo({
  45.           duration: 1000,
  46.           curve: this.curve1,
  47.           delay: 100,
  48.           onFinish: () => {
  49.             setTimeout(() => {
  50.               router.replace({ url: "pages/FoodCategoryList" })
  51.             }, 1000);
  52.           }
  53.         }, () => {
  54.           this.opacityValue = 1
  55.           this.scaleValue = 1
  56.         })
  57.       })
  58.  
  59.       Text('Healthy Diet')
  60.         .fontSize(26)
  61.         .fontColor(Color.White)
  62.         .margin({ top: 300 })
  63.  
  64.       Text('Healthy life comes from a balanced diet')
  65.         .fontSize(17)
  66.         .fontColor(Color.White)
  67.         .margin({ top: 4 })
  68.     }
  69.     .width('100%')
  70.     .height('100%')
  71.     .linearGradient(
  72.       {
  73.         angle: 180,
  74.         colors: [['#BDE895', 0.1], ["#95DE7F", 0.6], ["#7AB967", 1]]
  75.       })
  76.   }
  77. }

2.2 -> 页面转场动画

食物分类列表页和食物详情页之间的共享元素转场，即点击FoodListItem/FoodGridItem后，食物缩略图会放大，随着页面跳转，到食物详情页的大图。

1. 设置FoodListItem和FoodGridItem的Image组件的共享元素转场方法(sharedTransition)。转场id为foodItem.id，转场动画时长为1s，延时0.1s播放，变化曲线为贝塞尔曲线Curves.cubicBezier(0.2, 0.2, 0.1, 1.0) ，需引入curves模块。

共享转场时会携带当前元素的被设置的属性，所以创建Row组件，使其作为Image的父组件，设置背景颜色在Row上。

在FoodListItem的Image组件上设置autoResize为false，因为image组件默认会根据最终展示的区域，去调整图源的大小，以优化图片渲染性能。在转场动画中，图片在放大的过程中会被重新加载，所以为了转场动画的流畅，autoResize设置为false。

  1. // FoodList.ets
  2. import Curves from '@ohos.curves'
  3.  
  4. @Component
  5. struct FoodListItem {
  6.   private foodItem: FoodData
  7.   build() {
  8.     Navigator({ target: 'pages/FoodDetail' }) {
  9.       Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  10.         Row() {
  11.           Image(this.foodItem.image)
  12.             .objectFit(ImageFit.Contain)
  13.             .autoResize(false)
  14.             .height(40)
  15.             .width(40)
  16.             .sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100 })
  17.         }
  18.         
  19.         .margin({ right: 16 })
  20.         Text(this.foodItem.name)
  21.           .fontSize(14)
  22.           .flexGrow(1)
  23.         Text(this.foodItem.calories + ' kcal')
  24.           .fontSize(14)
  25.       }
  26.       .height(64)
  27.     }
  28.     .params({ foodData: this.foodItem })
  29.     .margin({ right: 24, left:32 })
  30.   }
  31. }
  32.  
  33. @Component
  34. struct FoodGridItem {
  35.   private foodItem: FoodData
  36.   build() {
  37.     Column() {
  38.       Row() {
  39.         Image(this.foodItem.image)
  40.           .objectFit(ImageFit.Contain)
  41.           .autoResize(false)
  42.           .height(152)
  43.           .width('100%')
  44.           .sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100 })
  45.       }
  46.       Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  47.         Text(this.foodItem.name)
  48.           .fontSize(14)
  49.           .flexGrow(1)
  50.           .padding({ left: 8 })
  51.         Text(this.foodItem.calories + 'kcal')
  52.           .fontSize(14)
  53.           .margin({ right: 6 })
  54.       }
  55.       .height(32)
  56.       .width('100%')
  57.       .backgroundColor('#FFe5e5e5')
  58.     }
  59.     .height(184)
  60.     .width('100%')
  61.     .onClick(() => {
  62.       router.push({ url: 'pages/FoodDetail', params: { foodId: this.foodItem } })
  63.     })
  64.   }
  65. }
  66.

2. 设置FoodDetail页面的FoodImageDisplay的Image组件的共享元素转场方法(sharedTransition)。设置方法同上。

  1. import Curves from '@ohos.curves'
  2.  
  3. @Component
  4. struct FoodImageDisplay {
  5.   private foodItem: FoodData
  6.   build() {
  7.     Stack({ alignContent: Alignment.BottomStart }) {
  8.       Image(this.foodItem.image)
  9.         .objectFit(ImageFit.Contain)
  10.         .sharedTransition(this.foodItem.id, { duration: 1000, curve: Curves.cubicBezier(0.2, 0.2, 0.1, 1.0), delay: 100 })
  11.       Text(this.foodItem.name)
  12.         .fontSize(26)
  13.         .fontWeight(500)
  14.         .margin({ left: 26, bottom: 17.4 })
  15.     }
  16.     .height(357)  
  17.   }
  18. }

3 -> 常见组件说明

组件是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

声明式开发范式目前可供选择的组件如下表所示。

组件类型
基础组件Blank、Button、Checkbox、CheckboxGroup、DataPanel、DatePicker、Divider、Gauge、Image、ImageAnimator、LoadingProgress、Marquee、Navigation、Progress、QRCode、Radio、Rating、RichText、ScrollBar、Search、Select、Slider、Span、Stepper、StepperItem、Text、TextArea、TextClock、TextInput、TextPicker、TextTimer、TimePicker、Toggle、Web、XComponent
容器组件AlphabetIndexer、Badge、Column、ColumnSplit、Counter、Flex、GridContainer、Grid、GridItem、List、ListItem、Navigator、Panel、Refresh、Row、RowSplit、Scroll、SideBarContainer、Stack、Swiper、Tabs、TabContent
媒体组件Video
绘制组件Circle、Ellipse、Line、Polyline、Polygon、Path、Rect、Shape
画布组件Canvas

感谢各位大佬支持！！！

互三啦！！！

学习交流|商务合作|请联系我
微信名片
注：本文转载自blog.csdn.net的枫叶丹4的文章"https://blog.csdn.net/weixin_74809706/article/details/145183972"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！