devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：焦点控制）_arkui中textinput的属性defaultfocus

作者：我家小花儿 | 2024-03-24 21:44:41

赞

踩

arkui中textinput的属性defaultfocus

自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点。

说明：从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

focusable

focusable(value: boolean)

设置当前组件是否可以获焦。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是设置当前组件是否可以获焦。
说明：
存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦。不可获焦状态下，无法触发焦点事件。

tabIndex9+

tabIndex(index: number)

自定义组件tab键走焦能力。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是自定义组件tab键走焦能力。若有配置了tabIndex大于0的组件，则tab键走焦只会在tabIndex大于0的组件内按照tabIndex的值从小到大并循环依次走焦。若没有配置tabIndex大于0的组件，则tabIndex等于0的组件按照组件预设的走焦规则走焦。
- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素。
- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。
默认值：0

defaultFocus9+

defaultFocus(value: boolean)

设置当前组件是否为当前页面上的默认焦点。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是设置当前组件是否为当前页面上的默认焦点，仅在初次创建的页面第一次进入时生效。
默认值：false
说明： 值为true则表示为默认焦点，值为false无效。
若页面内无任何组件设置defaultFocus(true)，页面的默认焦点就是页面的根容器。
若某页面内有多个组件设置了defaultFocus(true)，则以组件树深度遍历找到的第一个组件为默认焦点。

groupDefaultFocus9+

groupDefaultFocus(value: boolean)

设置当前组件是否为当前组件所在容器获焦时的默认焦点。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是设置当前组件是否为当前组件所在容器获焦时的默认焦点，仅在初次创建容器节点第一次获焦时生效。
默认值：false
说明： 必须与tabIndex联合使用，当某个容器设置了tabIndex，且容器内某子组件或容器自身设置了groupDefaultFocus(true)，当该容器首次TAB键获焦时，会自动将焦点转移至该指定的组件上。若容器内（包含容器本身）有多个组件设置了groupDefaultFocus(true)，则以组件树深度遍历找到的第一个组件为最终结果。

focusOnTouch9+

focusOnTouch(value: boolean)

设置当前组件是否支持点击获焦能力。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是设置当前组件是否支持点击获焦能力。
默认值：false
说明： 仅在组件可点击时才能正常获取焦点。

focusControl9+

焦点控制模块

requestFocus9+

requestFocus(value: string): boolean

方法语句中可使用的全局接口，调用此接口可以主动让焦点转移至参数指定的组件上。

参数：

名称类型必填描述
valuestring是目标组件使用接口key(value: string)绑定的字符串。

返回值：

类型说明
boolean返回是否成功给目标组件申请到焦点。若参数指向的目标组件存在，且目标组件可获焦，则返回true，否则返回false。

说明：

支持焦点控制的组件：TextInput、TextArea、Search、Button、Text、Image、List、Grid。焦点事件当前仅支持在真机上显示运行效果。

示例

示例1

defaultFocus/groupDefaultFocus/focusOnTouch示例代码：

defaultFocus可以使绑定的组件成为页面创建后首次获焦的焦点。groupDefaultFocus可以使绑定的组件成为tabIndex容器创建后首次获焦的焦点。focusOnTouch可以使绑定的组件点击后立即获焦。

  1. // focusTest.ets
  2. @Entry
  3. @Component
  4. struct FocusableExample {
  5.   @State inputValue: string = ''
  6.  
  7.   build() {
  8.     Scroll() {
  9.       Row({ space: 20 }) {
  10.         Column({ space: 20 }) {
  11.           Column({ space: 5 }) {
  12.             Button('Group1')
  13.               .width(165)
  14.               .height(40)
  15.               .fontColor(Color.White)
  16.               .focusOnTouch(true)           // 该Button组件点击后可获焦
  17.             Row({ space: 5 }) {
  18.               Button()
  19.                 .width(80)
  20.                 .height(40)
  21.                 .fontColor(Color.White)
  22.               Button()
  23.                 .width(80)
  24.                 .height(40)
  25.                 .fontColor(Color.White)
  26.                 .focusOnTouch(true)           // 该Button组件点击后可获焦
  27.             }
  28.             Row({ space: 5 }) {
  29.               Button()
  30.                 .width(80)
  31.                 .height(40)
  32.                 .fontColor(Color.White)
  33.               Button()
  34.                 .width(80)
  35.                 .height(40)
  36.                 .fontColor(Color.White)
  37.             }
  38.           }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed)
  39.           .tabIndex(1)                      // 该Column组件为按TAB键走焦的第一个获焦的组件
  40.           Column({ space: 5 }) {
  41.             Button('Group2')
  42.               .width(165)
  43.               .height(40)
  44.               .fontColor(Color.White)
  45.             Row({ space: 5 }) {
  46.               Button()
  47.                 .width(80)
  48.                 .height(40)
  49.                 .fontColor(Color.White)
  50.               Button()
  51.                 .width(80)
  52.                 .height(40)
  53.                 .fontColor(Color.White)
  54.                 .groupDefaultFocus(true)      // 该Button组件上级Column组件获焦时获焦
  55.             }
  56.             Row({ space: 5 }) {
  57.               Button()
  58.                 .width(80)
  59.                 .height(40)
  60.                 .fontColor(Color.White)
  61.               Button()
  62.                 .width(80)
  63.                 .height(40)
  64.                 .fontColor(Color.White)
  65.             }
  66.           }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed)
  67.           .tabIndex(2)                      // 该Column组件为按TAB键走焦的第二个获焦的组件
  68.         }
  69.         Column({ space: 5 }) {
  70.           TextInput({placeholder: 'input', text: this.inputValue})
  71.             .onChange((value: string) => {
  72.               this.inputValue = value
  73.             })
  74.             .width(156)
  75.             .defaultFocus(true)             // 该TextInput组件为页面的初始默认焦点
  76.           Button('Group3')
  77.             .width(165)
  78.             .height(40)
  79.             .fontColor(Color.White)
  80.           Row({ space: 5 }) {
  81.             Button()
  82.               .width(80)
  83.               .height(40)
  84.               .fontColor(Color.White)
  85.             Button()
  86.               .width(80)
  87.               .height(40)
  88.               .fontColor(Color.White)
  89.           }
  90.           Button()
  91.             .width(165)
  92.             .height(40)
  93.             .fontColor(Color.White)
  94.           Row({ space: 5 }) {
  95.             Button()
  96.               .width(80)
  97.               .height(40)
  98.               .fontColor(Color.White)
  99.             Button()
  100.               .width(80)
  101.               .height(40)
  102.               .fontColor(Color.White)
  103.           }
  104.           Button()
  105.             .width(165)
  106.             .height(40)
  107.             .fontColor(Color.White)
  108.           Row({ space: 5 }) {
  109.             Button()
  110.               .width(80)
  111.               .height(40)
  112.               .fontColor(Color.White)
  113.             Button()
  114.               .width(80)
  115.               .height(40)
  116.               .fontColor(Color.White)
  117.           }
  118.         }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed)
  119.         .tabIndex(3)                      // 该Column组件为按TAB键走焦的第三个获焦的组件
  120.       }.alignItems(VerticalAlign.Top)
  121.     }
  122.   }
  123. }

