1# 表冠事件（圆形屏幕推荐使用） 2 3表冠事件从API version 18开始支持，是指通过旋转表冠触发的事件，通过硬件采样频率上报旋转角度的变化。 4 5表冠事件的分发依赖于应用焦点，只有拥有焦点的组件才能接收该事件，因此，接收此事件的组件必须管理好其焦点状态。开发者可以自定义处理焦点事件。目前，系统中一些默认组件支持与表冠的交互，例如，旋转手表表冠后，滚动条会根据表冠的旋转方向滚动。此外，应用也可以通过特定接口感知表冠事件的上报。当前，默认支持表冠事件的组件包括： [Slider](../reference/apis-arkui/arkui-ts/ts-basic-components-slider.md)、[DatePicker](../reference/apis-arkui/arkui-ts/ts-basic-components-datepicker.md)、[TextPicker](../reference/apis-arkui/arkui-ts/ts-basic-components-textpicker.md)、 [TimePicker](../reference/apis-arkui/arkui-ts/ts-basic-components-timepicker.md)、[Scroll](../reference/apis-arkui/arkui-ts/ts-container-scroll.md)、[List](../reference/apis-arkui/arkui-ts/ts-container-list.md)、[Grid](../reference/apis-arkui/arkui-ts/ts-container-grid.md)、[WaterFlow](../reference/apis-arkui/arkui-ts/ts-container-waterflow.md)、[ArcList](../reference/apis-arkui/arkui-ts/ts-container-arclist.md)、[Refresh](../reference/apis-arkui/arkui-ts/ts-container-refresh.md)和[Swiper](../reference/apis-arkui/arkui-ts/ts-container-swiper.md)。 6 7> **说明：** 8> 9> - 仅圆形屏幕支持表冠事件。 10 11表冠事件发生时，会触发onDigitalCrown回调函数。 12 13```ts 14onDigitalCrown(event: (event?: CrownEvent) => void) 15``` 16 17其中，event参数提供表冠事件的时间戳，旋转角速度，旋转角度和[表冠动作](../reference/apis-arkui/arkui-ts/ts-appendix-enums.md#crownaction18)。 18 19当组件需要获取旋转角度等信息时，可以通过onDigitalCrown接收表冠事件来获得上报信息。以下以Text组件为例，介绍表冠事件开发的基本步骤及开发过程中需要注意的事项。 20 211. 组件获焦 22 23 确保接收事件的组件获得焦点，可以通过使用[focusable](../reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md#focusable)、[defaultFocus](../reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md#defaultfocus9)、[focusOnTouch](../reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md#focusontouch9)等方法来实现。如需更详细的焦点控制信息，请参考[焦点事件](../reference/apis-arkui/arkui-ts/ts-universal-attributes-focus.md)文档。 24 25 ```ts 26 Text(this.message) 27 .fontSize(20) 28 .fontColor(Color.White) 29 .backgroundColor("#262626") 30 .textAlign(TextAlign.Center) 31 .focusable(true) 32 .focusOnTouch(true) 33 .defaultFocus(true) 34 ``` 352. 注册事件回调 36 37 接收表冠事件需要注册表冠事件回调，当触发表冠事件时会执行回调函数。 38 39 ```ts 40 .onDigitalCrown((event: CrownEvent) => {}) 41 ``` 423. 事件字段的含义 43 44 表冠事件提供了时间戳，旋转角速度，旋转角度和表冠动作。此外表冠事件会触发事件冒泡，可通过[stopPropagation](../reference/apis-arkui/arkui-ts/ts-universal-events-crown.md#crownevent对象说明)阻止事件冒泡。 45 46 ```ts 47 event.stopPropagation(); 48 this.message = "CrownEvent\n\n" + JSON.stringify(event); 49 console.debug("action:%d, angularVelocity:%f, degree:%f, timestamp:%f", 50 event.action, event.angularVelocity, event.degree, event.timestamp); 51 ``` 52 53**完整示例：** 54 55```ts 56// xxx.ets 57@Entry 58@Component 59struct CityList { 60 @State message: string = "onDigitalCrown"; 61 62 build() { 63 Column() { 64 Row(){ 65 Stack() { 66 Text(this.message) 67 .fontSize(20) 68 .fontColor(Color.White) 69 .backgroundColor("#262626") 70 .textAlign(TextAlign.Center) 71 .focusable(true) 72 .focusOnTouch(true) 73 .defaultFocus(true) 74 .borderWidth(2) 75 .width(223).height(223) 76 .borderRadius(110) 77 .onDigitalCrown((event: CrownEvent) => { 78 event.stopPropagation(); 79 this.message = "CrownEvent\n\n" + JSON.stringify(event); 80 console.debug("action:%d, angularVelocity:%f, degree:%f, timestamp:%f", 81 event.action, event.angularVelocity, event.degree, event.timestamp); 82 }) 83 }.width("100%").height("100%") 84 }.width("100%").height("100%") 85 } 86 } 87} 88``` 89 90
