Animations, Page Not Updating, Form Data, Configuring Globally Effective Fonts, Route Navigation with Parameters

[Daily HarmonyOS Next Knowledge] Animations, Page Not Updating, Form Data, Configuring Globally Effective Fonts, Route Navigation with Parameters

1. How to implement animations in HarmonyOS?

How to create animations for expanding and collapsing layouts?

Demo for image show/hide animation:

@Entry
@Component
struct Index1 {
  @State message: string = 'Hide'
  @State isOpen: boolean = true;
  @State imageHeight: number = 300;

  build() {
    Column() {
      Button(this.message).onClick((event: ClickEvent) => {
        this.isOpen = !this.isOpen;
        animateTo({
          duration: 600,
          curve: Curve.Ease,
          onFinish: () => {
          }
        },
        () => {
          if (this.isOpen) {
            this.message = 'Hide';
            this.imageHeight = 300;
          } else {
            this.message = 'Show';
            this.imageHeight = 0;
          }
        })
      })
      .fontSize(26)
      .margin(({ top: 36 }))

      Image($r('app.media.startIcon'))// Text('hhhhh')
        .height(this.imageHeight)
        .width(300)
        .margin(({ top: 36 }))
        .border({ width: 3, color: 'white' })
    }
  }
}

2. Why aren't HarmonyOS pages updating?

Refresh the page by changing a value in an object. Refer to the code below:

class City {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

@Entry
@Component
struct Index {
  @State isEnable: boolean = true;
  url: string = '';
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State city: City = new City('Nanjing');

  build() {
    Stack() {
      Image($r('app.media.ic_app_background')).width('100%');

      Column() {
        Text(this.city.name).fontColor(Color.White).textAlign(TextAlign.Start)
          .margin({ top: 20 });

        Rect({ width: '90%', height: 100 })
          .radius(10)
          .fill(Color.Blue)
          .stroke(Color.Transparent)
          .margin({ top: 10 })
          .onClick(() => {
            this.city.name = 'Shanghai';
          });
      }
    }
  }
}

3. The MultiFormData interface in HarmonyOS multiFormDataList cannot be implemented. How to assign existing list data to multiFormDataList?

The multiFormDataList type does not exist. Here, Array<MultiFormData> is used, which is an array. Normal array operations can be used to encapsulate data.

4. How to receive parameters during route navigation in HarmonyOS?

How to parse and pass parameters after navigation using the official RouterModel component?

Reference code:

// Define the class
export class routerParams {
  key: string;
  value: string;

  constructor(key: string, value: string) {
    this.key = key;
    this.value = value;
  }
}

// Navigation code
buildRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.H5_PAGE,
  new routerParams('www.index.com', 'Click'))

@Builder
export function harBuilder(value: routerParams) {
  NavDestination() {
    Column() {
      // Parsed correctly here
      Text(`The parsed parameter: ${JSON.stringify(value)}`).onClick(() => {
      });

      // Next step = ???
      H5Page({ url: value?.key });
    }
    .width('100%')
    .height('100%');
  }
  .title('Login')
  .onBackPressed(() => {
    RouterModule.pop(RouterNameConstants.ENTRY_HAP);
    return true;
  })
  .hideTitleBar(true);
}

5. Is font.registerFont globally effective in HarmonyOS? For a font, does registering it once globally make it effective across all pages during the app's lifecycle?

Is font.registerFont globally effective? For a font, does registering it once globally make it effective across all pages during the app's lifecycle?

Reference link:

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-font.md

To use a custom font globally in the app, register it in the onWindowStageCreate lifecycle of the EntryAbility.ets file via the windowStage.loadContent callback.

It is recommended to use the getFont method in UIContext to obtain the Font object associated with the current UI context.

// xxx.ets
@Entry
@Component
struct FontExample {
  @State message: string = 'Hello World';
  // iconFont example. Assume 0000 is the Unicode for the specified icon. Developers need to obtain the Unicode from the registered iconFont's ttf file.
  @State unicode: string = '\u0000';
  @State codePoint: string = String.fromCharCode(0x0000);
  private uiContext: UIContext = this.getUIContext();

  aboutToAppear() {
    // Both familyName and familySrc support system resources
    this.uiContext.getFont().registerFont({
      // It is recommended to use this.getUIContext().getFont().registerFont()
      familyName: $r('app.string.font_name'),
      familySrc: $r('app.string.font_src')
    });

    // familySrc supports RawFile
    this.uiContext.getFont().registerFont({
      familyName: 'mediumRawFile',
      familySrc: $rawfile('font/medium.ttf')
    });

    // Register iconFont
    this.uiContext.getFont().registerFont({
      familyName: 'iconFont',
      familySrc: '/font/iconFont.ttf'
    });

    // Both familyName and familySrc support strings
    this.uiContext.getFont().registerFont({
      familyName: 'medium',
      familySrc: '/font/medium.ttf' // The font folder is at the same level as the pages directory
    });
  }

  build() {
    Column() {
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('medium'); // medium: The name of the registered custom font ($r('app.string.mediumFamilyName'), 'mediumRawFile', etc., can also be used normally)

      // Two ways to use iconFont
      Text(this.unicode)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont');

      Text(this.codePoint)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont');
    }
    .width('100%');
  }
}