1# 焦点控制 2 3自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点。 4 5> **说明：** 6> 7> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 自定义组件无获焦能力，当设置[focusable](#focusable)、[enabled](ts-universal-attributes-enable.md#enabled)等属性为false，或者设置[visibility](ts-universal-attributes-visibility.md#visibility)属性为Hidden、None时，也不影响其子组件的获焦。 10> 11> - 组件主动获取焦点不受窗口焦点的控制。 12> 13> - 焦点开发参考[焦点开发指南](../../../ui/arkts-common-events-focus-event.md)。 14 15## focusable 16 17focusable(value: boolean) 18 19设置当前组件是否可以获焦。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------ | ------- | ---- | ------------------------------------------------------------ | 29| value | boolean | 是 | 设置当前组件是否可以获焦。<br/>**说明：**<br/>存在默认交互逻辑的组件例如[Button](ts-basic-components-button.md)、[TextInput](ts-basic-components-textinput.md)等，默认即为可获焦，[Text](ts-basic-components-text.md)、[Image](ts-basic-components-image.md)等组件则默认状态为不可获焦。不可获焦状态下，无法触发[焦点事件](ts-universal-focus-event.md)。 | 30 31## tabIndex<sup>9+</sup> 32 33tabIndex(index: number) 34 35自定义组件tab键走焦能力。 36 37**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44| ------ | ------ | ---- | ------------------------------------------------------------ | 45| index | number | 是 | 自定义组件tab键走焦能力。若有配置了tabIndex大于0的组件，则tab键走焦只会在tabIndex大于0的组件内按照tabIndex的值从小到大并循环依次走焦。若没有配置tabIndex大于0的组件，则tabIndex等于0的组件按照组件预设的走焦规则走焦。<br />[UiExtension](../js-apis-arkui-uiExtension.md)组件未适配tabIndex，在含有[UiExtension](../js-apis-arkui-uiExtension.md)组件的页面使用tabIndex会导致走焦错乱。<br />- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素。<br />- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。<br/>默认值：0 <br/> **说明：**<br/> tabIndex与focusScopeId不能混用。 46| 47 48## defaultFocus<sup>9+</sup> 49 50defaultFocus(value: boolean) 51 52设置当前组件是否为当前页面上的默认焦点。 53 54**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58**参数：** 59 60| 参数名 | 类型 | 必填 | 说明 | 61| ------ | ------- | ---- | ------------------------------------------------------------ | 62| value | boolean | 是 | 设置当前组件是否为当前页面上的默认焦点，仅在初次创建的页面第一次进入时生效。<br/>默认值：false<br/>**说明：** <br/>值为true则表示为默认焦点，值为false无效。<br/>若页面内无任何组件设置defaultFocus(true)，API version 11及之前，页面的默认焦点是当前页面上首个可获焦的非容器组件，API version 11之后，页面的默认焦点就是页面的根容器。<br/>若某页面内有多个组件设置了defaultFocus(true)，则以组件树深度遍历找到的第一个组件为默认焦点。 | 63 64## groupDefaultFocus<sup>9+</sup> 65 66groupDefaultFocus(value: boolean) 67 68设置当前组件是否为当前组件所在容器获焦时的默认焦点。 69 70**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74**参数：** 75 76| 参数名 | 类型 | 必填 | 说明 | 77| ------ | ------- | ---- | ------------------------------------------------------------ | 78| value | boolean | 是 | 设置当前组件是否为当前组件所在容器获焦时的默认焦点，仅在初次创建容器节点第一次获焦时生效。<br/>默认值：false<br/>**说明：** <br/>必须与[tabIndex](#tabindex9)联合使用，当某个容器设置了tabIndex，且容器内某子组件或容器自身设置了groupDefaultFocus(true)，当该容器首次TAB键获焦时，会自动将焦点转移至该指定的组件上。若容器内（包含容器本身）有多个组件设置了groupDefaultFocus(true)，则以组件树深度遍历找到的第一个组件为最终结果。 | 79 80## focusOnTouch<sup>9+</sup> 81 82focusOnTouch(value: boolean) 83 84设置当前组件是否支持点击获焦能力。 85 86**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 87 88**系统能力：** SystemCapability.ArkUI.ArkUI.Full 89 90**参数：** 91 92| 参数名 | 类型 | 必填 | 说明 | 93| ------ | ------- | ---- | ------------------------------------------------------------ | 94| value | boolean | 是 | 设置当前组件是否支持点击获焦能力。<br/>默认值：false<br/>**说明：** <br/>仅在组件可点击时才能正常获取焦点。 | 95 96## focusBox<sup>12+</sup> 97 98focusBox(style: FocusBoxStyle): T 99 100设置当前组件系统焦点框样式。 101 102**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 103 104**系统能力：** SystemCapability.ArkUI.ArkUI.Full 105 106**参数：** 107 108| 参数名 | 类型 | 必填 | 说明 | 109| ---- | ---- | ---- | ---- | 110| style | [FocusBoxStyle](#focusboxstyle12对象说明) | 是 | 设置当前组件系统焦点框样式。<br/>**说明：** <br/>该样式仅影响走焦状态下展示了系统焦点框的组件。 | 111 112 113## focusControl<sup>9+</sup> 114 115焦点控制模块 116 117**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 118 119### requestFocus<sup>9+</sup> 120 121requestFocus(value: string): boolean 122 123方法语句中可使用的全局接口，调用此接口可以主动让焦点转移至参数指定的组件上。非当前帧生效，在下一帧才生效，建议使用FocusController中的[requestFocus](../js-apis-arkui-UIContext.md#requestfocus12)。 124 125**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 126 127**参数：** 128 129| 名称 | 类型 | 必填 | 描述 | 130| ----- | ------ | ---- | ---- | 131| value | string | 是 | 目标组件使用接口key(value: string)或id(value: string)绑定的字符串。 | 132 133**返回值：** 134 135| 类型 | 说明 | 136| ------- | ---- | 137| boolean | 返回是否成功给目标组件申请到焦点。若参数指向的目标组件存在，且目标组件可获焦，则返回true，否则返回false。 | 138 139> **说明：** 140> 141> 支持焦点控制的组件：[TextInput](ts-basic-components-textinput.md)、[TextArea](ts-basic-components-textarea.md)、[Search](ts-basic-components-search.md)、[Button](ts-basic-components-button.md)、[Text](ts-basic-components-text.md)、[Image](ts-basic-components-image.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)。焦点事件当前仅支持在真机上显示运行效果。 142 143## FocusBoxStyle<sup>12+</sup>对象说明 144 145**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 146 147| 名称 | 参数类型 | 必填 | 描述 | 148| ---- | ---- | ---- | ---- | 149| margin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 焦点框相对组件边缘的距离。<br/>正数代表外侧，负数代表内侧。不支持百分比。 | 150| strokeColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 焦点框颜色。 | 151| strokeWidth | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 焦点框宽度。<br/>不支持负数与百分比。| 152 153## focusScopePriority<sup>12+</sup> 154 155focusScopePriority(scopeId: string, priority?: FocusPriority): T 156 157设置当前组件在指定容器内获焦的优先级。需要配合focusScopeId一起使用。 158 159**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 160 161**系统能力：** SystemCapability.ArkUI.ArkUI.Full 162 163**参数：** 164 165| 参数名 | 类型 | 必填 | 说明 | 166| ------ | ------- | ---- | ------------------------------------------------------------ | 167| scopeId | string | 是 | 当前组件设置的获焦优先级生效的容器组件的id标识。<br/>**说明：** <br/>1.当前组件必须在scopeId所标识的容器内或者当前组件所属容器在scopeId所标识的容器内。<br/>2.组件不可重复设置多个优先级。<br/>3.设置了focusScopeId的容器组件不可设置优先级。 | 168| priority | [FocusPriority](#focuspriority12) | 否 | 获焦优先级。<br/>**说明：** <br/>priority不设置则组件为默认AUTO优先级。<br/>优先级对走焦以及获焦组件的影响：<br/>1.容器整体获焦（层级页面切换/焦点切换到焦点组/容器组件使用requestFocus申请焦点）时，若容器内存在优先级为PREVIOUS的组件，则优先级为PREVIOUS的组件获焦，否则，由容器内上次获焦的组件获焦；<br/>2.容器非整体获焦（非焦点组场景下使用tab键/方向键走焦）时，若容器为首次获焦，则容器内优先级最高的组件获焦，若容器非首次获焦，不考虑优先级按照位置顺序走焦。 | 169 170### FocusPriority<sup>12+</sup> 171 172**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 173 174**系统能力：** SystemCapability.ArkUI.ArkUI.Full 175 176| 名称 | 描述 | 177| ----------- | --------- | 178| AUTO | 默认的优先级，缺省时组件的获焦优先级。 | 179| PRIOR | 容器内优先获焦的优先级。优先级高于AUTO。 | 180| PREVIOUS | 上一次容器整体失焦时获焦节点的优先级。优先级高于PRIOR。 | 181 182## focusScopeId<sup>12+</sup> 183 184focusScopeId(id: string, isGroup?: boolean) 185 186设置当前容器组件的id标识，设置当前容器组件是否为焦点组。 187 188**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 189 190**系统能力：** SystemCapability.ArkUI.ArkUI.Full 191 192**参数：** 193 194| 参数名 | 类型 | 必填 | 说明 | 195| ------ | ------- | ---- | ------------------------------------------------------------ | 196| id | string | 是 | 设置当前容器组件的id标识。<br/>**说明：** <br/>单个层级页面下，id标识全局唯一，不可重复。 | 197| isGroup | boolean | 否 | 设置当前容器组件是否为焦点组。<br/>**说明：** <br/>焦点组不可嵌套，不可重复配置。<br/> 焦点组不能和tabIndex混用。<br/>配置焦点组的目的时使得容器及容器内的元素可以按照焦点组规则走焦。焦点组走焦规则：<br/>1.焦点组容器内只能通过方向键走焦，tab键会使焦点跳出焦点组容器。<br/>2.通过方向键使焦点从焦点组容器外切换到焦点组容器内时，若焦点组容器内存在优先级为PREVIOUS的组件，则优先级为PREVIOUS的组件获焦，否则，由焦点组容器内上次获焦的组件获焦。| 198 199## focusScopeId<sup>14+</sup> 200 201focusScopeId(id: string, isGroup?: boolean, arrowStepOut?: boolean) 202 203设置当前容器组件的id标识，设置当前容器组件是否为焦点组。 204 205**系统能力：** SystemCapability.ArkUI.ArkUI.Full 206 207**参数：** 208 209| 参数名 | 类型 | 必填 | 说明 | 210| ------ | ------- | ---- | ------------------------------------------------------------ | 211| id | string | 是 | 设置当前容器组件的id标识。<br/>**说明：** <br/>单个层级页面下，id标识全局唯一，不可重复。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 212| isGroup | boolean | 否 | 设置当前容器组件是否为焦点组。<br/>**说明：** <br/>焦点组不可嵌套，不可重复配置。<br/> 焦点组不能和tabIndex混用。<br/>配置焦点组的目的时使得容器及容器内的元素可以按照焦点组规则走焦。焦点组走焦规则：<br/>1.焦点组容器内只能通过方向键走焦，tab键会使焦点跳出焦点组容器。<br/>2.通过方向键使焦点从焦点组容器外切换到焦点组容器内时，若焦点组容器内存在优先级为PREVIOUS的组件，则优先级为PREVIOUS的组件获焦，否则，由焦点组容器内上次获焦的组件获焦。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 213| arrowStepOut<sup>14+</sup> | boolean | 否 | 设置能否使用方向键走焦出当前焦点组。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 | 214 215## tabStop<sup>14+</sup> 216 217tabStop(isTabStop: boolean) :T 218 219设置当前容器组件的tabStop，可决定在走焦时焦点是否会停留在当前容器。 220 221**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 222 223**系统能力：** SystemCapability.ArkUI.ArkUI.Full 224 225**参数：** 226 227| 参数名 | 类型 | 必填 | 说明 | 228| ------ | ------- | ---- | ------------------------------------------------------------ | 229| isTabStop | boolean | 是 | 设置当前容器组件是否为走焦可停留容器。<br/>**说明：** <br/>1.配置tabStop需要保障是容器组件且有可获焦的孩子组件，默认容器组件不能直接获焦。<br/> 2.通过[requestFocus](../js-apis-arkui-UIContext.md#requestfocus12)请求焦点，如果是容器组件且配置tabStop，焦点能够停留在容器组件，如果未配置tabStop，即使整条焦点链上有配置了tabStop的组件，该组件依然能获取到焦点。<br/>3.配置tabStop的容器不允许嵌套超过2层。<br/>tabStop走焦规则：<br/>1.通过tab键和方向键走焦，焦点会停留在配置了tabStop的组件上，如果焦点停留在配置了tabStop的容器内部时，可以走焦到容器内部的下一个可获焦组件，如果焦点停留在配置了tabStop的容器外部时，可以走焦到容器外的下一个可获焦组件。<br/>2.当焦点停留在tabStop上时，按Enter键可以走焦到内部第一个可获焦组件，按ESC能够将焦点退回到焦点链中不超过当前层级页面根容器的上一个配置了tabStop的组件，按空格键可以响应该容器的onClick事件。<br/>3.不建议根容器配置tabStop。如果根容器配置了tabStop，通过[clearFocus](../js-apis-arkui-UIContext.md#clearfocus12)将焦点清理到根容器，再按Enter键会重新走回内部上一次获焦组件，通过ESC键将焦点清理到根容器，再按Enter键会走焦到内部第一个可获焦组件。| 230 231**描述走焦的时候的按键以及获焦组件** 232 233 234 235当前焦点如果停留在button2时，按下tab键将会走焦到Column3上，再按下tab键会循环走焦到button1上。 236 237## 示例 238 239### 示例1（设置组件获焦和走焦的效果） 240 241该示例通过配置defaultFocus可以使绑定的组件成为页面创建后首次获焦的焦点，配置groupDefaultFocus可以使绑定的组件成为tabIndex容器创建后首次获焦的焦点，配置focusOnTouch可以使绑定的组件点击后立即获焦。 242 243```ts 244// focusTest.ets 245@Entry 246@Component 247struct FocusableExample { 248 @State inputValue: string = '' 249 250 build() { 251 Scroll() { 252 Row({ space: 20 }) { 253 Column({ space: 20 }) { 254 Column({ space: 5 }) { 255 Button('Group1') 256 .width(165) 257 .height(40) 258 .fontColor(Color.White) 259 .focusOnTouch(true) // 该Button组件点击后可获焦 260 Row({ space: 5 }) { 261 Button() 262 .width(80) 263 .height(40) 264 .fontColor(Color.White) 265 Button() 266 .width(80) 267 .height(40) 268 .fontColor(Color.White) 269 .focusOnTouch(true) // 该Button组件点击后可获焦 270 } 271 Row({ space: 5 }) { 272 Button() 273 .width(80) 274 .height(40) 275 .fontColor(Color.White) 276 Button() 277 .width(80) 278 .height(40) 279 .fontColor(Color.White) 280 } 281 }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed) 282 .tabIndex(1) // 该Column组件为按TAB键走焦的第一个获焦的组件 283 Column({ space: 5 }) { 284 Button('Group2') 285 .width(165) 286 .height(40) 287 .fontColor(Color.White) 288 Row({ space: 5 }) { 289 Button() 290 .width(80) 291 .height(40) 292 .fontColor(Color.White) 293 Button() 294 .width(80) 295 .height(40) 296 .fontColor(Color.White) 297 .groupDefaultFocus(true) // 该Button组件上级Column组件获焦时获焦 298 } 299 Row({ space: 5 }) { 300 Button() 301 .width(80) 302 .height(40) 303 .fontColor(Color.White) 304 Button() 305 .width(80) 306 .height(40) 307 .fontColor(Color.White) 308 } 309 }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed) 310 .tabIndex(2) // 该Column组件为按TAB键走焦的第二个获焦的组件 311 } 312 Column({ space: 5 }) { 313 TextInput({placeholder: 'input', text: this.inputValue}) 314 .onChange((value: string) => { 315 this.inputValue = value 316 }) 317 .width(156) 318 .defaultFocus(true) // 该TextInput组件为页面的初始默认焦点 319 Button('Group3') 320 .width(165) 321 .height(40) 322 .fontColor(Color.White) 323 Row({ space: 5 }) { 324 Button() 325 .width(80) 326 .height(40) 327 .fontColor(Color.White) 328 Button() 329 .width(80) 330 .height(40) 331 .fontColor(Color.White) 332 } 333 Button() 334 .width(165) 335 .height(40) 336 .fontColor(Color.White) 337 Row({ space: 5 }) { 338 Button() 339 .width(80) 340 .height(40) 341 .fontColor(Color.White) 342 Button() 343 .width(80) 344 .height(40) 345 .fontColor(Color.White) 346 } 347 Button() 348 .width(165) 349 .height(40) 350 .fontColor(Color.White) 351 Row({ space: 5 }) { 352 Button() 353 .width(80) 354 .height(40) 355 .fontColor(Color.White) 356 Button() 357 .width(80) 358 .height(40) 359 .fontColor(Color.White) 360 } 361 }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed) 362 .tabIndex(3) // 该Column组件为按TAB键走焦的第三个获焦的组件 363 }.alignItems(VerticalAlign.Top) 364 } 365 } 366} 367``` 368示意图： 369 370首次进入，焦点默认在defaultFocus绑定的TextInput组件上： 371 372 373 374首次按TAB键，焦点切换到tabIndex(1)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上： 375 376 377 378第二次按TAB键，焦点切换到tabIndex(2)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上： 379 380 381 382第三次按TAB键，焦点切换到tabIndex(3)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上： 383 384 385 386点击绑定了focusOnTouch的组件，组件自身获焦，焦点框被清除，再按下Tab键显示焦点框： 387 388 389 390### 示例2（设置指定组件获焦） 391 392该示例通过配置focusControl.requestFocus使指定组件获取焦点。 393 394> **说明：** 395> 396> 直接使用focusControl可能导致实例不明确的问题，建议使用[getUIContext](../js-apis-arkui-UIContext.md#uicontext)获取UIContext实例，并使用[getFocusController](../js-apis-arkui-UIContext.md#getfocuscontroller12)获取绑定实例的focusControl。 397 398```ts 399// requestFocus.ets 400@Entry 401@Component 402struct RequestFocusExample { 403 @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId'] 404 @State selectId: string = 'LastPageId' 405 406 build() { 407 Column({ space:20 }){ 408 Row({space: 5}) { 409 Button("id: " + this.idList[0] + " focusable(false)") 410 .width(200).height(70).fontColor(Color.White) 411 .id(this.idList[0]) 412 .focusable(false) 413 Button("id: " + this.idList[1]) 414 .width(200).height(70).fontColor(Color.White) 415 .id(this.idList[1]) 416 } 417 Row({space: 5}) { 418 Button("id: " + this.idList[2]) 419 .width(200).height(70).fontColor(Color.White) 420 .id(this.idList[2]) 421 Button("id: " + this.idList[3]) 422 .width(200).height(70).fontColor(Color.White) 423 .id(this.idList[3]) 424 } 425 Row({space: 5}) { 426 Button("id: " + this.idList[4]) 427 .width(200).height(70).fontColor(Color.White) 428 .id(this.idList[4]) 429 Button("id: " + this.idList[5]) 430 .width(200).height(70).fontColor(Color.White) 431 .id(this.idList[5]) 432 } 433 Row({space: 5}) { 434 Select([{value: this.idList[0]}, 435 {value: this.idList[1]}, 436 {value: this.idList[2]}, 437 {value: this.idList[3]}, 438 {value: this.idList[4]}, 439 {value: this.idList[5]}, 440 {value: this.idList[6]}]) 441 .value(this.selectId) 442 .onSelect((index: number) => { 443 this.selectId = this.idList[index] 444 }) 445 Button("RequestFocus") 446 .width(200).height(70).fontColor(Color.White) 447 .onClick(() => { 448 // 建议使用this.getUIContext().getFocusController().requestFocus() 449 let res = focusControl.requestFocus(this.selectId) // 使选中的this.selectId的组件获焦 450 if (res) { 451 this.getUIContext().getPromptAction().showToast({message: 'Request success'}) 452 } else { 453 this.getUIContext().getPromptAction().showToast({message: 'Request failed'}) 454 } 455 }) 456 } 457 }.width('100%').margin({ top:20 }) 458 } 459} 460``` 461 462示意图： 463 464按下TAB键，激活焦点态显示。 465申请不存在的组件获焦： 466 467 468 469申请不可获焦的组件获焦： 470 471 472 473申请存在且可获焦的组件获焦： 474 475 476 477### 示例3（设置焦点框样式） 478 479该示例通过配置focusBox修改组件的焦点框样式。 480 481```ts 482import { ColorMetrics, LengthMetrics } from '@kit.ArkUI' 483 484@Entry 485@Component 486struct RequestFocusExample { 487 build() { 488 Column({ space: 30 }) { 489 Button("small black focus box") 490 .focusBox({ 491 margin: new LengthMetrics(0), 492 strokeColor: ColorMetrics.rgba(0, 0, 0), 493 }) 494 Button("large red focus box") 495 .focusBox({ 496 margin: LengthMetrics.px(20), 497 strokeColor: ColorMetrics.rgba(255, 0, 0), 498 strokeWidth: LengthMetrics.px(10) 499 }) 500 } 501 .alignItems(HorizontalAlign.Center) 502 .width('100%') 503 } 504} 505``` 506 507 508 509 510### 示例4（设置焦点组走焦） 511 512该示例通过配置focusScopePriority可以使绑定的组件成为所属容器首次获焦时的焦点，配置focusScopeId可以使绑定的容器组件组件成为焦点组。 513 514```ts 515// focusTest.ets 516@Entry 517@Component 518struct FocusableExample { 519 @State inputValue: string = '' 520 521 build() { 522 Scroll() { 523 Row({ space: 20 }) { 524 Column({ space: 20 }) { // 标记为Column1 525 Column({ space: 5 }) { 526 Button('Group1') 527 .width(165) 528 .height(40) 529 .fontColor(Color.White) 530 Row({ space: 5 }) { 531 Button() 532 .width(80) 533 .height(40) 534 .fontColor(Color.White) 535 Button() 536 .width(80) 537 .height(40) 538 .fontColor(Color.White) 539 } 540 Row({ space: 5 }) { 541 Button() 542 .width(80) 543 .height(40) 544 .fontColor(Color.White) 545 Button() 546 .width(80) 547 .height(40) 548 .fontColor(Color.White) 549 } 550 }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed) 551 Column({ space: 5 }) { 552 Button('Group2') 553 .width(165) 554 .height(40) 555 .fontColor(Color.White) 556 Row({ space: 5 }) { 557 Button() 558 .width(80) 559 .height(40) 560 .fontColor(Color.White) 561 Button() 562 .width(80) 563 .height(40) 564 .fontColor(Color.White) 565 .focusScopePriority('ColumnScope1', FocusPriority.PRIOR) // Column1首次获焦时获焦 566 } 567 Row({ space: 5 }) { 568 Button() 569 .width(80) 570 .height(40) 571 .fontColor(Color.White) 572 Button() 573 .width(80) 574 .height(40) 575 .fontColor(Color.White) 576 } 577 }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed) 578 } 579 .focusScopeId('ColumnScope1') 580 Column({ space: 5 }) { // 标记为Column2 581 TextInput({placeholder: 'input', text: this.inputValue}) 582 .onChange((value: string) => { 583 this.inputValue = value 584 }) 585 .width(156) 586 Button('Group3') 587 .width(165) 588 .height(40) 589 .fontColor(Color.White) 590 Row({ space: 5 }) { 591 Button() 592 .width(80) 593 .height(40) 594 .fontColor(Color.White) 595 Button() 596 .width(80) 597 .height(40) 598 .fontColor(Color.White) 599 } 600 Button() 601 .width(165) 602 .height(40) 603 .fontColor(Color.White) 604 .focusScopePriority('ColumnScope2', FocusPriority.PREVIOUS) // Column2获焦时获焦 605 Row({ space: 5 }) { 606 Button() 607 .width(80) 608 .height(40) 609 .fontColor(Color.White) 610 Button() 611 .width(80) 612 .height(40) 613 .fontColor(Color.White) 614 } 615 Button() 616 .width(165) 617 .height(40) 618 .fontColor(Color.White) 619 Row({ space: 5 }) { 620 Button() 621 .width(80) 622 .height(40) 623 .fontColor(Color.White) 624 Button() 625 .width(80) 626 .height(40) 627 .fontColor(Color.White) 628 } 629 }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed) 630 .focusScopeId('ColumnScope2', true) // Column2为焦点组 631 }.alignItems(VerticalAlign.Top) 632 } 633 } 634} 635``` 636 637### 示例5（设置tab走焦停留） 638 639该示例通过配置tabstop实现使用tab走焦停留在组件上。 640 641```ts 642import { ColorMetrics, LengthMetrics } from '@kit.ArkUI' 643 644@Entry 645@Component 646struct TabStop { 647 build() { 648 Column({ space: 20 }) { 649 Column({ space: 20 }) { 650 Column({ space: 20 }) { 651 Row({ space: 5 }) { 652 Button("button 1") 653 .width(200).height(70).fontColor(Color.White) 654 .focusBox({ 655 margin: LengthMetrics.px(20), 656 strokeColor: ColorMetrics.rgba(255, 0, 0), 657 strokeWidth: LengthMetrics.px(10) 658 }) 659 } 660 Row({ space: 5 }) { 661 Button("button 2") 662 .width(200).height(70).fontColor(Color.White) 663 .focusBox({ 664 margin: LengthMetrics.px(20), 665 strokeColor: ColorMetrics.rgba(255, 0, 0), 666 strokeWidth: LengthMetrics.px(10) 667 }) 668 } 669 }.width('80%').margin({ top: 30 }).borderColor(Color.Black) 670 }.width('95%').margin({ top: 60 }).borderColor(Color.Black) 671 Column({ space: 20 }) { 672 Column({ space: 20 }) { 673 Row({ space: 5 }) { 674 Button("button 3") 675 .width(200) 676 .height('70%') 677 .fontColor(Color.White) 678 .focusBox({ 679 margin: LengthMetrics.px(20), 680 strokeColor: ColorMetrics.rgba(255, 0, 0), 681 strokeWidth: LengthMetrics.px(10) 682 }) 683 .margin({ top: 15 }) 684 } 685 } 686 .width('80%') 687 .height('120') 688 .borderColor(Color.Black) 689 .margin({ top: 10 }) 690 .tabStop(true) 691 .focusBox({ 692 margin: LengthMetrics.px(20), 693 strokeColor: ColorMetrics.rgba(255, 0, 0), 694 strokeWidth: LengthMetrics.px(10) 695 }) 696 .borderWidth(1) 697 }.width('95%').margin({ top: 50 }).borderColor(Color.Black) 698 } 699 } 700} 701``` 702示意图： 703 704连续按下两次TAB键时，焦点聚焦在第二个孩子组件上。 705 706 707 708接着按下TAB键，焦点聚焦在配置了tabStop上的组件。 709 710 711 712再按下TAB键，焦点将循环聚焦到第一个孩子组件上。 713 714 715
