问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

咨询一个鸿蒙原生开发中的Toggle开关使用问题？

头像
三掌柜
    37.1k430279

    咨询一个鸿蒙原生开发中的Toggle开关使用问题？Toggle在使用的时候，设置默认值ison=true， 然后点击的时候需要调接口成功后才能设置Toggle开关关闭状态。但是在点击的时候还没调接口Toggle组件已经改变状态了。怎么处理呢？

    本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

    HarmonyOSharmonyos-next
    阅读 573
    avatarAI BotBETA
    在鸿蒙原生开发中，如果你希望在点击 Toggle 开关后，等待接口调用成功后再改变 Toggle 的状态，可以通过以下方式处理：

1. **禁用 Toggle 的自动状态切换**：
   在 Toggle 的点击事件中，首先禁用其自动改变状态的功能。你可以通过手动控制其状态来实现这一点。

2. **调用接口**：
   在点击事件中，发起接口调用。

3. **接口回调中更新 Toggle 状态**：
   在接口调用成功的回调中，根据接口返回的结果手动设置 Toggle 的状态。

具体实现示例（假设你使用的是 Java 或 JS 框架）：

- **Java 示例**：

    toggleButton.setClickedListener(new Component.ClickedListener() {

      @Override
  public void onClick(Component component) {
      // 禁用 Toggle 自动切换状态
      boolean currentState = toggleButton.isChecked();
      if (currentState) {
          // 阻止 Toggle 自动变为关闭状态
          // 手动调用接口
          callYourApi(new ApiCallback() {
              @Override
              public void onSuccess() {
                      // 接口调用成功，设置 Toggle 为关闭状态
                      toggleButton.setChecked(false);
                  }

              @Override
              public void onError() {
                      // 接口调用失败，可以根据需求处理
                  }
          });
      }
  }

    });

    
- **JS 示例**：

    toggleButton.on('click', () => {

      let currentState = toggleButton.isChecked();
  if (currentState) {
      // 阻止 Toggle 自动变为关闭状态
      // 手动调用接口
      callYourApi().then(() => {
          // 接口调用成功，设置 Toggle 为关闭状态
          toggleButton.setChecked(false);
      }).catch(() => {
          // 接口调用失败，可以根据需求处理
      });
  }

    });

    
通过这种方式，你可以确保 Toggle 的状态在接口调用成功后再进行更新，从而避免在接口调用过程中 Toggle 状态的不一致问题。
    1 个回答
    得票最新
    头像
    cococat
      5.9k22149
      ✓ 已被采纳

      可以使用hitTestBehavior参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
      调取付款码会引起页面重绘，页面重绘导致toggle又会重回到默认值，给出类似原理的代码，建议参考修改：

      @Entry 
@Component 
struct Index { 
  @State isDarkMode: boolean = false 
  build() { 
    Column() { 
      Toggle({ type: ToggleType.Switch， isOn: this.isDarkMode }) 
        .onChange((isOn: boolean) => { 
          console.info('Toggle.onChange:isOn' + isOn) 
          this.isDarkMode = isOn 
          getContext(this).getApplicationContext().setColorMode(this.isDarkMode ? 0 : 1) 
        }) 
    }.width('100%').height('100%').padding(32) 
  } 
} 
 
 
@Entry 
@Component 
struct Index { 
  @State isDarkMode: boolean = false 
  build() { 
    Column() { 
      Column() { 
        Toggle({ type: ToggleType.Switch， isOn: $$this.isDarkMode }) 
 
          .onChange((isOn: boolean) => { 
            console.info('Toggle.onChange:isOn' + isOn) 
            this.isDarkMode = isOn 
            getContext(this).getApplicationContext().setColorMode(this.isDarkMode ? 0 : 1) 
          }) 
      } 
      .hitTestBehavior(HitTestMode.Block) 
      .onClick(() => { 
        setTimeout(() => { 
          this.isDarkMode = !this.isDarkMode 
        }， 10000) 
      }) 
    }.width('100%').height('100%').padding(32) 
  } 
}

      本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题