旋转表冠事件监听

本模块提供为当前页面设置旋转表冠事件监听器的能力，支持注册页面级的旋转表冠事件监听器。仅支持配备旋转表冠的设备。

说明：

本模块首批接口从API version 24开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

setMonitorForCrownEvents

setMonitorForCrownEvents(handler: Function): void

为当前页面设置旋转表冠事件监听器，当旋转表冠事件触发时，监听器会触发回调。

该监听器在发生页面路由时将自动移除，使用clearMonitorForCrownEvents()接口可手动移除。

说明：

当发生页面路由时，监听器将自动移除，因此建议在页面的onShow生命周期回调中调用此接口。

每个页面仅支持设置一个监听器，新注册的监听器会覆盖之前的监听器，系统将使用最后一次调用此接口时传入的监听器。

请勿在app.js中使用此函数，其行为未定义。

系统能力： SystemCapability.ArkUI.ArkUI.Full

模型约束： 此接口仅可在FA模型下使用。

参数：

参数名	类型	必填	说明
handler	Function	是	旋转表冠事件发生后执行该回调。回调格式为(event)=>{ return false/true; }。返回true时，旋转表冠事件不再分发给获焦的组件。返回false时，旋转表冠事件会继续分发给获焦组件。当回调的返回值异常时，例如返回值为undefined或无返回值，默认取值为false。可通过入参获取旋转表冠事件信息，事件信息请参见表1 CrownEvent对象属性列表。

表1 CrownEvent对象属性列表

名称	类型	只读	可选	说明
timestamp	number	否	否	时间戳。
angularVelocity	number	否	否	旋转角速度，表示每秒转的角度。逆时针旋转表冠时旋转角速度为正数，顺时针旋转表冠时旋转角速度为负数。单位：度/s
degree	number	否	否	相对旋转角度。逆时针旋转表冠时相对旋转角度为正数，顺时针旋转表冠时相对旋转角度为负数。单位：度。取值范围：[-360, 360]

clearMonitorForCrownEvents

clearMonitorForCrownEvents(): void

清除当前页面的旋转表冠事件监听器。

系统能力： SystemCapability.ArkUI.ArkUI.Full

模型约束： 此接口仅可在FA模型下使用。

示例

示例1（设置旋转表冠事件监听器）

该示例介绍了，如何通过setMonitorForCrownEvents为页面设置旋转表冠事件监听器，并通过监听器的回调返回值控制List组件是否响应旋转表冠事件。

从API version 24开始，新增setMonitorForCrownEvents接口和clearMonitorForCrownEvents接口。

/* xxx.css */
.container {
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    align-items: center;
}
.title {
    text-align: center;
    font-size: 50px;
    font-weight: 500;
    margin-left: 12px;
}

.text {
    font-size: 50px;
    font-weight: 500;
    margin-left: 200px;
}
.listItem {
    width: 100%;
    height: 100px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    font-size: 20px;
}
.btn{
    width: 380px;
    height: 100px;
    font-size: 36px;
    margin: 10px;
}

<!-- xxx.hml -->
<div class="container">
    <text class="title">
        {{ title }}
    </text>
    <button class="btn" type="capsule" value="clearMonitor" onclick="clearMonitor"></button>
    <button class="btn" type="capsule" value="flagChange" onclick="flagChange"></button>
    <list class="list" focusable="true" scrollpage="true">
        <list-item for="{{ array }}" class="listItem">
            <text class="text" onclick="toggleShow" show="{{ visible }}">{{ $item.value }}</text>
        </list-item>
    </list>
</div>

// xxx.js
export default {
    data: {
        title: 'TestPage',
        count: 0,
        display: true,
        array: [
            { 'value': 'TestListItem0' },
            { 'value': 'TestListItem1' },
            { 'value': 'TestListItem2' },
            { 'value': 'TestListItem3' },
            { 'value': 'TestListItem4' },
            { 'value': 'TestListItem5' },
            { 'value': 'TestListItem6' },
            { 'value': 'TestListItem7' },
            { 'value': 'TestListItem8' },
            { 'value': 'TestListItem9' },
        ],
        flag: false
    },
    onShow() {
        setMonitorForCrownEvents((event) => {
            console.info('event timestamp is: ', event.timeStamp, ', angularVelocity is: ',
                event.angularVelocity);
            console.info('rotate is: ', event.rotate);
            return this.flag;
        })
    },
    flagChange() {
        this.flag = !this.flag;
    },
    clearMonitor() {
        clearMonitorForCrownEvents();
    }
}