鸿蒙5.0版开发：ArkTS组件通用属性（焦点控制）

于 2024-09-02 14:12:16 发布
阅读量776 收藏 26
点赞数 11
分类专栏： 鸿蒙5.0开发 ArkTS组件 文章标签： harmonyos 华为 android 鸿蒙 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/141818507
版权

 往期鸿蒙全套实战文章必看：

焦点控制

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

说明：

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

focusable

focusable(value: boolean)

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

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

tabIndex9+

tabIndex(index: number)

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

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

defaultFocus9+

defaultFocus(value: boolean)

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

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

groupDefaultFocus9+

groupDefaultFocus(value: boolean)

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

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

focusOnTouch9+

focusOnTouch(value: boolean)

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

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

focusBox12+

focusBox(style: FocusBoxStyle): T

设置当前组件系统焦点框样式。

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

参数：

参数名类型必填说明
styleFocusBoxStyle是设置当前组件系统焦点框样式。
说明：
该样式仅影响走焦状态下展示了系统焦点框的组件。

focusControl9+

焦点控制模块

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

requestFocus9+

requestFocus(value: string): boolean

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数：

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

返回值：

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

说明：

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

FocusController12+

以下API需先使用UIContext中的getFocusController()方法获取实例，再通过此实例调用对应方法。

clearFocus12+

clearFocus(): void

清除焦点，将焦点强制转移到页面根容器节点，焦点链路上其他节点失焦。

说明：

详细介绍请参见clearFocus。

requestFocus12+

requestFocus(key: string): void

通过组件的id将焦点转移到组件树对应的实体节点。

说明：

详细介绍请参见requestFocus。

FocusBoxStyle12+对象说明

名称参数类型必填描述
marginLengthMetrics否焦点框相对组件边缘的距离。
正数代表外侧，负数代表内侧。不支持百分比。
strokeColorColorMetrics否焦点框颜色
strokeWidthLengthMetrics否焦点框宽度。
不支持负数与百分比。

示例

示例1

defaultFocus/groupDefaultFocus/focusOnTouch示例代码：

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

// focusTest.ets
@Entry
@Component
struct FocusableExample {
  @State inputValue: string = ''

  build() {
    Scroll() {
      Row({ space: 20 }) {
        Column({ space: 20 }) {
          Column({ space: 5 }) {
            Button('Group1')
              .width(165)
              .height(40)
              .fontColor(Color.White)
              .focusOnTouch(true)           // 该Button组件点击后可获焦
            Row({ space: 5 }) {
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
                .focusOnTouch(true)           // 该Button组件点击后可获焦
            }
            Row({ space: 5 }) {
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
            }
          }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed)
          .tabIndex(1)                      // 该Column组件为按TAB键走焦的第一个获焦的组件
          Column({ space: 5 }) {
            Button('Group2')
              .width(165)
              .height(40)
              .fontColor(Color.White)
            Row({ space: 5 }) {
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
                .groupDefaultFocus(true)      // 该Button组件上级Column组件获焦时获焦
            }
            Row({ space: 5 }) {
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
              Button()
                .width(80)
                .height(40)
                .fontColor(Color.White)
            }
          }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed)
          .tabIndex(2)                      // 该Column组件为按TAB键走焦的第二个获焦的组件
        }
        Column({ space: 5 }) {
          TextInput({placeholder: 'input', text: this.inputValue})
            .onChange((value: string) => {
              this.inputValue = value
            })
            .width(156)
            .defaultFocus(true)             // 该TextInput组件为页面的初始默认焦点
          Button('Group3')
            .width(165)
            .height(40)
            .fontColor(Color.White)
          Row({ space: 5 }) {
            Button()
              .width(80)
              .height(40)
              .fontColor(Color.White)
            Button()
              .width(80)
              .height(40)
              .fontColor(Color.White)
          }
          Button()
            .width(165)
            .height(40)
            .fontColor(Color.White)
          Row({ space: 5 }) {
            Button()
              .width(80)
              .height(40)
              .fontColor(Color.White)
            Button()
              .width(80)
              .height(40)
              .fontColor(Color.White)
          }
          Button()
            .width(165)
            .height(40)
            .fontColor(Color.White)
          Row({ space: 5 }) {
            Button()
              .width(80)
              .height(40)
              .fontColor(Color.White)
            Button()
              .width(80)
              .height(40)
              .fontColor(Color.White)
          }
        }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed)
        .tabIndex(3)                      // 该Column组件为按TAB键走焦的第三个获焦的组件
      }.alignItems(VerticalAlign.Top)
    }
  }
}
ts

