• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 焦点控制
2
3>  **说明：**
4> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6
7## 权限列表
8
9无
10
11
12## 属性
13
14| **名称** | **参数类型** | **默认值** | **描述** |
15| -------- | -------- | -------- | -------- |
16| focusable | boolean | false | 设置当前组件是否可以获焦。 |
17
18>  **说明：**
19> 支持焦点控制的组件：Button、Text、Image、List、Grid。
20
21
22## 示例
23
24```ts
25// xxx.ets
26@Entry
27@Component
28struct FocusableExample {
29  @State textOne: string = ''
30  @State textTwo: string = ''
31  @State textThree: string = 'The third button cannot be focused'
32  @State oneButtonColor: string = '#FF0000'
33  @State twoButtonColor: string = '#FFC0CB'
34  @State threeButtonColor: string = '#87CEFA'
35
36  build() {
37    Column({ space:20 }){
38      Button(this.textOne)
39        .backgroundColor(this.oneButtonColor)
40        .width(300).height(70).fontColor(Color.Black)
41        .focusable(true)
42        .onFocus(() => {
43          this.textOne = 'First Button onFocus'
44          this.oneButtonColor = '#AFEEEE'
45        })
46        .onBlur(() => {
47          this.textOne = 'First Button onBlur'
48          this.oneButtonColor = '#FFC0CB'
49        })
50      Button(this.textTwo)
51        .backgroundColor(this.twoButtonColor)
52        .width(300).height(70).fontColor(Color.Black)
53        .focusable(true)
54        .onFocus(() => {
55          this.textTwo = 'Second Button onFocus'
56          this.twoButtonColor = '#AFEEEE'
57        })
58        .onBlur(() => {
59          this.textTwo = 'Second Button onBlur'
60          this.twoButtonColor = '#FFC0CB'
61        })
62      Button(this.textThree)
63        .backgroundColor(this.threeButtonColor)
64        .width(300).height(70).fontColor(Color.Black)
65        .focusable(false)
66        .onFocus(() => {
67          this.textThree = 'Third Button onFocus'
68          this.threeButtonColor = '#AFEEEE'
69        })
70        .onBlur(() => {
71          this.textThree = 'Third Button onBlur'
72          this.threeButtonColor = '#FFC0CB'
73        })
74    }.width('100%').margin({ top:20 })
75  }
76}
77```
78