未验证 提交 2106fec1 编写于 作者: L luoying_ace 提交者: Gitee

update zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md.

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 7ebb7c01
# 焦点事件 # 焦点事件
焦点事件指页面焦点在组件间移动时触发的事件,组件可使用焦点事件来更改内容 焦点事件指页面焦点在可获焦组件间移动时触发的事件,组件可使用焦点事件来处理相关逻辑
> **说明:** > **说明:**
> >
> - 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > - 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
>
> - 目前仅支持通过外接键盘的tab键、方向键触发。 > - 目前仅支持通过外接键盘的tab键、方向键触发。
...@@ -12,13 +13,9 @@ ...@@ -12,13 +13,9 @@
| **名称** | **支持冒泡** | **功能描述** | | **名称** | **支持冒泡** | **功能描述** |
| ---------------------------------------- | -------- | --------------- | | ---------------------------------------- | -------- | --------------- |
| onFocus(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 | | onFocus(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(event:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 | | onBlur(event:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
> **说明:**
>
> 支持焦点事件的组件:Button、Text、Image、List、Grid。
## 示例 ## 示例
...@@ -27,44 +24,50 @@ ...@@ -27,44 +24,50 @@
@Entry @Entry
@Component @Component
struct FocusEventExample { struct FocusEventExample {
@State textOne: string = '' @State oneButtonColor: string = '#FFC0CB';
@State textTwo: string = '' @State twoButtonColor: string = '#87CEFA';
@State textThree: string = '' @State threeButtonColor: string = '#90EE90';
@State oneButtonColor: string = '#FF0000'
@State twoButtonColor: string = '#87CEFA'
@State threeButtonColor: string = '#90EE90'
build() { build() {
Column({ space:20 }){ Column({ space: 20 }) {
Button(this.textOne) // 通过外接键盘的上下键可以让焦点在三个按钮间移动,按钮获焦时颜色变化,失焦时变回原背景色
Button('First Button')
.backgroundColor(this.oneButtonColor) .backgroundColor(this.oneButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
.onFocus(() => { .onFocus(() => {
this.textOne = 'First Button onFocus' this.oneButtonColor = '#FF0000';
this.oneButtonColor = '#AFEEEE'
}) })
.onBlur(() => { .onBlur(() => {
this.textOne = 'First Button onBlur' this.oneButtonColor = '#FFC0CB';
this.oneButtonColor = '#FFC0CB'
}) })
Button(this.textTwo) Button('Second Button')
.backgroundColor(this.twoButtonColor) .backgroundColor(this.twoButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
Button(this.textThree) .onFocus(() => {
this.twoButtonColor = '#FF0000';
})
.onBlur(() => {
this.twoButtonColor = '#87CEFA';
})
Button('Third Button')
.backgroundColor(this.threeButtonColor) .backgroundColor(this.threeButtonColor)
.width(260).height(70).fontColor(Color.Black) .width(260)
.height(70)
.fontColor(Color.Black)
.focusable(true) .focusable(true)
.onFocus(() => { .onFocus(() => {
this.textThree = 'Third Button onFocus' this.threeButtonColor = '#FF0000';
this.threeButtonColor = '#AFEEEE'
}) })
.onBlur(() => { .onBlur(() => {
this.textThree = 'Third Button onBlur' this.threeButtonColor = '#90EE90';
this.threeButtonColor = '#FFC0CB'
}) })
}.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.
先完成此消息的编辑!
想要评论请 注册