示意图：

首次按下TAB键，焦点切换到defaultFocus绑定的组件上：

defaultFocus

第二次按TAB键，焦点切换到tabIndex(1)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上：

groupDefaultFocus1

第三次按TAB键，焦点切换到tabIndex(2)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上：

groupDefaultFocus2

第四次按TAB键，焦点切换到tabIndex(3)的容器上，且自动走到其内部的groupDefaultFocus绑定的组件上：

groupDefaultFocus3

点击绑定了focusOnTouch的组件，组件自身获焦：

focusOnTouch

示例2

focusControl.requestFocus示例代码：

使用focusContrl.requestFocus接口使指定组件获取焦点。

  1. // requestFocus.ets
  2. import promptAction from '@ohos.promptAction';
  3.  
  4. @Entry
  5. @Component
  6. struct RequestFocusExample {
  7.   @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId']
  8.   @State selectId: string = 'LastPageId'
  9.  
  10.   build() {
  11.     Column({ space:20 }){
  12.       Row({space: 5}) {
  13.         Button("id: " + this.idList[0] + " focusable(false)")
  14.           .width(200).height(70).fontColor(Color.White)
  15.           .key(this.idList[0])
  16.           .focusable(false)
  17.         Button("id: " + this.idList[1])
  18.           .width(200).height(70).fontColor(Color.White)
  19.           .key(this.idList[1])
  20.       }
  21.       Row({space: 5}) {
  22.         Button("id: " + this.idList[2])
  23.           .width(200).height(70).fontColor(Color.White)
  24.           .key(this.idList[2])
  25.         Button("id: " + this.idList[3])
  26.           .width(200).height(70).fontColor(Color.White)
  27.           .key(this.idList[3])
  28.       }
  29.       Row({space: 5}) {
  30.         Button("id: " + this.idList[4])
  31.           .width(200).height(70).fontColor(Color.White)
  32.           .key(this.idList[4])
  33.         Button("id: " + this.idList[5])
  34.           .width(200).height(70).fontColor(Color.White)
  35.           .key(this.idList[5])
  36.       }
  37.       Row({space: 5}) {
  38.         Select([{value: this.idList[0]},
  39.                 {value: this.idList[1]},
  40.                 {value: this.idList[2]},
  41.                 {value: this.idList[3]},
  42.                 {value: this.idList[4]},
  43.                 {value: this.idList[5]},
  44.                 {value: this.idList[6]}])
  45.           .value(this.selectId)
  46.           .onSelect((index: number) => {
  47.             this.selectId = this.idList[index]
  48.           })
  49.         Button("RequestFocus")
  50.           .width(200).height(70).fontColor(Color.White)
  51.           .onClick(() => {
  52.             let res = focusControl.requestFocus(this.selectId)      // 使选中的this.selectId的组件获焦
  53.             if (res) {
  54.               promptAction.showToast({message: 'Request success'})
  55.             } else {
  56.               promptAction.showToast({message: 'Request failed'})
  57.             }
  58.           })
  59.       }
  60.     }.width('100%').margin({ top:20 })
  61.   }
  62. }

示意图：

按下TAB键，激活焦点态显示。 申请不存在的组件获焦：

requestFocus1

申请不可获焦的组件获焦：

requestFocus2

申请存在且可获焦的组件获焦：

requestFocus3

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/305078
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号