【HarmonyOS NEXT】鸿蒙 如何在包含web组件的页面 让默认焦点有效

news2024/12/27 15:57:27

页面包含web组件Button组件等,把页面的默认焦点放到Button组件上,不起效果。

因为web组件默认会在组件加载完成后获取焦点;

可以在web的网页加载完成时onPageEnd回调中,将设置默认获焦的组件通过focusControl.requestFocus方法主动让焦点转移至参数指定的组件上

focusControl9+

焦点控制模块

requestFocus9+

requestFocus(value: string): boolean

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

参数:

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

返回值:

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

说明

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

示例

// 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)
          .key(this.idList[0])
          .focusable(false)
        Button("id: " + this.idList[1])
          .width(200).height(70).fontColor(Color.White)
          .key(this.idList[1])
      }
      Row({space: 5}) {
        Button("id: " + this.idList[2])
          .width(200).height(70).fontColor(Color.White)
          .key(this.idList[2])
        Button("id: " + this.idList[3])
          .width(200).height(70).fontColor(Color.White)
          .key(this.idList[3])
      }
      Row({space: 5}) {
        Button("id: " + this.idList[4])
          .width(200).height(70).fontColor(Color.White)
          .key(this.idList[4])
        Button("id: " + this.idList[5])
          .width(200).height(70).fontColor(Color.White)
          .key(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 })
  }
}

示意图:

按下TAB键,激活焦点态显示。

申请不存在的组件获焦:

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1847206.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信发布分班查询结果

亲爱的老师们!期末考完,新学期就快要来了,还在为分班查询头疼吗?别担心,今天我要和大家分享一个超级实用的小技巧——如何通过微信发布分班查询结果,让家长们和学生们都能掌握新学期的动态? 分…

Manim本地安装

目录 背景Manim安装及配置一个上手例子参考文献 背景 通过上一期的介绍,我们对Manim有了初步的认识也知道Manim版本的区别,这一期,我们来给自己的计算机安装一个社区版ManimCE,方便以后玩Manim。笔者的硬件配置是联想笔记本Windo…

Google Gemini API 打造翻译助手

API申请 https://aistudio.google.com/app/apikey 目前API可以免费受限使用,大概一分钟60次调用 https://ai.google.dev/pricing prompt编写 您是一位精通各种语言的专业翻译家,尤其擅长【替换成你想翻译的文本类别,比如:农业、…

【挑战100天首通《谷粒商城》】-【第一天】06、环境-使用vagrant快速创建linux虚拟机

文章目录 课程介绍1、安装 linux 虚拟机2、安装 VirtualBoxStage 1:开启CPU虚拟化Stage 2:下载 VirtualBoxStage 2:安装 VirtualBoxStage 4:安装 VagrantStage 4-1:Vagrant 下载Stage 4-2:Vagrant 安装Stag…

表组装示例

