鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）_鸿蒙 search不获取焦点(1)

最新推荐文章于 2024-05-14 21:32:03 发布
最新推荐文章于 2024-05-14 21:32:03 发布
阅读量889 收藏 19
点赞数 16
分类专栏： 程序员 文章标签： 鸿蒙 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84862298/article/details/138764087
版权

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！


img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

.onBlur(() => {
this.twoButtonColor = Color.Grey;
})

Button(‘Third Button’)
.width(260)
.height(70)
.backgroundColor(this.threeButtonColor)
.fontColor(Color.Black)
// 监听第三个组件的获焦事件，获焦后改变颜色
.onFocus(() => {
this.threeButtonColor = Color.Green;
})
// 监听第三个组件的失焦事件，失焦后改变颜色
.onBlur(() => {
this.threeButtonColor = Color.Gray ;
})
}.width(‘100%’).margin({ top: 20 })
}
}

在这里插入图片描述

4.设置组件是否获焦

组件类型获焦能力默认焦点设定
默认可获焦组件有交互行为的组件，例如Button、Checkbox，TextInput组件，此类组件无需设置任何属性，默认即可获焦。是
有获焦能力但默认不可获焦组件Text、Image组件等，缺省情况下无法获焦，可使用focusable(true)使能。否
无获焦能力的组件无交互行为的展示类组件，例如Blank、Circle组件，即使使用focusable属性也无法使其可获焦。否

按照组件的获焦能力分为三类的表格展示，可以根据需要选择适合的组件类型来实现焦点控制功能。

接口：

focusable(value: boolean)

案例：