示意图：

首次进入，焦点默认在defaultFocus绑定的TextInput组件上：

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

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

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

点击绑定了focusOnTouch的组件，组件自身获焦，焦点框被清除，再按下Tab键显示焦点框：

示例2

focusControl.requestFocus示例代码：

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

// requestFocus.ets
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct RequestFocusExample {
  @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'LastPageId']
  @State selectId: string = 'LastPageId'

  build() {
    Column({ space:20 }){
      Row({space: 5}) {
        Button("id: " + this.idList[0] + " focusable(false)")
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[0])
          .focusable(false)
        Button("id: " + this.idList[1])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[1])
      }
      Row({space: 5}) {
        Button("id: " + this.idList[2])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[2])
        Button("id: " + this.idList[3])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[3])
      }
      Row({space: 5}) {
        Button("id: " + this.idList[4])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[4])
        Button("id: " + this.idList[5])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[5])
      }
      Row({space: 5}) {
        Select([{value: this.idList[0]},
                {value: this.idList[1]},
                {value: this.idList[2]},
                {value: this.idList[3]},
                {value: this.idList[4]},
                {value: this.idList[5]},
                {value: this.idList[6]}])
          .value(this.selectId)
          .onSelect((index: number) => {
            this.selectId = this.idList[index]
          })
        Button("RequestFocus")
          .width(200).height(70).fontColor(Color.White)
          .onClick(() => {
            let res = focusControl.requestFocus(this.selectId)      // 使选中的this.selectId的组件获焦
            if (res) {
              promptAction.showToast({message: 'Request success'})
            } else {
              promptAction.showToast({message: 'Request failed'})
            }
          })
      }
    }.width('100%').margin({ top:20 })
  }
}
ts

示意图：

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

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

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

示例3

focusBox示例代码：

使用focusBox修改组件的焦点框样式示例代码：使焦点框变为红色/加粗/内边框。

import { ColorMetrics, LengthMetrics } from '@ohos.arkui.node'

