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 144## FocusController<sup>12+</sup> 145以下clearFocus，requestFocus 两个API需先使用UIContext中的[getFocusController()](../js-apis-arkui-UIContext.md#getfocuscontroller12)方法获取实例，再通过此实例调用对应方法。 146 147 148### clearFocus<sup>12+</sup> 149 150clearFocus(): void 151 152清除焦点，将焦点强制转移到页面根容器节点，焦点链路上其他节点失焦。 153 154> **说明：** 155> 156> 详细介绍请参见[clearFocus](../js-apis-arkui-UIContext.md#clearfocus12)。 157 158### requestFocus<sup>12+</sup> 159 160requestFocus(key: string): void 161 162通过组件的id将焦点转移到组件树对应的实体节点。 163 164> **说明：** 165> 166> 详细介绍请参见[requestFocus](../js-apis-arkui-UIContext.md#requestfocus12)。 167 168## FocusBoxStyle<sup>12+</sup>对象说明 169 170**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 171 172| 名称 | 参数类型 | 必填 | 描述 | 173| ---- | ---- | ---- | ---- | 174| margin | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 焦点框相对组件边缘的距离。<br/>正数代表外侧，负数代表内侧。不支持百分比。 | 175| strokeColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | 焦点框颜色 | 176| strokeWidth | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 焦点框宽度。<br/>不支持负数与百分比。| 177 178## focusScopePriority<sup>12+</sup> 179 180focusScopePriority(scopeId: string, priority?: FocusPriority): T 181 182设置当前组件在指定容器内获焦的优先级。需要配合focusScopeId一起使用。 183 184**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 185 186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 187 188**参数：** 189 190| 参数名 | 类型 | 必填 | 说明 | 191| ------ | ------- | ---- | ------------------------------------------------------------ | 192| scopeId | string | 是 | 当前组件设置的获焦优先级生效的容器组件的id标识。<br/>**说明：** <br/>1.当前组件必须在scopeId所标识的容器内或者当前组件所属容器在scopeId所标识的容器内 。<br/>2.组件不可重复设置多个优先级。<br/>3.设置了focusScopeId的容器组件不可设置优先级。 | 193| priority | [FocusPriority](#focuspriority12) | 否 | 获焦优先级。<br/>**说明：** <br/>priority不设置则组件为默认AUTO优先级。<br/>优先级对走焦以及获焦组件的影响：<br/>1.容器整体获焦（层级页面切换/焦点切换到焦点组/容器组件使用requestFocus申请焦点）时，若容器内存在优先级为PREVIOUS的组件，则优先级为PREVIOUS的组件获焦，否则，由容器内上次获焦的组件获焦；<br/>2.容器非整体获焦（非焦点组场景下使用tab键/方向键走焦）时，若容器为首次获焦，则容器内优先级最高的组件获焦，若容器非首次获焦，不考虑优先级按照位置顺序走焦。 | 194 195### FocusPriority<sup>12+</sup> 196 197**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 198 199**系统能力：** SystemCapability.ArkUI.ArkUI.Full 200 201| 名称 | 描述 | 202| ----------- | --------- | 203| AUTO | 默认的优先级，缺省时组件的获焦优先级。 | 204| PRIOR | 容器内优先获焦的优先级。优先级高于AUTO。 | 205| PREVIOUS | 上一次容器整体失焦时获焦节点的优先级。优先级高于PRIOR。 | 206 207## focusScopeId<sup>12+</sup> 208 209focusScopeId(id: string, isGroup?: boolean) 210 211设置当前容器组件的id标识，设置当前容器组件是否为焦点组。 212 213**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217**参数：** 218 219| 参数名 | 类型 | 必填 | 说明 | 220| ------ | ------- | ---- | ------------------------------------------------------------ | 221| id | string | 是 | 设置当前容器组件的id标识。<br/>**说明：** <br/>单个层级页面下，id标识全局唯一，不可重复。 | 222| isGroup | boolean | 否 | 设置当前容器组件是否为焦点组。<br/>**说明：** <br/>焦点组不可嵌套，不可重复配置。<br/> 焦点组不能和tabIndex混用。<br/>配置焦点组的目的时使得容器及容器内的元素可以按照焦点组规则走焦。焦点组走焦规则：<br/>1.焦点组容器内只能通过方向键走焦，tab键会使焦点跳出焦点组容器。<br/>2.通过方向键使焦点从焦点组容器外切换到焦点组容器内时，若焦点组容器内存在优先级为PREVIOUS的组件，则优先级为PREVIOUS的组件获焦，否则，由焦点组容器内上次获焦的组件获焦。| 223 224## 示例 225 226### 示例1 227 228defaultFocus/groupDefaultFocus/focusOnTouch示例代码： 229 230defaultFocus可以使绑定的组件成为页面创建后首次获焦的焦点。groupDefaultFocus可以使绑定的组件成为tabIndex容器创建后首次获焦的焦点。focusOnTouch可以使绑定的组件点击后立即获焦。 231 232```ts 233// focusTest.ets 234@Entry 235@Component 236struct FocusableExample { 237 @State inputValue: string = '' 238 239 build() { 240 Scroll() { 241 Row({ space: 20 }) { 242 Column({ space: 20 }) { 243 Column({ space: 5 }) { 244 Button('Group1') 245 .width(165) 246 .height(40) 247 .fontColor(Color.White) 248 .focusOnTouch(true) // 该Button组件点击后可获焦 249 Row({ space: 5 }) { 250 Button() 251 .width(80) 252 .height(40) 253 .fontColor(Color.White) 254 Button() 255 .width(80) 256 .height(40) 257 .fontColor(Color.White) 258 .focusOnTouch(true) // 该Button组件点击后可获焦 259 } 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 } 270 }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed) 271 .tabIndex(1) // 该Column组件为按TAB键走焦的第一个获焦的组件 272 Column({ space: 5 }) { 273 Button('Group2') 274 .width(165) 275 .height(40) 276 .fontColor(Color.White) 277 Row({ space: 5 }) { 278 Button() 279 .width(80) 280 .height(40) 281 .fontColor(Color.White) 282 Button() 283 .width(80) 284 .height(40) 285 .fontColor(Color.White) 286 .groupDefaultFocus(true) // 该Button组件上级Column组件获焦时获焦 287 } 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 } 298 }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed) 299 .tabIndex(2) // 该Column组件为按TAB键走焦的第二个获焦的组件 300 } 301 Column({ space: 5 }) { 302 TextInput({placeholder: 'input', text: this.inputValue}) 303 .onChange((value: string) => { 304 this.inputValue = value 305 }) 306 .width(156) 307 .defaultFocus(true) // 该TextInput组件为页面的初始默认焦点 308 Button('Group3') 309 .width(165) 310 .height(40) 311 .fontColor(Color.White) 312 Row({ space: 5 }) { 313 Button() 314 .width(80) 315 .height(40) 316 .fontColor(Color.White) 317 Button() 318 .width(80) 319 .height(40) 320 .fontColor(Color.White) 321 } 322 Button() 323 .width(165) 324 .height(40) 325 .fontColor(Color.White) 326 Row({ space: 5 }) { 327 Button() 328 .width(80) 329 .height(40) 330 .fontColor(Color.White) 331 Button() 332 .width(80) 333 .height(40) 334 .fontColor(Color.White) 335 } 336 Button() 337 .width(165) 338 .height(40) 339 .fontColor(Color.White) 340 Row({ space: 5 }) { 341 Button() 342 .width(80) 343 .height(40) 344 .fontColor(Color.White) 345 Button() 346 .width(80) 347 .height(40) 348 .fontColor(Color.White) 349 } 350 }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed) 351 .tabIndex(3) // 该Column组件为按TAB键走焦的第三个获焦的组件 352 }.alignItems(VerticalAlign.Top) 353 } 354 } 355} 356``` 357示意图： 358 359首次进入，焦点默认在defaultFocus绑定的TextInput组件上： 360 361 362 363首次按TAB键，焦点切换到tabIndex(1)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上： 364 365 366 367第二次按TAB键，焦点切换到tabIndex(2)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上： 368 369 370 371第三次按TAB键，焦点切换到tabIndex(3)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上： 372 373 374 375点击绑定了focusOnTouch的组件，组件自身获焦，焦点框被清除，再按下Tab键显示焦点框： 376 377 378 379### 示例2 380 381> **说明：** 382> 383> 直接使用focusControl可能导致实例不明确的问题，建议使用[getUIContext](../js-apis-arkui-UIContext.md#uicontext)获取UIContext实例，并使用[getFocusController](../js-apis-arkui-UIContext.md#getfocuscontroller12)获取绑定实例的focusControl。 384 385focusControl.requestFocus示例代码： 386 387使用focusControl.requestFocus接口使指定组件获取焦点。 388```ts 389// requestFocus.ets 390@Entry 391@Component 392struct RequestFocusExample { 393 @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId'] 394 @State selectId: string = 'LastPageId' 395 396 build() { 397 Column({ space:20 }){ 398 Row({space: 5}) { 399 Button("id: " + this.idList[0] + " focusable(false)") 400 .width(200).height(70).fontColor(Color.White) 401 .id(this.idList[0]) 402 .focusable(false) 403 Button("id: " + this.idList[1]) 404 .width(200).height(70).fontColor(Color.White) 405 .id(this.idList[1]) 406 } 407 Row({space: 5}) { 408 Button("id: " + this.idList[2]) 409 .width(200).height(70).fontColor(Color.White) 410 .id(this.idList[2]) 411 Button("id: " + this.idList[3]) 412 .width(200).height(70).fontColor(Color.White) 413 .id(this.idList[3]) 414 } 415 Row({space: 5}) { 416 Button("id: " + this.idList[4]) 417 .width(200).height(70).fontColor(Color.White) 418 .id(this.idList[4]) 419 Button("id: " + this.idList[5]) 420 .width(200).height(70).fontColor(Color.White) 421 .id(this.idList[5]) 422 } 423 Row({space: 5}) { 424 Select([{value: this.idList[0]}, 425 {value: this.idList[1]}, 426 {value: this.idList[2]}, 427 {value: this.idList[3]}, 428 {value: this.idList[4]}, 429 {value: this.idList[5]}, 430 {value: this.idList[6]}]) 431 .value(this.selectId) 432 .onSelect((index: number) => { 433 this.selectId = this.idList[index] 434 }) 435 Button("RequestFocus") 436 .width(200).height(70).fontColor(Color.White) 437 .onClick(() => { 438 // 建议使用this.getUIContext().getFocusController().requestFocus() 439 let res = focusControl.requestFocus(this.selectId) // 使选中的this.selectId的组件获焦 440 if (res) { 441 this.getUIContext().getPromptAction().showToast({message: 'Request success'}) 442 } else { 443 this.getUIContext().getPromptAction().showToast({message: 'Request failed'}) 444 } 445 }) 446 } 447 }.width('100%').margin({ top:20 }) 448 } 449} 450``` 451 452示意图： 453 454按下TAB键，激活焦点态显示。 455申请不存在的组件获焦： 456 457 458 459申请不可获焦的组件获焦： 460 461 462 463申请存在且可获焦的组件获焦： 464 465 466 467### 示例3 468 469focusBox示例代码： 470 471使用focusBox修改组件的焦点框样式示例代码：使焦点框变为红色/加粗/内边框。 472```ts 473import { ColorMetrics, LengthMetrics } from '@kit.ArkUI' 474 475@Entry 476@Component 477struct RequestFocusExample { 478 build() { 479 Column({ space: 30 }) { 480 Button("small black focus box") 481 .focusBox({ 482 margin: new LengthMetrics(0), 483 strokeColor: ColorMetrics.rgba(0, 0, 0), 484 }) 485 Button("large red focus box") 486 .focusBox({ 487 margin: LengthMetrics.px(20), 488 strokeColor: ColorMetrics.rgba(255, 0, 0), 489 strokeWidth: LengthMetrics.px(10) 490 }) 491 } 492 .alignItems(HorizontalAlign.Center) 493 .width('100%') 494 } 495} 496``` 497 498 499 500 501### 示例4 502 503focusScopePriority/focusScopeId示例代码： 504 505focusScopePriority可以使绑定的组件成为所属容器首次获焦时的焦点。focusScopeId可以使绑定的容器组件组件成为焦点组。 506 507```ts 508// focusTest.ets 509@Entry 510@Component 511struct FocusableExample { 512 @State inputValue: string = '' 513 514 build() { 515 Scroll() { 516 Row({ space: 20 }) { 517 Column({ space: 20 }) { // 标记为Column1 518 Column({ space: 5 }) { 519 Button('Group1') 520 .width(165) 521 .height(40) 522 .fontColor(Color.White) 523 Row({ space: 5 }) { 524 Button() 525 .width(80) 526 .height(40) 527 .fontColor(Color.White) 528 Button() 529 .width(80) 530 .height(40) 531 .fontColor(Color.White) 532 } 533 Row({ space: 5 }) { 534 Button() 535 .width(80) 536 .height(40) 537 .fontColor(Color.White) 538 Button() 539 .width(80) 540 .height(40) 541 .fontColor(Color.White) 542 } 543 }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed) 544 Column({ space: 5 }) { 545 Button('Group2') 546 .width(165) 547 .height(40) 548 .fontColor(Color.White) 549 Row({ space: 5 }) { 550 Button() 551 .width(80) 552 .height(40) 553 .fontColor(Color.White) 554 Button() 555 .width(80) 556 .height(40) 557 .fontColor(Color.White) 558 .focusScopePriority('ColumnScope1', FocusPriority.PRIOR) // Column1首次获焦时获焦 559 } 560 Row({ space: 5 }) { 561 Button() 562 .width(80) 563 .height(40) 564 .fontColor(Color.White) 565 Button() 566 .width(80) 567 .height(40) 568 .fontColor(Color.White) 569 } 570 }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed) 571 } 572 .focusScopeId('ColumnScope1') 573 Column({ space: 5 }) { // 标记为Column2 574 TextInput({placeholder: 'input', text: this.inputValue}) 575 .onChange((value: string) => { 576 this.inputValue = value 577 }) 578 .width(156) 579 Button('Group3') 580 .width(165) 581 .height(40) 582 .fontColor(Color.White) 583 Row({ space: 5 }) { 584 Button() 585 .width(80) 586 .height(40) 587 .fontColor(Color.White) 588 Button() 589 .width(80) 590 .height(40) 591 .fontColor(Color.White) 592 } 593 Button() 594 .width(165) 595 .height(40) 596 .fontColor(Color.White) 597 .focusScopePriority('ColumnScope2', FocusPriority.PREVIOUS) // Column2获焦时获焦 598 Row({ space: 5 }) { 599 Button() 600 .width(80) 601 .height(40) 602 .fontColor(Color.White) 603 Button() 604 .width(80) 605 .height(40) 606 .fontColor(Color.White) 607 } 608 Button() 609 .width(165) 610 .height(40) 611 .fontColor(Color.White) 612 Row({ space: 5 }) { 613 Button() 614 .width(80) 615 .height(40) 616 .fontColor(Color.White) 617 Button() 618 .width(80) 619 .height(40) 620 .fontColor(Color.White) 621 } 622 }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed) 623 .focusScopeId('ColumnScope2', true) // Column2为焦点组 624 }.alignItems(VerticalAlign.Top) 625 } 626 } 627} 628```