// xxx.ets
@Entry
@Component
struct FocusableExample {
@State textFocusable: boolean = true;
@State color1: Color = Color.Yellow;
@State color2: Color = Color.Yellow;

build() {
Column({ space: 5 }) {
Text(‘Default Text’) // 第一个Text组件未设置focusable属性，默认不可获焦
.borderColor(this.color1)
.borderWidth(2)
.width(300)
.height(70)
.onFocus(() => {
this.color1 = Color.Blue;
})
.onBlur(() => {
this.color1 = Color.Yellow;
})
Divider()

Text('focusable: ’ + this.textFocusable) // 第二个Text设置了focusable属性，初始值为true
.borderColor(this.color2)
.borderWidth(2)
.width(300)
.height(70)
.focusable(this.textFocusable)
.onFocus(() => {
this.color2 = Color.Blue;
})
.onBlur(() => {
this.color2 = Color.Yellow;
})

Divider()

Row() {
Button(‘Button1’)
.width(140).height(70)
Button(‘Button2’)
.width(160).height(70)
}

Divider()
Button(‘Button3’)
.width(300).height(70)

Divider()
}.width(‘100%’).justifyContent(FlexAlign.Center)
.onKeyEvent((e) => { // 绑定onKeyEvent，在该Column组件获焦时，按下’F’键，可将第二个Text的focusable置反
if (e.keyCode === 2022 && e.type === KeyType.Down) {
this.textFocusable = !this.textFocusable;
}
})
}
}

在这里插入图片描述

5.自定义默认焦点

接口：

defaultFocus(value: boolean)

案例：

// xxx.ets
import promptAction from ‘@ohos.promptAction’;

class MyDataSource implements IDataSource {
private list: number[] = [];
private listener: DataChangeListener;

constructor(list: number[]) {
this.list = list;
}

totalCount(): number {
return this.list.length;
}

getData(index: number): any {
return this.list[index];
}

registerDataChangeListener(listener: DataChangeListener): void {
this.listener = listener;
}

unregisterDataChangeListener() {
}
}

@Entry
@Component
struct SwiperExample {
private swiperController: SwiperController = new SwiperController()
private data: MyDataSource = new MyDataSource([])

aboutToAppear(): void {
let list = []
for (let i = 1; i <= 4; i++) {
list.push(i.toString());
}
this.data = new MyDataSource(list);
}

build() {
Column({ space: 5 }) {
Swiper(this.swiperController) {
LazyForEach(this.data, (item: string) => {
Row({ space: 20 }) {
Column() {
Button(‘1’).width(200).height(200)
.fontSize(40)
.backgroundColor(‘#dadbd9’)
}

Column({ space: 20 }) {
Row({ space: 20 }) {
Button(‘2’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
Button(‘3’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
}

Row({ space: 20 }) {
Button(‘4’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
Button(‘5’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
}

Row({ space: 20 }) {
Button(‘6’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
Button(‘7’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
}
}
}
.width(480)
.height(380)
.justifyContent(FlexAlign.Center)
.borderWidth(2)
.borderColor(Color.Gray)
.backgroundColor(Color.White)
}, item => item)
}
.cachedCount(2)
.index(0)
.interval(4000)
.indicator(true)
.loop(true)
.duration(1000)
.itemSpace(0)
.curve(Curve.Linear)
.onChange((index: number) => {
console.info(index.toString());
})
.margin({ left: 20, top: 20, right: 20 })

Row({ space: 40 }) {
Button(‘←’)
.fontSize(40)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Black)
.backgroundColor(Color.Transparent)
.onClick(() => {
this.swiperController.showPrevious();
})
Button(‘→’)
.fontSize(40)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Black)
.backgroundColor(Color.Transparent)
.onClick(() => {
this.swiperController.showNext();
})
}
.width(480)
.height(50)
.justifyContent(FlexAlign.Center)
.borderWidth(2)
.borderColor(Color.Gray)
.backgroundColor(‘#f7f6dc’)

Row({ space: 40 }) {
Button(‘Cancel’)
.fontSize(30)
.fontColor(‘#787878’)
.type(ButtonType.Normal)
.width(140)
.height(50)
.backgroundColor(‘#dadbd9’)

Button(‘OK’)
.fontSize(30)
.fontColor(‘#787878’)
.type(ButtonType.Normal)
.width(140)
.height(50)
.backgroundColor(‘#dadbd9’)
.onClick(() => {
promptAction.showToast({ message: ‘Button OK on clicked’ });
})
}
.width(480)
.height(80)
.justifyContent(FlexAlign.Center)
.borderWidth(2)
.borderColor(Color.Gray)
.backgroundColor(‘#dff2e4’)
.margin({ left: 20, bottom: 20, right: 20 })
}.backgroundColor(‘#f2f2f2’)
.margin({ left: 50, top: 50, right: 20 })
}
}

在这里插入图片描述

6.自定义TAB键走焦顺序

Button(‘1’).width(200).height(200)
.fontSize(40)
.backgroundColor(‘#dadbd9’)
.tabIndex(1) // Button-1设置为第一个tabIndex节点
Button(‘←’)
.fontSize(40)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Black)
.backgroundColor(Color.Transparent)
.onClick(() => {
this.swiperController.showPrevious();
})
.tabIndex(2) // Button-左箭头设置为第二个tabIndex节点
Button(‘OK’)
.fontSize(30)
.fontColor(‘#787878’)
.type(ButtonType.Normal)
.width(140).height(50).backgroundColor(‘#dadbd9’)
.onClick(() => {
promptAction.showToast({ message: ‘Button OK on clicked’ });
})
.tabIndex(3) // Button-OK设置为第三个tabIndex节点

🦋6.1 groupDefaultFocus

我们分别将某个组件设置为tabIndex节点，设置完之后，只有当我们按下TAB/ShiftTab键在这3个组件上进行焦点切换时，才会出现快速走焦的效果。

为了解决这个问题，我们可以给每个区域的容器设置tabIndex属性。然而，这样设置存在一个问题：当首次走焦到容器上时，焦点会默认落在容器内的第一个可获焦组件上，而不是我们想要的Button1、左箭头、ButtonOK。

为了解决这个问题，我们引入了一个名为groupDefaultFocus的通用属性，该属性接受一个布尔值参数，默认值为false。使用该属性需要与tabIndex属性结合使用，首先使用tabIndex为每个区域（容器）定义焦点切换顺序，然后为Button1、左箭头、ButtonOK这些组件绑定groupDefaultFocus(true)。这样，在首次走焦到目标区域（容器）时，拥有groupDefaultFocus(true)绑定的子组件将同时获取焦点。

// xxx.ets
import promptAction from ‘@ohos.promptAction’;

class MyDataSource implements IDataSource {
private list: number[] = [];
private listener: DataChangeListener;

constructor(list: number[]) {
this.list = list;
}

totalCount(): number {
return this.list.length;
}

getData(index: number): any {
return this.list[index];
}

registerDataChangeListener(listener: DataChangeListener): void {
this.listener = listener;
}

unregisterDataChangeListener() {
}
}

@Entry
@Component
struct SwiperExample {
private swiperController: SwiperController = new SwiperController()
private data: MyDataSource = new MyDataSource([])

aboutToAppear(): void {
let list = []
for (let i = 1; i <= 4; i++) {
list.push(i.toString());
}
this.data = new MyDataSource(list);
}

build() {
Column({ space: 5 }) {
Swiper(this.swiperController) {
LazyForEach(this.data, (item: string) => {
Row({ space: 20 }) { // 设置该Row组件为tabIndex的第一个节点
Column() {
Button(‘1’).width(200).height(200)
.fontSize(40)
.backgroundColor(‘#dadbd9’)
.groupDefaultFocus(true) // 设置Button-1为第一个tabIndex的默认焦点
}

Column({ space: 20 }) {
Row({ space: 20 }) {
Button(‘2’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
Button(‘3’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
}

Row({ space: 20 }) {
Button(‘4’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
Button(‘5’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
}

Row({ space: 20 }) {
Button(‘6’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
Button(‘7’)
.width(100)
.height(100)
.fontSize(40)
.type(ButtonType.Normal)
.borderRadius(20)
.backgroundColor(‘#dadbd9’)
}
}
}
.width(480)
.height(380)
.justifyContent(FlexAlign.Center)
.borderWidth(2)
.borderColor(Color.Gray)
.backgroundColor(Color.White)
.tabIndex(1)
}, item => item)
}
.cachedCount(2)
.index(0)

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！


img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

=> item)
}
.cachedCount(2)
.index(0)

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！


[外链图片转存中…(img-r8yqF3pk-1715512631310)]
[外链图片转存中…(img-zRgg2PZg-1715512631310)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

2401_84862298
关注
  • 16
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS入门文档_鸿蒙学堂-0001_鸿蒙学堂官网_鸿蒙harmonyOS_鸿蒙_鸿蒙学堂_
09-29
HarmonyOS 是一款“面向未来”、面向全场景（移动办公、运动健康、社交通信、媒体娱乐等）的分布式操作系统。在传统的单设备系统能力的基础上，HarmonyOS 提出了基于同一套系统能力、适配多种终端形态的分布式理念，...
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
最新发布
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
鸿蒙Harmony应用开发—ArkTS声明式开发（焦点事件）
m0_64420071的博客
02-29 1440
基于ArkTS声明式开发（焦点事件）
【鸿蒙开发】之ArkUi中List样式的修改
qq_31532979的博客
03-12 587
使用ComponentContainer中的invalidate()方法来刷新组件的显示，这样可以强制重新渲染。例如，在修改完文字颜色后，可以在相应的位置调用invalidate()方法来刷新界面。在鸿蒙开发中，可以使用ComponentContainer中的setAttributeValue()方法来动态设置组件的属性。你可以使用属性动画库来为列表项的文字颜色属性添加渐变动画效果，从而使修改后的颜色能够更流畅地过渡。根据具体的需求和场景，你可以选择适合的方法来实现列表样式的修改。
Android：ListView内被选中的item改变背景色（真实可行的方法！！！）
cxcxrs的博客
06-13 3054
文章目录一、 界面实现效果二、 将ListView所在布局文件的背景色设为灰色三、 在ListView所在的java文件中四、 后记 一、 界面实现效果 二、 将ListView所在布局文件的背景色设为灰色 <!-- ListView所在的布局文件的背景色设为灰色：android:background="#ececec" --> <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="htt
鸿蒙OS应用开发之——Java UI框架-组件与布局开发
我的博客
12-31 1869
一 概述 Ability和AbilitySlice两个类的关系 组件分类 创建布局 二 Ability和AbilitySlice两个类的关系 2.1 两个类的关系 HarmonyOS提供了Ability和AbilitySlice两个基础类 有界面的Ability绑定了系统的Window进行UI展示，具有生命周期 AbilitySlice主要用于承载Ability的鸡腿逻辑实现和界面UI，是应用显示、运行和跳转的最小单元 AbilitySlice通过setUIContent为界面设置布局 接
鸿蒙HarmonyOS实战-ArkUI事件（键鼠事件）_harmonyos监听输入法事件(1)
2401_84160361的博客
04-12 326
好像本地模拟器，预览，远程真机都没效果。
HarmonyOS（commandline-tools-linux-2.0.0.2.zip）
11-08
这些工具是开发和维护HarmonyOS应用程序不可或缺的一部分，尤其对于熟悉命令行界面的开发者来说，它们提供了高效的工作方式。 "commandline-tools-linux-2.0.0.2"版本号表明这是针对Linux平台的2.0.0.2版命令行工具...
华为HarmonyOS鸿蒙高级应用实站课程-网盘链接提取码下载 .txt
02-17
华为HarmonyOS鸿蒙系统实战应用开发课程，一次课程带领同学们了解HarmonyOS鸿蒙系统。课程分为两个阶段，第一部分是HarmonyOS基础开发阶段，第二部分是HarmonyOS进阶开发阶段。课程从内向外逐步深入的剖析和讲解...
book_鸿蒙入门HarmonyOS应用开发_书中源码.zip
02-07
【标题】"book_鸿蒙入门HarmonyOS应用开发_书中源码.zip" 提供了对鸿蒙操作系统（HarmonyOS）应用开发的基础教程资源，其中包含了一个名为 "book_HarmonyOS_demo-main" 的子文件。这个压缩包很可能是为初学者准备的...
js失去焦点事件_鸿蒙2.0 JavaScript / JS 入门教程（一）组件、样式和交互概览
weixin_39820177的博客
12-03 264
鸿蒙js开发和开发前端网页类似，每个当前屏幕画面是一个页面，每个页面由3个部分组成html、css、js。可以简单地理解为组件、样子、交互。页面源码结构当然我有了几个组件，规定了它们的样子之后，还需要布局，就是怎么摆放它们。布局是由组件的嵌套包含关系和样子中的方向等共同决定的。比如我有3个组件，A、B、C嵌套关系为A包含B，方向为A和C水平排列。（A是容器；水平或垂直排列由css决定）组件包括四种...
鸿蒙屏幕旋转，横竖屏监听
shenfei平凡之路
07-14 1834
鸿蒙如何监听手机旋转，横竖屏 步骤一，config.json 在config.json中的abilities下某一个ability中监听，在下面添加"configChanges"：[“orientation”] 步骤二，在Ability或AbilitySlice中 在Ability或AbilitySlice中重写 @Override protected void onOrientationChanged(AbilityInfo.DisplayOrientation displayOrientatio
鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）
shudaoshanQAQ的博客
01-08 1444
焦点事件是指程序中的重要事件或关键点。焦点事件通常是程序的核心逻辑和功能，需要引起特殊的关注和处理。
鸿蒙 harmonyos arkts Search Input组件默认获取焦点弹出键盘
yuanlaile的博客
03-19 735
鸿蒙 harmonyos arkts 的Search组件如何默认获取焦点弹出键盘呢？思路很简单，刚进来的时候模拟点击弹出键盘
鸿蒙原生应用数量激增20倍，鸿蒙生态“一路狂奔”！
m0_71524094的博客
05-14 1133
过去几个月，在各地政府和千行百业伙伴的全面支持下，鸿蒙生态建设正在以前所未有的速度和规模蓬勃发展。
鸿蒙开发-UI-交互事件-焦点事件
中年程序员
03-26 1331
上文详细学习了鸿蒙开发UI交互事件中的键鼠事件，了解了键鼠事件的数据流，学习了各种事件的回调函数，以及响应示例代码，本文将学习鸿蒙开发UI交互焦点事件。焦点系统在页面初次构建完成时，会搜索当前页下的所有组件，找到第一个绑定了defaultFocus(true)的组件，然后将该组件置为默认焦点，若无任何组件绑定defaultFocus(true)，则将第一个找到的可获焦的组件置为默认焦点。//默认焦点的设置接口tabIndex用于设置自定义TAB键走焦顺序，默认值为0。
鸿蒙HarmonyOS实战-ArkUI事件（触屏事件）
shudaoshanQAQ的博客
01-08 1799
触屏事件是指通过触摸屏幕来进行操作和交互的事件。常见的触屏事件包括点击（tap）、双击（double tap）、长按（long press）、滑动（swipe）、拖动（drag）等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值