Like Animation Implementation, Grid Visible Items, Refresh Component, Code Specifications, State Variables

[Daily HarmonyOS Next Knowledge] Like Animation Implementation, Grid Visible Items, Refresh Component, Code Specifications, State Variables

1. How to Implement a Like Animation in HarmonyOS?

You can add an overlay component to the target component. Refer to the documentation:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-overlay-V5

The overlay is a container component (e.g., Stack) that includes multiple (e.g., 5) Image components set to invisible. When the user likes an item:

1. Sequentially set the visible property of these Image components.
2. Use a timer to reset them to invisible with a fade-out animation.
3. Randomize their offset values to display in different positions, then reset when hidden.

2. Can I Dynamically Get All Visible Items in a HarmonyOS Grid?

I want to collect data from all child components when the Grid is displayed. However, if I use onVisibleAreaChange in child components, it triggers individually, making it hard to determine when all items are loaded.

You can use the onScrollIndex interface to get visible elements. Refer to:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5

3. Half of the Icon Remains Visible After the HarmonyOS Refresh Component Collapses?

When wrapping a List with Refresh and using a custom customRefreshComponent, half of the icon remains visible after refreshing.

customRefreshComponent() {
  Stack() {
    Row() {
      LoadingProgress().height(32)
      Text("Refreshing...").fontSize(16).margin({ left: 20 })
    }
    .alignItems(VerticalAlign.Center)
  }.width("100%").align(Alignment.Center)
  //.clip(true)
  .constraintSize({minHeight:32})
}
// Solution: Uncomment .clip(true) or set .constraintSize({minHeight:32}). Adjust minHeight according to LoadingProgress height.

4. HarmonyOS Code Development Specifications?

Refer to Code Linter for checks:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-code-linter-V5

Create a code-linter.json5 configuration file in the project root to define:

• files: Files to check (default: all .ets files in selected directories).
• ignore: Directories to exclude (e.g., build/**/*).
• ruleSet: Rule sets to apply (multiple supported):
  • General rules: @typescript-eslint
  • Multi-device rules: @cross-device-app-dev
  • ArkTS style rules: @hw-stylistic
  • Security rules: @security
  • Performance rules: @performance
  • Preview rules: @previewer

5. How to Pass References to @Trace-Decorated Variables with ObserverV2?

@ObservedV2 cannot be used with @Prop directly (causes errors). Example code:

@ObservedV2
class ViewModel {
  @Trace title: string = "Start"
  @Trace title2: string = "t1"
  @Trace observeList: DemoItemObserved[] = []

  loadData() {
    setTimeout(() => {
      this.title = "Success";
      this.title2 = "t2";
      for (let index = 0; index < 4; index++) {
        this.observeList.push(new DemoItemObserved(`Zhang${index}`, "Chinese School"))
      }
    }, 2000)
  }
}

@ObservedV2
class DemoItemObserved {
  @Trace title: string = "Zhang Da"
  @Trace subTitle: string = "Foreign Languages School"

  constructor(title: string, subTitle: string) {
    this.title = title;
    this.subTitle = subTitle;
  }
}

@Component
struct View1 {
  @Prop title: string
  build() {
    Text(this.title)
  }
}

@Component
struct View2 {
  viewModel: ViewModel = new ViewModel()

  build() {
    List() {
      ForEach(this.viewModel.observeList, (item: DemoItemObserved) => {
        ListItem() {
          Row() {
            Text(item.title)
            Text(item.subTitle)
          }
        }
      })
    }
  }
}

@Entry
@Component
struct Index {
  viewModel: ViewModel = new ViewModel()

  build() {
    Column() {
      Button("Simulate Loading Data")
        .onClick(() => {
          this.viewModel.loadData()
        })
      Text(this.viewModel.title)
      View1({ title: this.viewModel.title2 })
      View2({ viewModel: this.viewModel })
    }
  }
}