Gesture Password, Text Gradient, Page Return Value Passing, Network Image Display, Timer

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Gesture Password, Text Gradient, Page Return Value Passing, Network Image Display, Timer

1. HarmonyOS gesture password component?

For setting passwords using a 3x3 grid pattern, refer to the following links:

Pattern lock component: https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Tools/PatternLock
Also refer to PatternLock: A pattern password lock component for password verification scenarios, using a 3x3 grid to input passwords.

2. How to handle text gradient colors in HarmonyOS?

Achieve this by combining linearGradient with blendMode. Refer to the documentation:

Demo example:

@Entry
@Component
struct Index {
  @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%')
  }
}

3. How to pass values back when returning from the next interface using HarmonyOS pushDestinationByName?

class PageParam {
  constructor(num_: number) {
    this.num = num_;
  }

  num: number = 0;
}

class BackParam {
  constructor(backStr_: string) {
    this.backStr = backStr_;
  }

  backStr: string = "";
}

@Component
struct PageOne {
  private stack: NavPathStack | null = null;
  private name: string = "";
  private paramNum: number = 0;
  @State backStr: string = "No information"

  build() {
    NavDestination() {
      Column() {
        Text("NavPathInfo: name: " + this.name + ", paramNum: " + this.paramNum)
        Text(this.backStr)

        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            if (this.stack) {
              let p = new PageParam(this.paramNum + 1);
              this.stack.pushPath({
                name: "pageOne", param: p, onPop: (popInfo: PopInfo) => {
                  console.info(' result: ' + JSON.stringify(popInfo.result));
                  this.backStr = popInfo.result['backStr'] as string
                }
              });
            }
          })
        Button('pop', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.stack?.pop(new BackParam("Return info" + this.paramNum))
          })
      }
      .width('100%')
      .height('100%')
    }
    .hideTitleBar(true)
    .title('pageOne')
    .onReady((ctx: NavDestinationContext) => {
      try {
        this.name = ctx?.pathInfo?.name;
        this.paramNum = (ctx?.pathInfo?.param as PageParam)?.num;
        this.stack = ctx.pathStack;
      } catch (e) {
        console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`)
      }
    })
  }
}

@Entry
@Component
struct NavigationExample2 {
  private stack: NavPathStack = new NavPathStack();
  @State backStr: string = "No information"

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      PageOne()
    }
  }

  build() {
    Navigation(this.stack) {
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
        Text(this.backStr)
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            let p = new PageParam(1);
            this.stack.pushPath({
              name: "pageOne", param: p, onPop: (popInfo: PopInfo) => {
                console.info(' result: ' + JSON.stringify(popInfo.result));
                this.backStr = popInfo.result['backStr'] as string
              }
            })
          })
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .navDestination(this.PageMap)
    .title('Navigation')
  }
}

4. When HarmonyOS Image displays network images, does the system download them to local storage, and can these local images be accessed?

The Image component loads network images by first reading from the network and then caching them. Subsequent loads of the same image will read from the cache.

5. Usage of HarmonyOS setInterval()?

Why does the timer stop after running for a while if it's supposed to execute infinitely without manual clearing?

When setting a timer in the aboutToAppear lifecycle, if not manually cleared, the timer will automatically stop in the aboutToDisappear lifecycle. This occurs because when the component or application is about to be removed or hidden, the system automatically cleans up related resources and timers to prevent memory leaks and potential issues.

DEV Community