【每日学点 HarmonyOS Next 知识】获取组件尺寸、无埋点方案、海报组件、路由表、文字渐变效果

2025-03-11
北京
本文字数：1454 字
阅读完需：约 5 分钟

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：

@Entry@Componentstruct GradientTest {  @State message: string = 'Hello World';
  build() {    Row() {      Column() {        Row() {          Text(this.message)            .fontSize(50)            .fontWeight(FontWeight.Bold)            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)        }        .linearGradient({          direction: GradientDirection.Right,          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]        })        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)      }      .width('100%')    }    .height('100%')  }}

复制代码

4、HarmonyOS 生成海报的组件？

第三方库在线设计工具，具备海报设计和图片编辑功能，基于 Canvas 的开源版【稿定设计】。适用于多种场景，如海报生成、电商产品图制作、文章长图设计、视频/公众号封面编辑等。https://gitee.com/dromara/yft-design

5、HarmonyOS Navigation 使用系统路由表，页面无法接收到参数？

参考以下 demo

//index.ets@BuilderrouterMap(builderName: string, param: object) {  if (builderName === 'featureA') {    FeatureIndex(param);  }};
aboutToAppear(): void {  this.entryHapRouter.pushPathByName( "featureA", "测试", true)}
//FeatureIndex.ets@Builderexport function FeatureIndex(value: object) {  NavDestination() {    Column() {      Text('Hello FeatureA Page')      Text(`传入的参数：${JSON.stringify(value)}`)        .margin(20)    }    .width('100%')    .height('100%')  }  .hideTitleBar(true)}

//路由表的方式传递参数：//index.ets@Entry@Componentstruct NavigationExample {  //绑定 NavPathStack  @Provide('NavPathStack')pageInfo: NavPathStack = new NavPathStack()
  build() {    Navigation(this.pageInfo) {      Column() {        Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })          .width('80%')          .height(40)          .margin(20)          .onClick(() => {            this.pageInfo.pushPath({ name: 'pageOne',param:"测试参数" });          })      }    }.title('NavIndex')    .backgroundColor(Color.Orange)
  }}

//PageOne.ets 子页面绑定NavPathStack@Consume('NavPathStack') pageInfo: NavPathStack;
aboutToAppear(): void {  this.message = this.pageInfo.getParamByIndex(0) as string  console.log(JSON.stringify(this.pageInfo));}