Stopping Animations, Status Bar Text Color, Using `this` in Listeners, Adding Images to Rich Text Components

[Daily HarmonyOS Next Knowledge] Stopping Animations, Status Bar Text Color, Using this in Listeners, Adding Images to Rich Text Components, Dropdown Components

1. How to stop an animation and return to the initial static state in HarmonyOS?

Reference Demo:

// xxx.ets
@Entry
@Component
struct AnimateToExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State rotateAngle: number = 0
  private flag: boolean = true

  build() {
    Column() {
      Button('change size')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 3,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize = 150
              this.heightSize = 60
            })
          } else {
            animateTo({
              duration: 0,
            }, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag

          if (!this.flag) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 3,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize = 150
              this.heightSize = 60
            })
          }
        })
    }.width('100%').margin({ top: 5 })
  }
}

2. How to dynamically change the text color of the HarmonyOS status bar?

In full-screen mode, the status bar text color needs to adapt to the page theme.

1. Refer to examples for setting immersive windows.
2. Configure the window for full-screen layout, adjusting transparency, background/text colors, and highlighted icons of the navigation and status bars to maintain visual consistency with the main window.

let isLayoutFullScreen = true;
windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in setting the window layout to full-screen mode.');
});

let sysBarProps: window.SystemBarProperties = {
  statusBarColor: '#ff00ff',
  navigationBarColor: '#00ff00',
  statusBarContentColor: '#ffffff',
  navigationBarContentColor: '#ffffff'
};

windowClass.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) => {
  let errCode: number = err.code;
  if (errCode) {
    console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
    return;
  }
  console.info('Succeeded in setting the system bar properties.');
});

3. Why can't this be used in listener callbacks in HarmonyOS ETS?

In ETS, calling other methods via this within a listener callback results in this being undefined.

Problem Code:

class A{
  b() {}

  callback() {
    this.b(); // Error: this is undefined
  }

  Register() {
    on("xxx", this.callback)
  }

  Unregister() {
    off("xxx", this.callback)
  }
}

Solution: Use an arrow function to preserve this:

on("xxx", () => this.callback())

4. Why does the cursor disappear after adding an image to a HarmonyOS RichEditor?

When using addImageSpan or addBuilderSpan in RichEditor, clicking the image causes the cursor to disappear.

Solution:

Manually set the cursor position after adding content using setCaretOffset:

Button("add image")
  .onClick(() => {
    this.controller.addImageSpan($r("app.media.app_icon"), {
      imageStyle: {
        size: ["50px", "50px"],
        verticalAlign: ImageSpanAlignment.BOTTOM,
        layoutStyle: {
          borderRadius: undefined,
          margin: undefined
        }
      }
    })

    let moveOffset = 0;
    // Get the total content length
    this.controller.getSpans({ start: -1, end: -1 }).forEach((item) => {
      moveOffset += (item.offsetInSpan[1] - item.offsetInSpan[0])
    })

    // Manually position the cursor after adding the image
    this.controller.setCaretOffset(moveOffset)
    console.info('moveOffset', moveOffset)
  })

Note:

• When inserting content in the middle of text, select a specific position first to ensure the cursor remains visible.
• Cursor positioning is only required when appending content; inserting within text maintains the cursor automatically.

5. How to set a maximum height for the HarmonyOS Select() dropdown component?

The dropdown should scroll when there is a large dataset and adapt to content height for smaller datasets.

Solution:

Apply .constraintSize({minHeight:30,maxHeight:100}) to the Scroll component:

Scroll(this.scroller) {
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
    ForEach(this.homeList, (homeInfo: string, index: number) => {
      Column() {
        Row() {
          Text(homeInfo)
            .margin({ top: 12 })
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .onClick(() => {
              // Handle selection
            })
        }
        .margin({ top: 6 })
      }
    })
  }
  .margin({ left: 12, right: 12 })
}
.constraintSize({ minHeight: 30, maxHeight: 100 }) // Set maximum height here