Text Height Calculation, Control Background Animation, Dotted Line Functionality, Screenshot Prevention

[Daily HarmonyOS Next Knowledge] Text Height Calculation, Control Background Animation, Dotted Line Functionality, Screenshot Prevention, Entry Home Page Replacement

1. How to calculate the height of a HarmonyOS Text component?

When the backend returns copy, the height of the displayed text needs to be calculated based on its width.

Use measure.measureTextSize to calculate text height. Reference documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-measure-V5

The @ohos.measure module provides text width and height calculations:

import { MeasureText } from '@kit.ArkUI'


@Entry
@Component
struct Index {
  textSize: SizeOptions = MeasureText.measureTextSize({
    // It is recommended to use this.getUIContext().getMeasureUtils().measureText()
    textContent: "Hello World",
    fontSize: '50px'
  })

  build() {
    Row() {
      Column() {
        Text(`The width of 'Hello World': ${this.textSize.width}`)
        Text(`The height of 'Hello World': ${this.textSize.height}`)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2. How to animate a control's background using linearGradient and animation when a Column appears in HarmonyOS?

The following animation approach is ineffective:

Row()
  .alignItems(VerticalAlign.Center)
  .width('100%')
  .height('32lpx')
  .animatableBgColor(this.bgColor(item.type), this.animationVal)
  .onAppear(() => {
    if (index === 0) {
      animateTo({
        delay: 200, onFinish: () => {
          this.animationVal = 0;
        }
      }, () => {
        this.animationVal = 1;
      })
    }
  })



@AnimatableExtend(Row)
function animatableBgColor(colors: string[], position: number) {
  .linearGradient(position === 0 ? {
    colors: [
      ['#00000000', 0.0],
      ['#00000000', 1.0],
    ]
  } : {
    angle: 90,
    colors: [
      [colors[0], 0.0],
      [colors[1], position],
      [colors[2], 1.0],
    ]
  })
}

Refer to the demo below:

@Entry
@Component
struct Page2 {
  @State linearGradientParam: number = 0.1
  @State animationVal: number = 1
  @State flage: boolean = false
  build() {
    Column() {
      Column() {
        Text('Test').fontSize('32lpx').fontWeight(FontWeight.Medium)
      }
      .width('228lpx')
      .height('88lpx')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      // Set the color to transparent
      .linearGradient({
        angle: '109.26deg',
        colors: [
          [this.animationVal === 0 ? Color.Transparent : (this.flage ? Color.Transparent : '#008c8c'), 0.1],
          [this.animationVal === 0 ? Color.Transparent : (this.flage ? Color.Transparent : 'rgba(255, 255, 255, 0.4)'), 0.5],
        ]
      })
      .onAppear(() => {
        console.log('console', this.animationVal);
        animateTo({
          duration: 2000, onFinish: () => {
            console.log("animation finish")
          }
        }, () => {
          this.animationVal = 0
        })
      })
      Button('click').onClick(() => {
        console.log('console', this.animationVal);
        console.log("aboutToAppear")
        if (this.animationVal === 1) {
          this.flage = false
          animateTo({
            duration: 2000, onFinish: () => {
              console.log("animation finish")
            }
          }, () => {
            this.animationVal = 0
          })
        } else {
          animateTo({
            duration: 2000, onFinish: () => {
              console.log("animation finish")
              this.flage = !this.flage
            }
          }, () => {
            this.animationVal = 1
          })
        }
      })
    }
  }
}

3. How to implement dotted lines in HarmonyOS?

Refer to the demo:

Divider().height(0).border({ width: {left:0,right:0,top:0,bottom:2},color:Color.Grey, style: BorderStyle.Dashed })

4. Why can screenshots still be taken after setting setWindowPrivacyMode in HarmonyOS?

Check if the following code is added to module.json5. setWindowPrivacyMode requires the ohos.permission.PRIVACY_WINDOW permission:

{"name" : "ohos.permission.PRIVACY_WINDOW"}

5. How to replace the home page in an entry in HarmonyOS?

Using router.replaceUrl({url: 'pages/Home'}) in the entry can only find routes within the entry's HSP. To navigate to pages in shared packages (HAR/HSP), use named routes.

Reference documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5#%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1

Steps for shared package routing:

1. In the shared package (HAR/HSP) page to which you want to navigate, name the @Entry-decorated component:

// library/src/main/ets/pages/Index.ets
@Entry({ routeName: 'myPage' })
@Component
export struct MyComponent {
  build() {
    Row() {
      Column() {
        Text('Library Page')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

1. Import the named route in the source page and use pushNamedRoute:

import { BusinessError } from '@kit.BasicServicesKit';
import '@ohos/library/src/main/ets/pages/Index'; // Import the named route page in the shared package

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })
        .backgroundColor('#ccc')
        .onClick(() => {
          try {
            this.getUIContext().getRouter().pushNamedRoute({
              name: 'myPage',
              params: {
                data1: 'message',
                data2: {
                  data3: [123, 456, 789]
                }
              }
            })
          } catch (err) {
            let message = (err as BusinessError).message
            let code = (err as BusinessError).code
            console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`);
          }
        })
    }
    .width('100%')
    .height('100%')
  }
}