• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 鼠标光标控制
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiangtao92-->
5<!--Designer: @piggyguy-->
6<!--Tester: @songyanhong-->
7<!--Adviser: @HelloCrease-->
8
9控制鼠标光标的显示样式。
10
11>  **说明：**
12>
13>  从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14
15
16## cursorControl
17
18### setCursor
19
20setCursor(value: PointerStyle): void
21
22**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
23
24**系统能力：** SystemCapability.ArkUI.ArkUI.Full
25
26方法语句中可使用的全局接口，调用该接口可更改当前的鼠标光标样式。
27
28**参数：**
29
30| 参数名 | 类型 | 必填 | 说明 |
31| ----- | ------ | ---- | ---- |
32| value | [PointerStyle](#pointerstyle11) | 是   | 设置的鼠标样式。 |
33
34
35### restoreDefault
36
37restoreDefault(): void
38
39**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
40
41**系统能力：** SystemCapability.ArkUI.ArkUI.Full
42
43方法语句中可使用的全局接口，调用此接口可将鼠标光标恢复成默认箭头样式。
44
45## PointerStyle<sup>11+</sup>
46
47type PointerStyle = pointer.PointerStyle
48
49光标样式。
50
51**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
52
53**系统能力：** SystemCapability.MultimodalInput.Input.Pointer
54
55|类型|说明|
56| -- | -- |
57|[pointer.PointerStyle](../../apis-input-kit/js-apis-pointer.md#pointerstyle) |光标样式。|
58
59
60## 示例
61
62该示例通过setCursor实现了鼠标光标样式的更改。
63
64> **说明：**
65>
66> 直接使用cursorControl可能导致[UI上下文不明确](../../../ui/arkts-global-interface.md)的问题，建议使用getUIContext()获取[UIContext](../arkts-apis-uicontext-uicontext.md)实例，并使用[getCursorController](../arkts-apis-uicontext-uicontext.md#getcursorcontroller12)获取绑定实例的cursorControl。
67
68```ts
69// xxx.ets
70import { pointer } from '@kit.InputKit';
71
72@Entry
73@Component
74struct CursorControlExample {
75  @State text: string = '';
76  controller: TextInputController = new TextInputController()
77
78  build() {
79    Column() {
80      Row().height(200).width(200).backgroundColor(Color.Green).position({x: 150 ,y:70})
81        .onHover((flag) => {
82          if (flag) {
83            // 建议使用this.getUIContext().getCursorController().setCursor()
84            cursorControl.setCursor(pointer.PointerStyle.EAST)
85          } else {
86            // 建议使用this.getUIContext().getCursorController().restoreDefault()
87            cursorControl.restoreDefault()
88          }
89        })
90      Row().height(200).width(200).backgroundColor(Color.Blue).position({x: 220 ,y:120})
91        .onHover((flag) => {
92          if (flag) {
93            // 建议使用this.getUIContext().getCursorController().setCursor()
94            cursorControl.setCursor(pointer.PointerStyle.WEST)
95          } else {
96            // 建议使用this.getUIContext().getCursorController().restoreDefault()
97            cursorControl.restoreDefault()
98          }
99        })
100    }.width('100%')
101  }
102}
103```
104示意图：
105
106当鼠标悬浮在蓝色区域时，显示：向西箭头光标样式。
107
108![cursor_blue](figures/cursor_blue.jpg)
109
110当鼠标悬浮在绿色区域时，显示：向东箭头光标样式。
111
112![cursor_green](figures/cursor_green.jpg)
113