代码; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <stdio.h>int main(int argc, char *argv[]) {gtk_init(&argc, &argv);GtkWidget *window;window gtk_window_new(GTK_WINDOW_TOPLEVEL);gtk_window_set_title(GTK_WINDO…

实战18:基于tkinter+jupyter notebook开发的情感分析系统

项目演示: 完整代码: import pandas as pd import numpy as np from collections import Counter import re import jieba from tqdm import tqdm from sklearn.metrics import roc_curve, auc import joblib import gensim from sklearn.svm import SVC from gensim.mode…

34.构建核心注入代码

上一个内容&#xff1a;33.获取入口点 以 33.获取入口点 它的代码为基础进行修改 实现的功能是把LoadLibrary函数注入到目标进程实现加载我们的模块。LoadLibrary只有有程序使用过了它的代码就会加载到内存中&#xff08;因为动态链接库是内存加载&#xff09;就是a程序要用L…

基于JSP技术的固定资产管理系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSPServlet 工具&#xff1a;MyEclipse、Tomcat 系统展示 首页 注册界面…

全排列(C++)

2024年6月16日1&#xff1a;48&#xff0c;正式开启每日一题~ 题目要求&#xff1a;给定正整数n&#xff08;n≥1&#xff09;&#xff0c;给出1~n的全排列&#xff0c;例如&#xff0c;当n3时全排列是{{1&#xff0c;2&#xff0c;3}&#xff0c;{1&#xff0c;3&#xff0c;…

数字化物资管理系统的未来:RFID技术的创新应用

在信息化和智能化不断发展的背景下&#xff0c;物资管理系统的数字化转型已成为各行各业关注的焦点。RFID技术作为一种先进的物联网技术&#xff0c;通过全面数字化实现物资信息的实时追踪和高效管理&#xff0c;为企业的物资管理提供了强有力的支持。 首先&#xff0c;RFID技…

docker将容器打包提交为镜像,再打包成tar包

将容器打包成镜像可以通过以下步骤来实现。这里以 Docker 为例&#xff0c;假设你已经安装了 Docker 并且有一个正在运行的容器。 1. 找到正在运行的容器 首先&#xff0c;你需要找到你想要打包成镜像的容器的 ID 或者名字。可以使用以下命令查看所有正在运行的容器&#xff…

SQLite扩展插件终极集合

作为一个嵌入式数据库引擎&#xff0c;SQLite 与其他数据库管理系统相比&#xff0c;缺少了一些功能。不过 SQLite 提供了一个扩展机制&#xff0c;因此我们可以在网络上找到大量的 SQLite 插件。 今天我们介绍的这个插件叫做 sqlean&#xff0c;它打包了许多流行的 SQLite 扩…

Go微服务: redis分布式锁保证数据原子操作的一致性

概述 随着云计算和大数据技术的飞速发展&#xff0c;分布式系统已经成为现代IT架构的重要组成部分在分布式系统中&#xff0c;数据的一致性是一个至关重要的挑战&#xff0c;特别是在并发访问和修改共享资源的场景下分布式锁是一种跨进程、跨机器节点的互斥锁&#xff0c;用于…

Python web 开发 flask 实践

1、前言 前文已经介绍了很多关于 python 的算法和脚本的写法&#xff0c;在本文将开启python的 web 的开发&#xff0c;和java 类似的&#xff0c;对于 web 开发也需要引入框架&#xff0c;对于 python 的 web 开发来说常见的有 flask 和 django 两种&#xff0c;在本文中将要…

Comparison method violates its general contract! 神奇的报错

发生情况 定位到问题代码如下&#xff08;脱敏处理过后&#xff09;&#xff0c;意思是集合排序&#xff0c;如果第一个元素大于第二个元素&#xff0c;比较结果返回1&#xff0c;否则返回-1&#xff0c;这里粗略的认为小于和等于是一样的结果 List<Integer> list Arr…

【Android14 ShellTransitions】(六)SyncGroup完成

这一节的内容在WMCore中&#xff0c;回想我们的场景&#xff0c;是在Launcher启动某一个App&#xff0c;那么参与动画的就是该App对应Task&#xff08;OPEN&#xff09;&#xff0c;以及Launcher App对应的Task&#xff08;TO_BACK&#xff09;。在确定了动画的参与者后&#x…

C#.net6.0语言+B/S架构+前后端分离 手术麻醉信息管理系统源码

C#.net6.0语言&#xff0b;B/S架构前后端分离 手术麻醉信息管理系统源码 什么是手术麻醉信息管理系统 满足医院等级评级需求 满足电子病历评级需求 满足科室需求 术前 1、患者术前评估/诊断 2、术前讨论制定手术方案 3、手术准备 4、术前准备 术中 1、送手术室 2、麻…

openlayers 轨迹回放(历史轨迹),实时轨迹

本篇介绍一下使用openlayers轨迹回放&#xff08;历史轨迹&#xff09;&#xff0c;实时轨迹 1 需求 轨迹回放&#xff08;历史轨迹&#xff09;实时轨迹 2 分析 主要是利用定时器&#xff0c;不断添加feature 轨迹回放&#xff08;历史轨迹&#xff09;&#xff0c;一般是…

Ubuntu安装qemu-guest-agent

系列文章目录 Ubuntu-24.04-live-server-amd64安装界面中文版 Ubuntu-24.04-live-server-amd64启用ssh Ubuntu乌班图安装VIM文本编辑器工具 文章目录 系列文章目录前言一、安装二、启用服务三、效果总结 前言 QEMU Guest Agent&#xff08;简称QEMU GA或QGA&#xff09;在虚拟…

什么是NLP-自然语言处理

什么是NLP-自然语言处理 什么是NLP开通NLP新建项目创建模型 什么是NLP NPL是面向算法小白用户的行业自适应标注、训练和服务平台。该产品支持文本实体抽取、文本分类、关键短语抽取、情感分析、关系抽取、短文本匹配、商品评价解析等 NLP 定制化算法能力&#xff0c;用户无需拥…