HarmonyOS鸿蒙Next中ArkUI（eTS）加载框效果

对话框要使用@CustomDialog来修饰一个组件，图形加载使用ImageAnimator组件实现，加载图中的几张图形。代码如下:

@Entry
@Component
struct Index {
  private dialogController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog({ loadingText: '请等待...' }),
    autoCancel: false,
    customStyle: true
  })
  build() {
    Column() {
      Button('请等待...')
        .onClick(() => {
          this.dialogController.open()
          setTimeout(() => {
            this.dialogController.close()
          }, 3000)
        })
        .backgroundColor(0x317aff)
        .margin({ top: 20 })
    }
    .width('100%')
  }
}

@CustomDialog
@Component
struct LoadingDialog {
  controller: CustomDialogController
  private loadingText: string
  @State state: AnimationStatus = AnimationStatus.Running
  private images: any[] = [{ src: '/common/loading1.png' }, { src: '/common/loading2.png' }...]

  build() {
    Stack() {
      Column(){
        ImageAnimator()
          .images(this.images)
          .state(this.state).fixedSize(true).preDecode(2)
          .fillMode(FillMode.None).iterations(-1).width(40).height(40)
        Text(this.loadingText).fontSize(14).fontColor(0xffffff).margin({top:8})
      }
    }
    .width(100)
    .height(100)
    .backgroundColor(0x88000000)
    .borderRadius(10)
    .shadow({ radius: 10, color: Color.Gray, offsetX: 3, offsetY: 3 })
  }
}

songsunli 1楼•12 天前

大佬们，请问一下这个loading要怎么封装才能在全局使用呢，现在这样的写法在其他地方用的话有点麻烦

更多关于HarmonyOS鸿蒙Next中ArkUI（eTS）加载框效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 2楼•12 天前

CustomDialog无法禁用back返回键，无法拦截onBackPress功能，不晓得是不是我哪里用的不对，一点返回就消失了！

sinazl 3楼•12 天前

使用动画会不会更好：

@CustomDialog
struct LoadingDialog {

    aboutToAppear(){
        setTimeout(() => {
            this.angle = 1440
        },100)
    }
    controller: CustomDialogController
    private loadingText: string

    @State angle:number = 10


    build() {
        Stack () {
            Column () {
                Image($r('app.media.loading'))
                    .width(70)
                    .height(70)
                    .rotate({angle:this.angle})
                    .animation({
                        duration: 5000,
                        curve: Curve.Linear,
                        delay: 0,
                        iterations: 1, // 设置-1表示动画无限循环
                        playMode: PlayMode.Alternate
                    })
                Text(this.loadingText).fontSize(14).fontColor(0xffffff).margin({ top: 8 })
            }
        }
        .width(100)
        .height(100)
        .backgroundColor(0x11000000)
        .borderRadius(10)
        .shadow({ radius: 10, color: Color.Gray, offsetX: 3, offsetY: 3 })
    }
}

zlyuanteng 4楼•12 天前

你这个如何全局写一个，然后哪里使用哪里调用呢，现在我自定义了一个dialog，但是每次使用都需要初始化。我想全局初始化一个然后哪里使用哪里调用方法就行

caililin 5楼•12 天前

大佬这个问题解决了吗，

sinazl 6楼•12 天前

HarmonyOS的社区里有很多技术大牛分享经验，学到了很多有用的知识。

nodeper 7楼•12 天前

请问图片资源是放在哪个目录？为啥我放置了不报错也不显示

ionicwang 8楼•12 天前

跟楼主学习，榜样

vueper 9楼•12 天前

码住，跟楼主学习！

gougou168 10楼•12 天前

在HarmonyOS鸿蒙Next中，ArkUI（eTS）提供了多种方式来实现加载框效果。加载框通常用于在异步操作或数据加载时向用户展示等待状态。ArkUI的LoadingProgress组件是常用的加载框实现方式。

LoadingProgress组件可以通过以下代码实现：

import { LoadingProgress } from '@ohos.arkui.eTS';

@Entry
@Component
struct LoadingExample {
  build() {
    Column() {
      LoadingProgress()
        .width(100)
        .height(100)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

LoadingProgress组件默认显示一个旋转的圆形进度条，可以通过设置width和height属性来调整其大小。此外，ArkUI还支持自定义加载框的样式和动画效果，开发者可以通过组合其他组件和动画API来实现更复杂的加载效果。

例如，使用Image组件和animateTo API可以实现自定义的加载动画：

import { Image, animateTo } from '@ohos.arkui.eTS';

@Entry
@Component
struct CustomLoadingExample {
  @State angle: number = 0;

  build() {
    Column() {
      Image($r('app.media.loading_icon'))
        .width(100)
        .height(100)
        .rotate({ x: 0, y: 0, z: 1, angle: this.angle })
        .onAppear(() => {
          animateTo({ duration: 1000, iterations: -1 }, () => {
            this.angle = 360;
          });
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

以上代码展示了如何使用Image组件和animateTo API实现一个旋转的加载图标。开发者可以根据需求进一步定制加载框的样式和动画效果。

bupafengyu 11楼•12 天前

在HarmonyOS鸿蒙Next中，ArkUI（eTS）提供了LoadingProgress组件来实现加载框效果。该组件用于显示一个旋转的进度指示器，通常用于表示数据加载或处理中的状态。你可以通过设置color属性来改变加载指示器的颜色，并通过size属性调整其大小。示例代码如下：

import { LoadingProgress } from '@ohos.arkui';

@Entry
@Component
struct LoadingExample {
  build() {
    Column() {
      LoadingProgress()
        .color(Color.Blue)
        .size(50)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

这段代码会在屏幕中央显示一个蓝色的加载指示器，大小为50。