Component Size Acquisition, No-Track Solution, Poster Component, Routing Table, Text Gradient Effect

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Component Size Acquisition, No-Track Solution, Poster Component, Routing Table, Text Gradient Effect

1. How to Obtain the Size of a Component in HarmonyOS?

In addition to onAreaChange, you can use componentUtils.getRectangleById("componentID") to get the component's size information. Note that the units differ: getRectangleById returns pixels (px), while onAreaChange uses viewport units (vp).

Reference document:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#getrectanglebyid

2. HarmonyOS No-Track Solution

Refer to the tracking solutions in the following links:

3. How to Achieve Text Gradient Effects in HarmonyOS?

Use a combination of linearGradient and blendMode to achieve this effect.

Reference 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 Component for Generating Posters

A third-party library and online design tool with poster design and image editing functions, based on the open-source Canvas version of [Gaoding Design]. Suitable for various scenarios, such as poster generation, e-commerce product image creation, long-form article image design, video/WeChat official account cover editing, etc.

https://gitee.com/dromara/yft-design

5. HarmonyOS Navigation: System Routing Table Fails to Pass Parameters to Pages

Refer to the following 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)
}

Parameter passing via routing table:

index.ets:

@Entry
@Component
struct NavigationExample {
  // Bind 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 (child page bound to NavPathStack):

@Consume('NavPathStack') pageInfo: NavPathStack;

aboutToAppear(): void {
  this.message = this.pageInfo.getParamByIndex(0) as string
  console.log(JSON.stringify(this.pageInfo));
}