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