【每日学点HarmonyOS Next知识】获取组件尺寸、无埋点方案、海报组件、路由 ...

1、HarmonyOS 怎样获取某个组件的尺寸？

除了onAreaChange外，还可以使用componentUtils.getRectangleById(“组件ID”)来获取组件的大小信息，需要注意的是两者获取的单元不同，getRectangleById获取到的单元为px，onAreaChange获取的单元为vp；
参考文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#getrectanglebyid

2、HarmonyOS 无埋点方案？

参考以下链接中的埋点方案

• https://developer.huawei.com/consumer/cn/forum/topic/0203905239627610146?fid=0101271690375130218
  
• https://developer.huawei.com/consumer/cn/forum/topic/0201755572813140726?fid=0101587866109860105
  

3、HarmonyOS 怎样实现笔墨渐变色效果？

怎样实现笔墨渐变色效果
使用linearGradient与blendMode结合可以实现该效果；
参考demo：

1. @Entry
2. @Component
3. struct GradientTest {
4.   @State message: string = 'Hello World';
6.   build() {
7.     Row() {
8.       Column() {
9.         Row() {
10.           Text(this.message)
11.             .fontSize(50)
12.             .fontWeight(FontWeight.Bold)
13.             .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
14.         }
15.         .linearGradient({
16.           direction: GradientDirection.Right,
17.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
18.         })
19.         .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
20.       }
21.       .width('100%')
22.     }
23.     .height('100%')
24.   }
25. }

复制代码

4、HarmonyOS 生成海报的组件？

第三方库在线计划工具，具备海报计划和图片编辑功能，基于Canvas的开源版【稿定计划】。适用于多种场景，如海报生成、电商产品图制作、文章长图计划、视频/公众号封面编辑等。
https://gitee.com/dromara/yft-design
5、HarmonyOS Navigation使用体系路由表，页面无法接收到参数？

参考以下demo

1. //index.ets
2. @Builder
3. routerMap(builderName: string, param: object) {
4.   if (builderName === 'featureA') {
5.     FeatureIndex(param);
6.   }
7. };
9. aboutToAppear(): void {
10.   this.entryHapRouter.pushPathByName( "featureA", "测试", true)
11. }
13. //FeatureIndex.ets
14. @Builder
15. export function FeatureIndex(value: object) {
16.   NavDestination() {
17.     Column() {
18.       Text('Hello FeatureA Page')
19.       Text(`传入的参数：${JSON.stringify(value)}`)
20.         .margin(20)
21.     }
22.     .width('100%')
23.     .height('100%')
24.   }
25.   .hideTitleBar(true)
26. }
29. //路由表的方式传递参数：
30. //index.ets
31. @Entry
32. @Component
33. struct NavigationExample {
34.   //绑定 NavPathStack
35.   @Provide('NavPathStack')pageInfo: NavPathStack = new NavPathStack()
37.   build() {
38.     Navigation(this.pageInfo) {
39.       Column() {
40.         Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })
41.           .width('80%')
42.           .height(40)
43.           .margin(20)
44.           .onClick(() => {
45.             this.pageInfo.pushPath({ name: 'pageOne',param:"测试参数" });
46.           })
47.       }
48.     }.title('NavIndex')
49.     .backgroundColor(Color.Orange)
51.   }
52. }
55. //PageOne.ets 子页面绑定NavPathStack
56. @Consume('NavPathStack') pageInfo: NavPathStack;
58. aboutToAppear(): void {
59.   this.message = this.pageInfo.getParamByIndex(0) as string
60.   console.log(JSON.stringify(this.pageInfo));
61. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。