控件状态变化场景
========

#### 开发实例

例如下图，播放暂停按钮对应着两种状态，在状态切换时需要实时变化对应的标注信息。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f2/v3/wAZzUr-lTMqMbehnIVjJPQ/zh-cn_image_0000002633848144.png?HW-CC-KV=V1&HW-CC-Date=20260709T132230Z&HW-CC-Expire=86400&HW-CC-Sign=7CD07F176E946237B1B9B354B70F0C94316ABF8A48625BD35B6C2C6C1669B2E0)

import { PromptAction } from "@kit.ArkUI"

const RESOURCE\_STR\_PLAY: Resource = $r('sys.media.ohos\_ic\_public\_play');
const RESOURCE\_STR\_PAUSE: Resource = $r('sys.media.ohos\_ic\_public\_pause');

@Entry
@Component
export struct Rule\_2\_1\_8 {
  title: string = 'Rule 2.1.8';
  @State isPlaying: boolean = true;
  uiContext: UIContext = this.getUIContext();
  promptAction: PromptAction = this.uiContext.getPromptAction();
  play() {
    console.info('play audio file');
  }

  pause() {
    console.info('pause playing of audio file');
  }

  build() {
    NavDestination() {
      Column() {
        Flex({
          direction: FlexDirection.Column,
          alignItems: ItemAlign.Center,
          justifyContent: FlexAlign.Center,
        }) {
          Row() {
            Image(this.isPlaying ? RESOURCE\_STR\_PAUSE : RESOURCE\_STR\_PLAY)
              .width(50)
              .height(50)
              .onClick(() => {
                this.promptAction.showToast({
                  message :this.isPlaying ? 'Play' : 'Pause'
                })
                this.isPlaying = !this.isPlaying;
                if (this.isPlaying) {
                  this.play();
                } else {
                  this.pause();
                }
              })
              .accessibilityText(this.isPlaying ? 'Pause' : 'Play') // 设置可访问性框架的注释信息。
          }
        }
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White)
      }
    }.title(this.title)
  }
}