@Entry
@Component
struct RequestFocusExample {
  build() {
    Column({ space: 30 }) {
      Button("small black focus box")
        .focusBox({
          margin: new LengthMetrics(0),
          strokeColor: ColorMetrics.rgba(0, 0, 0),
        })
      Button("large red focus box")
        .focusBox({
          margin: LengthMetrics.px(20),
          strokeColor: ColorMetrics.rgba(255, 0, 0),
          strokeWidth: LengthMetrics.px(10)
        })
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
  }
}
ts

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者龚众皓： 『 蜀道衫 』，不定期分享原创知识。
  • 关注后回复【666】扫码即可获取学习文档。
  • 同时可以期待后续文章ing🚀。 
炫酷盖茨猫先生
关注
专栏目录
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：焦点控制）
m0_64420071的博客
03-04 1527
ArkTS声明式开发（通用属性：焦点控制）
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：禁用控制）
m0_64420071的博客
03-02 1349
ArkTS声明式开发（通用属性：禁用控制）
【HarmonyOS】输入框焦点控制实现键盘显隐和进入页面默认弹出键盘获取焦点设置
我的小窝
05-31 1003
鸿蒙HarmonyOS输入框控件TextInput动态控制实现键盘显示和隐藏。
鸿蒙HarmonyOS NEXT开发：焦点控制（ArkTS通用属性）
shudaoshanBBQ的博客
08-09 1364
自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点。
本篇内容：ArkTS开发系列之事件（2.8.1触屏、键鼠、焦点事件）
jay_chess的博客
06-24 529
【代码】本篇内容：ArkTS开发系列之事件（2.8.1触屏、键鼠、焦点事件）
【鸿蒙UI实战开发】基于原生能力的键盘控制
HarmonyOSMN的博客
07-01 2812
应用通常使用键盘的方式，系统键盘的弹出收起，获焦失焦，高度监听，安全避让等。：进入页面TextInput获焦，弹出系统键盘。：点击按钮或其他事件触发TextInput获焦，弹出系统键盘。：键盘弹出后只上抬特定的输入组件。：监听键盘高度，在键盘弹出后让组件上移，键盘收起后让组件恢复。：设置窗口在键盘抬起时的页面避让模式为上抬，压缩。进入页面TextInput获焦，弹出系统键盘。通过defaultFocus通用属性设置，实现第一次进入页面后弹出键盘。
鸿蒙5.0版开发：ArkTS组件（焦点事件）
m0_73088370的博客
08-25 433
焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Search）
m0_64420071的博客
03-12 1776
ArkTS声明式开发（基础手势：Search）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：TextArea）
m0_64420071的博客
03-13 2068
ArkTS声明式开发（基础手势：TextArea）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：TextInput）
m0_64420071的博客
03-13 2259
ArkTS声明式开发（基础手势：TextInput）
【HarmonyOS NEXT】鸿蒙 如何在包含web组件的页面 让默认焦点有效
wu1004019946的博客
06-18 837
页面包含web组件Button组件等，把页面的默认焦点放到Button组件上，不起效果。因为web组件默认会在组件加载完成后获取焦点；可以在web的网页加载完成时onPageEnd回调中，将设置默认获焦的组件通过focusControl.requestFocus方法主动让焦点转移至参数指定的组件上。
如何定位解决焦点问题
最新发布
hongxiaomeng的博客
08-28 400
【愚公系列】2023年12月 HarmonyOS教学课程 037-ArkUI事件（焦点事件）
热门推荐
时光隧道
12-16 6万+
焦点事件是指程序中的重要事件或关键点。焦点事件通常是程序的核心逻辑和功能，需要引起特殊的关注和处理。在图形用户界面(GUI)编程中，焦点事件通常与用户交互和界面输入相关。例如，当用户点击按钮、输入文本或选择菜单项时，这些操作会触发相应的焦点事件。程序需要捕获这些焦点事件并进行处理，以执行相应的操作或响应用户的请求。另外，在事件驱动的编程模型中，焦点事件也与程序的流程控制和状态转换有关。例如，当某个关键条件满足时，程序会触发相应的焦点事件，然后根据这些事件来执行特定的操作或改变程序的状态。
鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）_鸿蒙 search不获取焦点(1)
2401_84862298的博客
05-12 1000
接口：案例：// xxx.ets@Entry@Componenti
HarmonyOS一杯冰美式的时间 -- 验证码框
maniuT的博客
02-16 1256
像是短密码、验证码都有可能需要一个输入框，像是如下：恰好在写HarmonyOS的时候也需要写一个验证码输入框，但是在实现的时候碰了几次灰，觉得有必要分享下，故有了此篇文章。🙏 PS：二三为错误示例，如果你只想要代码，在四开始只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）
鸿蒙Harmony开发：通用焦点样式事件规范
2401_84917132的博客
08-07 977
层级页面是焦点框架中特定容器组件的统称，涵盖Page、Dialog、SheetPage、ModalPage、Menu、Popup、NavBar、NavDestination等。
2024年鸿蒙最全鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码，2024年最新到了三面试成功率高吗
2401_84857523的博客
05-10 1003
只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）以下就是该例子代码啦：@Preview@Componentbuild() {Stack() {= null) {Text(item)})
鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）_鸿蒙获取焦点后发生背景颜色变化
2401_84181536的博客
04-16 679
tabIndex(1) // Button-1设置为第一个tabIndex节点}).tabIndex(2) // Button-左箭头设置为第二个tabIndex节点}).tabIndex(3) // Button-OK设置为第三个tabIndex节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值