1# 表冠事件 2 指扭动表冠时触发的事件，事件的分发依赖于应用焦点，开发者可以通过[焦点事件](ts-universal-attributes-focus.md)自定义事件处理。 3 4> **说明：** 5> 6> - 从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 7> 8> - 手动旋转表冠存在默认的交互逻辑，例如旋转手表的表冠后，滚动条会根据旋转表冠的旋转方向进行滚动。 9> 10> - 组件收到表冠事件的前提是该组件获焦，焦点控制可以通过[focusable](ts-universal-attributes-focus.md#focusable)、[defaultFocus](ts-universal-attributes-focus.md#defaultFocus9)、[focusOnTouch](ts-universal-attributes-focus.md#focusOnTouch9)进行管理。 11> 12> - 仅穿戴设备支持该事件。 13> 14> - 默认支持表冠事件的组件: [Slider](ts-basic-components-slider.md)、[DatePicker](ts-basic-components-datepicker.md)、[TextPicker](ts-basic-components-textpicker.md)、 [TimePicker](ts-basic-components-timepicker.md)、[Scroll](ts-container-scroll.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)、[WaterFlow](ts-container-waterflow.md)、[ArcList](ts-container-arclist.md)、[Refresh](ts-container-refresh.md)和[ArcSwiper](ts-container-arcswiper.md)。 15 16## onDigitalCrown 17 18onDigitalCrown(handler: Optional<Callback<CrownEvent>>): T 19 20组件获焦以后扭动表冠时触发该回调。 21 22**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26 27**参数：** 28| 参数名 | 类型 | 必填 | 描述 | 29| ---------- | -------------------------------- | ------- | ----------------------------------------- | 30| handler | Optional<Callback<[CrownEvent](#crownevent对象说明)>> | 是 | 获得[CrownEvent](#crownevent对象说明)对象。 | 31 32 33**返回值：** 34| 类型 | 描述 | 35| --------- | ---------------| 36| T | 返回当前组件。 | 37 38## CrownEvent对象说明 39 40组件接收表冠事件的数据结构。内容包括时间戳、旋转角速度、旋转角度和表冠动作。 41 42**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46| 名称 | 类型 | 描述 | 47| --------------------- | -------------- | -------------------------------------- | 48| timestamp | number | 时间戳。 | 49| angularVelocity | number | 旋转角速度，每秒转的角度(°/s)。 | 50| degree | number | 相对旋转角度。<br>单位：度。<br>取值范围:[-360 360]。 | 51| action | [CrownAction](ts-appendix-enums.md#crownaction18) | 表冠动作。 | 52| stopPropagation | () => void | 阻止事件冒泡。 | 53 54## 示例 55该示例实现了组件注册表冠事件，接收表冠事件数据上报内容。 56```ts 57// xxx.ets 58@Entry 59@Component 60struct CityList { 61 @State message: string = "onDigitalCrown"; 62 63 build() { 64 Column() { 65 Row(){ 66 Stack() { 67 Text(this.message) 68 .fontSize(20) 69 .fontColor(Color.White) 70 .backgroundColor("#262626") 71 .textAlign(TextAlign.Center) 72 .focusable(true) 73 .focusOnTouch(true) 74 .defaultFocus(true) 75 .borderWidth(2) 76 .width(223).height(223) 77 .borderRadius(110) 78 .onDigitalCrown((event: CrownEvent) => { 79 event.stopPropagation(); 80 this.message = "CrownEvent\n\n" + JSON.stringify(event); 81 console.debug("action:%d, angularVelocity:%f, degree:%f, timestamp:%f", 82 event.action, event.angularVelocity, event.degree, event.timestamp); 83 }) 84 }.width("100%").height("100%") 85 }.width("100%").height("100%") 86 } 87 } 88} 89``` 90 91 92
