使用Counter实现图片的切换

@Entry
@Component
struct Index {
  @State imageCount: number = 0;
  private images: Resource[] = [$r('app.media.ic_button_circle_add'), $r('app.media.ic_blank_and_divider'),
    $r('app.media.ic_select_option_gesture'), $r('app.media.ic_prop_size'),
    $r('app.media.ic_custom_dialog_voice')]
  build() {
    Column() {
      Counter() {
        Image(this.images[this.imageCount])
          .width(20)
          .height(20)
      }.onInc(() => {
        if (this.imageCount < this.images.length - 1)
          this.imageCount++;
      })
      .onDec(() => {
        if (this.imageCount > 0)
          this.imageCount--;
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.