目录

自定义控件走焦顺序

设计场景

从API版本18开始，开启屏幕朗读后用户可以通过单指左右滑动实现聚焦的焦点切换，当前焦点默认切换顺序为按照节点树顺序走焦，如果默认走焦顺序不满足开发者需要实现的功能场景时，需要开发者通过自定义设置下一个焦点的方式重新定义走焦顺序。

accessibilityNextFocusId属性用于指定焦点移动过程中下一个被聚焦组件的id。建议开发者将聚焦顺序按照画面显示的自上而下、自左向右方向设置。

从API版本26.0.0开始，新增参数nextFocusParams，可以设置焦点搜索是否应考虑目标元素后代中的可聚焦节点。

参数说明

表1 接口入参说明

属性 类型 说明
nextId string 指定下个组件的id
nextFocusParams AccessibilityNextFocusParams 详细参数

表2 AccessibilityNextFocusParams说明

属性 类型 说明
isConsiderDescendants boolean 焦点搜索是否应考虑目标元素后代中的可聚焦节点（默认false）

开发流程

本实例中组件的视觉呈现顺序为“A->B->C->D->E”，在设置accessibilityNextFocusId参数后最终走焦顺序为“A->C->D->E”。

@Entry
@Component
export struct NextFocusIdBasic {
  title: string = 'NextFocusIdBasic';

  build() {
    NavDestination() {
      Column({ space: 10 }) {
        Button('按钮A, Next为column')
          .onClick(() => {
          }).fontSize(20).width('80%')
          .accessibilityNextFocusId('next_column')

        Button('按钮B')
          .onClick(() => {
          }).fontSize(20).width('80%')

        Column() {
          Button('按钮C')
            .onClick(() => {
            }).fontSize(20).width('80%')

          Button('按钮D')
            .onClick(() => {
            }).fontSize(20).width('80%')
        }
        .id('next_column')
        .backgroundColor(Color.Green)

        Button('按钮E')
          .id('btn_e')
          .onClick(() => {
          }).fontSize(20).width('80%')
      }
      .width('100%')
      .height('100%')
    }
    .title(this.title)
  }
}