有没有HarmonyOS鸿蒙Next中"正在加载中"的进度动画demo能运行在har中？

有没有HarmonyOS鸿蒙Next中"正在加载中"的进度动画demo能运行在har中？ 鸿蒙我看下可以使用Image.animation来实现，但是我们har本身没有页面，如何在har的class中动态的添加"正在加载中"的动画呢？有人可以给个demo吗？谢谢了！

3 回复

promptAction弹不出来是因为unPay方法中嵌套了异步操作之后uicontext没有更新，而 promptAction.showToast调用的系统吐司是根据uicontext调用的，需要将uicontext传进来在异步操作中调用uiContext.getPromptAction().showToast就可以解决问题了，参考以下修改：

import { WindowUtils } from './WindowUtils';
import { promptAction, UIContext } from '@kit.ArkUI';
import { BusinessError } from '@ohos.base';
import { HttpClient, TimeUnit, Request, Logger, RequestBody } from '@ohos.httpclient';
import { common } from '@kit.AbilityKit';

export class Payment {
  amount: number = 123;
  transType: string = "0005";
  transTime: string = "20240729";
  orderId: string = "";

  // context:common.BaseContext=getContext()
  unPay(orderId: string,uiContext:UIContext) {
    WindowUtils.showLoading(getContext(), "正在加载中")
    let serverUrl = "https://www.baidu.com";
    let initStr = "123123123123234345";
    let client: HttpClient = new HttpClient.Builder()
      .setConnectTimeout(60, TimeUnit.SECONDS)
      .setReadTimeout(60, TimeUnit.SECONDS)
      .setWriteTimeout(60, TimeUnit.SECONDS)
      .build();
    let request = new Request.Builder()
      .url(serverUrl)// 配置对应url
      .post(RequestBody.create(initStr))
      .addHeader("Content-Type", "text/x-markdown")
      .addHeader("charset", "utf8")
      .build();
    client.newCall(request)// 发起异步请求
      .enqueue((result: string) => {
        setTimeout(() => {
          this.orderId = orderId;
          console.log(orderId + "支付成功!");
          WindowUtils.hideLoading();
          uiContext.getPromptAction().showToast({ message: orderId + "已经支付，请勿重复支付", duration: 5000 })
        }, 3000)
      }, (error: BusinessError) => {
        WindowUtils.hideLoading();
        Logger.error('init error == ' + JSON.stringify(error));
      });
  }
}

在Index.ets中：

import { WindowUtils } from './WindowUtils';
import { Payment } from './Payment';

@Entry({routeName: 'Index'})
@Component
struct Index {
  build() {
    Column(){
      Button('点击加载全局loading').onClick(() =>{
        new Payment().unPay("0123456789",this.getUIContext());
      })
    }
  }
}

更多关于有没有HarmonyOS鸿蒙Next中"正在加载中"的进度动画demo能运行在har中？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，"正在加载中"的进度动画可以通过使用ProgressBar组件或Lottie动画库来实现。以下是一个简单的ProgressBar组件示例代码，可以在har（HarmonyOS Ability Resource）中运行：

import { ProgressBar, Text } from '@ohos.hardware';
import { Component, State } from '@ohos.hardware';

export default class LoadingDemo extends Component {
    @State progress: number = 0;

    constructor() {
        super();
        setInterval(() => {
            this.progress += 10;
            if (this.progress > 100) {
                this.progress = 0;
            }
        }, 500);
    }

    render() {
        return (
            <Column>
                <Text>正在加载中...</Text>
                <ProgressBar value={this.progress} max={100} />
            </Column>
        );
    }
}

此代码创建了一个简单的加载进度条，并每500毫秒更新一次进度。ProgressBar组件用于显示进度，Text组件用于显示加载中的提示信息。该代码可以直接在HarmonyOS鸿蒙Next的har项目中运行，展示"正在加载中"的进度动画。

在HarmonyOS鸿蒙Next中，您可以使用ProgressBar组件来实现“正在加载中”的进度动画。以下是一个简单的Demo代码，可以在har（HarmonyOS Ability Resource）中运行：

import ProgressBar from '@ohos.progressbar';

@Entry
@Component
struct LoadingDemo {
  build() {
    Column() {
      ProgressBar()
        .width('80%')
        .height(10)
        .color(Color.Blue)
        .indeterminate(true) // 设置为不确定进度
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

这段代码创建了一个不确定进度的ProgressBar，适合用于“正在加载中”的场景。确保在项目的build.gradle中正确引用了相关依赖。

回到顶部