主动通知页面变化的场景
===========

#### 设计场景

应用自定义的页面可以通过堆叠的方式覆盖在原页面上，实现页面切换的效果，但是系统无法自动识别到这种场景，可能会导致焦点丢失。此时，应用可以调用主动通知页面变化的接口，通知屏幕朗读在新页面上寻找节点聚焦。该接口支持指定新页面的根节点，如果指定了有效的根节点，则从该根节点开始找首焦点聚焦，如果未指定，则默认从当前窗口根节点开始找首焦点聚焦。

#### 主动通知页面变化接口相关参数说明：

**表1** EventInfo 说明

| 属性 | 类型 | 说明 | 例 |
| :-- | :-- | :-- | :-- |
| type | EventType | 主动通知页面变化事件类型。 | pageActive |
| bundleName | string | 目标应用名。 | 'com.example.accessibilityinfo' |
| triggerAction | Action | 触发事件的Action。 | common |
| customId | string | 自定义页面根节点id。 | 'abc345' |

#### 开发实例

如下示例实现一个自定义页面切换，通过改变[Stack](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-stack)子组件Z序的方式实现切换页面的效果：

import { accessibility } from '@kit.AccessibilityKit'

@Entry
@Component
export struct Rule\_2\_1\_16 {
  title: string = 'Rule 2.1.16';
  // 定义状态变量，用于控制顶层显示的层数。
  @State topLayer: number = 0;

  // 定义自定义页面。
  @Builder
  Layer(text: string, index: number) {
    Column() {
      Column() {
        Text(text)
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 20 })
        Text(\`${text} 测试节点1\`)
        Text(\`${text} 测试节点2\`)
        Text(\`${text} 测试节点3\`)
        // 创建按钮用于切换页面。
        Button(\`页面切换${index}\`)
          .onClick(() => {
            // 判断当前顶层，在0与1之间切换。
            if (this.topLayer === 0) {
              this.topLayer = 1;
            } else {
              this.topLayer = 0;
            }
            // 定义事件信息描述，事件类型为pageActive，页面根节点id为\`Layer\_${this.topLayer}\`。
            const eventInfo: accessibility.EventInfo = ({
              type: 'pageActive',
              bundleName: 'com.samples.uiextensionandaccessibility',
              triggerAction: 'common',
              customId: \`Layer\_${this.topLayer}\`
            });
            // 发送主动通知页面变化的事件。
            accessibility.sendAccessibilityEvent(eventInfo).then(() => {
              console.info(\`pageActive event send Successed, customId=Layer\_${this.topLayer}.\`); // 发送成功日志。
            });
          })
      }
      // 指定自定义节点id，用于标识页面根节点。
      .id('Layer\_' + index)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(index === 0 ? Color.Red : Color.Green)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .borderRadius(16)
    .padding(20)
    // 修改页面Z序，用于实现页面切换效果。
    .zIndex(this.topLayer === index ? 1 : 0)
    // 根据当前页面是否顶层显示，指定自定义页面节点是否无障碍可识别，若否，则设置为不可识别。
    .accessibilityLevel(this.topLayer === index ? 'no' : 'no-hide-descendants')
  }

  build() {
    NavDestination() {
      Column() {
        Stack() {
          this.Layer('页面0', 0)
          this.Layer('页面1', 1)
        }
      }
    }
  }
}