Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
2106fec1
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
2106fec1
编写于
10月 08, 2022
作者:
L
luoying_ace
提交者:
Gitee
10月 08, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md.
Signed-off-by:
N
luoying_ace
<
luoying19@huawei.com
>
上级
7ebb7c01
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
31 addition
and
28 deletion
+31
-28
zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
...cation-dev/reference/arkui-ts/ts-universal-focus-event.md
+31
-28
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md
浏览文件 @
2106fec1
# 焦点事件
焦点事件指页面焦点在
组件间移动时触发的事件,组件可使用焦点事件来更改内容
。
焦点事件指页面焦点在
可获焦组件间移动时触发的事件,组件可使用焦点事件来处理相关逻辑
。
> **说明:**
>
> - 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> - 目前仅支持通过外接键盘的tab键、方向键触发。
...
...
@@ -15,10 +16,6 @@
| onFocus(event:
()
=
>
void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(event:()
=
>
void) | 否 | 当前组件失去焦点时触发的回调。 |
> **说明:**
>
> 支持焦点事件的组件:Button、Text、Image、List、Grid。
## 示例
...
...
@@ -27,44 +24,50 @@
@
Entry
@
Component
struct
FocusEventExample
{
@
State
textOne
:
string
=
''
@
State
textTwo
:
string
=
''
@
State
textThree
:
string
=
''
@
State
oneButtonColor
:
string
=
'
#FF0000
'
@
State
twoButtonColor
:
string
=
'
#87CEFA
'
@
State
threeButtonColor
:
string
=
'
#90EE90
'
@
State
oneButtonColor
:
string
=
'
#FFC0CB
'
;
@
State
twoButtonColor
:
string
=
'
#87CEFA
'
;
@
State
threeButtonColor
:
string
=
'
#90EE90
'
;
build
()
{
Column
({
space
:
20
}){
Button
(
this
.
textOne
)
Column
({
space
:
20
})
{
// 通过外接键盘的上下键可以让焦点在三个按钮间移动,按钮获焦时颜色变化,失焦时变回原背景色
Button
(
'
First Button
'
)
.
backgroundColor
(
this
.
oneButtonColor
)
.
width
(
260
).
height
(
70
).
fontColor
(
Color
.
Black
)
.
width
(
260
)
.
height
(
70
)
.
fontColor
(
Color
.
Black
)
.
focusable
(
true
)
.
onFocus
(()
=>
{
this
.
textOne
=
'
First Button onFocus
'
this
.
oneButtonColor
=
'
#AFEEEE
'
this
.
oneButtonColor
=
'
#FF0000
'
;
})
.
onBlur
(()
=>
{
this
.
textOne
=
'
First Button onBlur
'
this
.
oneButtonColor
=
'
#FFC0CB
'
this
.
oneButtonColor
=
'
#FFC0CB
'
;
})
Button
(
this
.
textTwo
)
Button
(
'
Second Button
'
)
.
backgroundColor
(
this
.
twoButtonColor
)
.
width
(
260
).
height
(
70
).
fontColor
(
Color
.
Black
)
.
width
(
260
)
.
height
(
70
)
.
fontColor
(
Color
.
Black
)
.
focusable
(
true
)
Button
(
this
.
textThree
)
.
onFocus
(()
=>
{
this
.
twoButtonColor
=
'
#FF0000
'
;
})
.
onBlur
(()
=>
{
this
.
twoButtonColor
=
'
#87CEFA
'
;
})
Button
(
'
Third Button
'
)
.
backgroundColor
(
this
.
threeButtonColor
)
.
width
(
260
).
height
(
70
).
fontColor
(
Color
.
Black
)
.
width
(
260
)
.
height
(
70
)
.
fontColor
(
Color
.
Black
)
.
focusable
(
true
)
.
onFocus
(()
=>
{
this
.
textThree
=
'
Third Button onFocus
'
this
.
threeButtonColor
=
'
#AFEEEE
'
this
.
threeButtonColor
=
'
#FF0000
'
;
})
.
onBlur
(()
=>
{
this
.
textThree
=
'
Third Button onBlur
'
this
.
threeButtonColor
=
'
#FFC0CB
'
this
.
threeButtonColor
=
'
#90EE90
'
;
})
}.
width
(
'
100%
'
).
margin
({
top
:
20
})
}.
width
(
'
100%
'
).
margin
({
top
:
20
})
}
}
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录