【每日学点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：

@Entry
@Component
struct 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
@Builder
routerMap(builderName: string, param: object) {
  if (builderName === 'featureA') {
    FeatureIndex(param);
  }
};

aboutToAppear(): void {
  this.entryHapRouter.pushPathByName( "featureA", "测试", true)
}

//FeatureIndex.ets
@Builder
export 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
@Component
struct 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));
}