​

1 关键字

Toggle组件 ; onChange ;

2 问题描述

开发板型号：wagner平板

OH版本：OpenHarmony 3.1 Release

ets API版本：8

问题现象：在开发板上通过手指滑动去切换toggle组件的开关状态时不触发onChange事件。

测试步骤：

1. 在OpenHarmony 3.1 Release系统上运行关于Toggle组件的ets应用。

2. 使用手指滑动的方式来切换开关状态。

3. 查看onChange事件是否被触发。

3 问题原因

3.1 正常机制

当运行toggle组件的ets应用时，开关状态的改变会触发onChange事件。

3.2 异常机制

在开发板上通过手指滑动形式去切换toggle组件的开关状态时没有触发onChange事件。

4 解决方案

在通过手指滑动的形式去切换toggle组件的开关状态时，滑动过程中触摸点相对于toggle组件的坐标是不断改变的。此时可以通过监听onTouch的位移变化来判断toggle组件的开关状态。例如，当手指向右滑动到最右端，也就是将toggle组件由关闭 (off) 状态切换到打开 (on) 状态，x值不断变大最后保持恒定。

 Toggle({ type: ToggleType.Switch, isOn: false })
          .selectedColor(0xed6f21)
          .switchPointColor(0xe5ffffff)
          .onTouch((event: TouchEvent) => {
            if (event.type === TouchType.Move) {
              this.eventType = 'Move'
            }
            console.log('x:' + event.touches[0].x + '\n' + 'y:' + event.touches[0].y)
          })

5 定位过程

正常情况下，当Toggle Type为switch时，开关状态进行切换时会触发onChange事件。

 Toggle({ type: ToggleType.Switch, isOn: false })
          .selectedColor(0xed6f21)
          .switchPointColor(0xe5ffffff)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })
 Toggle({ type: ToggleType.Switch, isOn: true })
          .selectedColor(0x39a2db)
          .switchPointColor(0xe5ffffff)
          .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
          })

从源码上分析大致如下:

当通过点击事件切换开关状态时会触发相应的onChange事件。

 void RenderToggle::HandleClickEvent()
{
    if (onClick_) {
        onClick_();
    }
    auto checkValue = toggleComponent_->GetCheckedState();
    toggleComponent_->SetCheckedState(!checkValue);
    MarkNeedRender();
    std::string checked = (!checkValue) ? "true" : "false";
    std::string result = std::string(R"("change",{"checked":)").append(checked.append("},null"));
    if (onChange_) {
        onChange_(result);
    }
    if (onChangeToggle_) {
        onChangeToggle_(!checkValue);
    }
}

因为手指滑动是一种以拖拽形式来进行开关状态切换，但是这种形式目前无法触发onChange回调，且toggle组件也没有对拖拽事件进行封装。

6 知识分享

在遇到手指滑动操作时很轻易会将其理解为普通的点击或者触摸事件，但仔细分析后会找到点击、按压或者拖拽的不同之处，这时候再去结合源码分析。