如何在应用开发中有效管理HarmonyOS NEXT LoadingProgress【加载中】组件的可见性？

Question

harmonyOSNext如何使用自带的加载中LoadingProgress组件并控制它的出现与隐藏？

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

Answer 1

在HarmonyOS Next中，可以使用LoadingProgress组件来显示加载中的提示。以下是如何在Java和ArkUI（JS/HTML5）中控制LoadingProgress组件的出现与隐藏的示例。

• 在Java中使用LoadingProgress组件
  在Java中，LoadingProgress组件通常是通过ProgressDialog类来使用的。以下是如何在Java代码中控制ProgressDialog的显示和隐藏：

  
  // 初始化ProgressDialog
  ProgressDialog progressDialog = new ProgressDialog(this);
  progressDialog.setTitle("加载中...");
  progressDialog.setMessage("请稍等...");
  
  // 显示ProgressDialog
  progressDialog.show();
  
  // 在适当的时候隐藏ProgressDialog
  progressDialog.dismiss();

  这里是一个完整的示例，展示了如何在AbilitySlice中控制ProgressDialog：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ProgressDialog;

public class MyAbilitySlice extends AbilitySlice {
    private ProgressDialog progressDialog;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_my);

        // 初始化ProgressDialog
        progressDialog = new ProgressDialog(this);
        progressDialog.setTitle("加载中...");
        progressDialog.setMessage("请稍等...");

        // 添加按钮来控制ProgressDialog的显示和隐藏
        Button showButton = (Button) findComponentById(ResourceTable.Id_button_show);
        Button hideButton = (Button) findComponentById(ResourceTable.Id_button_hide);

        showButton.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // 显示ProgressDialog
                progressDialog.show();
            }
        });

        hideButton.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // 隐藏ProgressDialog
                progressDialog.dismiss();
            }
        });
    }
}

确保你已经在相应的XML布局文件中定义了按钮的ID。

• 在ArkUI中使用LoadingProgress组件
  在ArkUI中，你可以直接在页面中使用LoadingProgress组件，并通过数据绑定或方法调用来控制其显示和隐藏。

以下是一个在ArkUI中控制LoadingProgress组件的示例：

<element name="loading-progress" module="ohos.loadingprogress"></element>

<template>
  <div class="container">
    <loading-progress if="{{showLoading}}" type="circular" size="normal"></loading-progress>
    <button onclick="showLoadingProgress">显示加载中</button>
    <button onclick="hideLoadingProgress">隐藏加载中</button>
  </div>
</template>

<script>
  export default {
    data: {
      showLoading: false
    },
    showLoadingProgress() {
      this.showLoading = true;
    },
    hideLoadingProgress() {
      this.showLoading = false;
    }
  }
</script>

<style>
  .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
</style>

在这个例子中，showLoadingProgress和hideLoadingProgress方法用于控制LoadingProgress组件的显示和隐藏。if="{{showLoading}}"是一个条件渲染指令，当showLoading为true时，LoadingProgress组件会被渲染到页面上。

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