基于Canvas实现抽奖转盘

本文介绍了一个基于ArkUI框架实现的抽奖圆形转盘案例，主要功能包括：1. 使用Canvas组件绘制抽奖转盘界面，包含外圆盘、花瓣装饰、内扇形抽奖区域和奖品图文展示；2. 通过显式动画实现转盘旋转效果；3. 使用自定义弹窗显示抽奖结果。案例采用MVVM架构，包含绘制逻辑类、数据模型和UI组件，实现了完整的抽奖交互流程，展示了ArkUI的Canvas绘制、动画和自定义弹窗等核心功能。

cnbj_zhjy_felix

1063人浏览 · 2025-06-01 08:56:17

cnbj_zhjy_felix · 2025-06-01 08:56:17 发布

本案例基于画布组件、显式动画，实现的一个自定义抽奖圆形转盘。包含如下功能：

通过画布组件Canvas，画出抽奖圆形转盘。
通过显式动画启动抽奖功能。
通过自定义弹窗弹出抽中的奖品。

一、案例效果截图

案例运行效果如图11-28所示。

图11-27 案例效果截图

二、案例运用到的知识点

核心知识点

Stack组件：堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
Canvas：画布组件，用于自定义绘制图形。
CanvasRenderingContext2D对象：使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
显式动画：提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
自定义弹窗：通过CustomDialogController类显示自定义弹窗。
获取屏幕的宽高：通过window.getLastWindow获取屏幕的宽高。

其他知识点

ArkTS 语言基础
V2版状态管理：@ComponentV2/@Local/@Prop
自定义组件和组件生命周期
内置组件：Image/Column/Text
日志管理类的编写
常量与资源分类的访问
MVVM模式

三、代码结构

├──entry/src/main/ets	            // 代码区
│  ├──common
│  │  ├──constants
│  │  │  ├──ColorConstants.ets      // 颜色常量类
│  │  │  ├──CommonConstants.ets     // 公共常量类 
│  │  │  └──StyleConstants.ets      // 样式常量类 
│  │  └──utils
│  │     ├──CheckEmptyUtils.ets     // 数据判空工具类
│  │     └──Logger.ets              // 日志打印类
│  ├──entryability
│  │  └──EntryAbility.ts            // 程序入口类
│  ├──pages
│  │  └──CanvasPage.ets             // 主界面	
│  ├──view
│  │  └──PrizeDialog.ets            // 中奖信息弹窗类
│  └──viewmodel
│     ├──DrawModel.ets              // 画布相关方法类
│     ├──FillArcData.ets            // 绘制圆弧数据实体类
│     └──PrizeData.ets              // 中奖信息实体类
└──entry/src/main/resources         // 资源文件目录

四、公共文件与资源

本案例涉及到的常量类和工具类代码如下：

通用常量类

entry/src/main/ets/common/utils/CommonConstants.ets

样式常量类

entry/src/main/ets/common/utils/StyleConstants.ets

颜色常量类

entry/src/main/ets/common/utils/ColorConstants.ets

用于检查数据是否为空的工具类

entry/src/main/ets/common/utils/CheckEmptyUtils.ets

日志类

entry/src/main/ets/common/utils/Logger.ets

本案例涉及到的资源文件如下：

string.json

entry/src/main/resources/base/element/string.json

float.json

entry/src/main/resources/base/element/float.json

color.json

entry/src/main/resources/base/element/color.json

其他资源请到源码中获取。

五、绘制主界面

实现主界面的页面构建，并通过Canvas绘制静态抽奖转盘。

页面构建

// main/ets/pages/Index.ets
import { window } from '@kit.ArkUI'
import Logger from '../common/utils/Logger'
import DrawModel from '../viewmodel/DrawModel'
import StyleConstants from '../common/constants/StyleConstants'
import CommonConstants from '../common/constants/CommonConstants'

let context = getContext(this)

@Entry
@ComponentV2
struct CanvasPage {
  private settings: RenderingContextSettings = 
    new RenderingContextSettings(true)
  private canvasContext: CanvasRenderingContext2D = 
    new CanvasRenderingContext2D(this.settings)

  @Local screenWidth: number = 0
  @Local screenHeight: number = 0
  @Local rotateDegree: number = 0
  @Local drawModel: DrawModel = new DrawModel()

  aboutToAppear() {
    window.getLastWindow(context)
      .then((windowClass: window.Window) => {
        windowClass.setWindowLayoutFullScreen(true)
        let windowProperties = windowClass.getWindowProperties()
        this.screenWidth = px2vp(windowProperties.windowRect.width)
        this.screenHeight = px2vp(windowProperties.windowRect.height)
      })
      .catch((error: Error) => {
        Logger.error('Error: ' + JSON.stringify(error))
      })
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Canvas(this.canvasContext)
        .width(StyleConstants.FULL_PERCENT)
        .height(StyleConstants.FULL_PERCENT)
        .onReady(() => {
          this.drawModel.draw(
            this.canvasContext, 
            this.screenWidth, this.screenHeight
          )
        })
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          angle: this.rotateDegree,
          centerX: this.screenWidth / CommonConstants.TWO,
          centerY: this.screenHeight / CommonConstants.TWO
        })

      Image($r('app.media.ic_center'))
        .width(StyleConstants.CENTER_IMAGE_WIDTH)
        .height(StyleConstants.CENTER_IMAGE_HEIGHT)
    }
    .width(StyleConstants.FULL_PERCENT)
    .height(StyleConstants.FULL_PERCENT)
    .backgroundImage($r('app.media.ic_background'), ImageRepeat.NoRepeat)
    .backgroundImageSize({
      width: StyleConstants.FULL_PERCENT,
      height: StyleConstants.BACKGROUND_IMAGE_SIZE
    })
  }
}

关键代码说明：

在绘制抽奖圆形转盘前，首先需要在CanvasPage.ets的aboutToAppear方法中获取屏幕的宽高。
在CanvasPage.ets布局界面中添加Canvas组件，在onReady方法中进行绘制。
在DrawModel.ets中，通过draw方法逐步进行自定义圆形抽奖转盘的绘制。

绘制类（ViewModel）

通过DrawModel类的draw方法实现绘制外部圆盘和内部扇形抽奖区域。

// main/ets/viewmodel/DrawModel.ets
import ColorConstants from '../common/constants/ColorConstants'
import CommonConstants from '../common/constants/CommonConstants'
import StyleConstants from '../common/constants/StyleConstants'
import CheckEmptyUtils from '../common/utils/CheckEmptyUtils'
import Logger from '../common/utils/Logger'
import FillArcData from '../model/FillArcData'

// 画抽奖圆形转盘
export default class DrawModel {
  private startAngle: number = 0
  private avgAngle: number = CommonConstants.CIRCLE / CommonConstants.COUNT
  private screenWidth: number = 0
  private canvasContext?: CanvasRenderingContext2D

  draw(
    canvasContext: CanvasRenderingContext2D,
    screenWidth: number,
    screenHeight: number
  ) {
    if (CheckEmptyUtils.isEmptyObj(canvasContext)) {
      Logger.error('[DrawModel][draw] canvasContext is empty.')
      return
    }
    this.canvasContext = canvasContext
    this.screenWidth = screenWidth
    this.canvasContext.clearRect(0, 0, this.screenWidth, screenHeight)
    // 将画布沿X和Y轴平移指定距离
    this.canvasContext.translate(this.screenWidth / CommonConstants.TWO,
      screenHeight / CommonConstants.TWO)
    // 涂绘的外盘花瓣
    this.drawFlower()
    // 画外圆盘和小圆
    this.drawOutCircle()
    // 绘制内圆盘
    this.drawInnerCircle()
    // 绘制内部扇形抽奖区域
    this.drawInnerArc()
    // 在内部扇形区域绘制文本
    this.drawArcText()
    // 在内部扇形区域绘制与奖品对应的图片
    this.drawImage()
    this.canvasContext.translate(-this.screenWidth / CommonConstants.TWO,
      -screenHeight / CommonConstants.TWO)
  }

  // 画弧线方法
  fillArc(fillArcData: FillArcData, fillColor: string) {
    if (CheckEmptyUtils.isEmptyObj(fillArcData) ||
    CheckEmptyUtils.isEmptyStr(fillColor)
    ) {
      Logger.error('[DrawModel][fillArc] fillArcData or fillColor is empty.')
      return
    }
    if (this.canvasContext !== undefined) {
      this.canvasContext.beginPath()
      this.canvasContext.fillStyle = fillColor
      this.canvasContext.arc(fillArcData.x, fillArcData.y, fillArcData.radius,
        fillArcData.startAngle, fillArcData.endAngle)
      this.canvasContext.fill()
    }
  }

  // 画外部圆盘的花瓣
  drawFlower() {
    let beginAngle = this.startAngle + this.avgAngle
    const pointY = this.screenWidth * CommonConstants.FLOWER_POINT_Y_RATIOS
    const radius = this.screenWidth * CommonConstants.FLOWER_RADIUS_RATIOS
    const innerRadius = this.screenWidth * CommonConstants.FLOWER_INNER_RATIOS
    for (let i = 0; i < CommonConstants.COUNT; i++) {
      this.canvasContext?.save()
      this.canvasContext?.rotate(
        beginAngle * Math.PI / CommonConstants.HALF_CIRCLE
      )
      this.fillArc(
        new FillArcData(0, -pointY, radius, 0, Math.PI * CommonConstants.TWO),
        ColorConstants.FLOWER_OUT_COLOR
      )

      this.fillArc(
        new FillArcData(
          0, -pointY, innerRadius, 0, Math.PI * CommonConstants.TWO
        ),
        ColorConstants.FLOWER_INNER_COLOR
      )
      beginAngle += this.avgAngle
      this.canvasContext?.restore()
    }
  }

  drawOutCircle() {
    // 绘制外盘
    this.fillArc(
      new FillArcData(0, 0,
        this.screenWidth * CommonConstants.OUT_CIRCLE_RATIOS, 0,
        Math.PI * CommonConstants.TWO
      ),
      ColorConstants.OUT_CIRCLE_COLOR
    )

    let beginAngle = this.startAngle
    // 绘制小圆圈
    for (let i = 0; i < CommonConstants.SMALL_CIRCLE_COUNT; i++) {
      this.canvasContext?.save()
      this.canvasContext?.rotate(
        beginAngle * Math.PI / CommonConstants.HALF_CIRCLE
      )
      this.fillArc(
        new FillArcData(
          this.screenWidth * CommonConstants.SMALL_CIRCLE_RATIOS, 0,
          CommonConstants.SMALL_CIRCLE_RADIUS, 0, Math.PI * CommonConstants.TWO
        ),
        ColorConstants.WHITE_COLOR
      )
      beginAngle = beginAngle
        + CommonConstants.CIRCLE / CommonConstants.SMALL_CIRCLE_COUNT
      this.canvasContext?.restore()
    }
  }

  // 绘制内盘
  drawInnerCircle() {
    this.fillArc(
      new FillArcData(0, 0,
        this.screenWidth * CommonConstants.INNER_CIRCLE_RATIOS, 0,
        Math.PI * CommonConstants.TWO
      ),
      ColorConstants.INNER_CIRCLE_COLOR
    )
    this.fillArc(
      new FillArcData(0, 0,
        this.screenWidth * CommonConstants.INNER_WHITE_CIRCLE_RATIOS, 0,
        Math.PI * CommonConstants.TWO
      ),
      ColorConstants.WHITE_COLOR
    )
  }

  // 绘制内部扇形抽奖区域
  drawInnerArc() {
    let colors = [
      ColorConstants.ARC_PINK_COLOR, ColorConstants.ARC_YELLOW_COLOR,
      ColorConstants.ARC_GREEN_COLOR, ColorConstants.ARC_PINK_COLOR,
      ColorConstants.ARC_YELLOW_COLOR, ColorConstants.ARC_GREEN_COLOR
    ]
    let radius = this.screenWidth * CommonConstants.INNER_ARC_RATIOS
    for (let i = 0; i < CommonConstants.COUNT; i++) {
      this.fillArc(
        new FillArcData(0, 0, radius,
          this.startAngle * Math.PI / CommonConstants.HALF_CIRCLE,
          (this.startAngle + this.avgAngle)
            * Math.PI / CommonConstants.HALF_CIRCLE
        ),
        colors[i]
      )
      this.canvasContext?.lineTo(0, 0)
      this.canvasContext?.fill()
      this.startAngle += this.avgAngle
    }
  }

  // 画内部扇形区域文字
  drawArcText() {
    if (this.canvasContext !== undefined) {
      this.canvasContext.textAlign = CommonConstants.TEXT_ALIGN
      this.canvasContext.textBaseline = CommonConstants.TEXT_BASE_LINE
      this.canvasContext.fillStyle = ColorConstants.TEXT_COLOR
      this.canvasContext.font =
        StyleConstants.ARC_TEXT_SIZE + CommonConstants.CANVAS_FONT
    }
    // 需要绘制的文本数组集合
    let textArrays = [
      $r('app.string.text_smile'),
      $r('app.string.text_hamburger'),
      $r('app.string.text_cake'),
      $r('app.string.text_smile'),
      $r('app.string.text_beer'),
      $r('app.string.text_watermelon')
    ]
    let arcTextStartAngle = CommonConstants.ARC_START_ANGLE
    let arcTextEndAngle = CommonConstants.ARC_END_ANGLE
    for (let i = 0; i < CommonConstants.COUNT; i++) {
      this.drawCircularText(this.getResourceString(
        textArrays[i]),
        (this.startAngle + arcTextStartAngle)
          * Math.PI / CommonConstants.HALF_CIRCLE,
        (this.startAngle + arcTextEndAngle)
          * Math.PI / CommonConstants.HALF_CIRCLE)
      this.startAngle += this.avgAngle
    }
  }

  getResourceString(resource: Resource): string {
    if (CheckEmptyUtils.isEmptyObj(resource)) {
      Logger.error('[getResourceString] resource is empty.')
      return ''
    }
    let resourceString: string = ''
    try {
      resourceString =
        getContext(this).resourceManager.getStringSync(resource.id)
    } catch (error) {
      Logger.error(`[getResourceString] error : ${JSON.stringify(error)}.`)
    }
    return resourceString
  }

  // 绘制圆弧文本
  drawCircularText(textString: string, startAngle: number, endAngle: number) {
    if (CheckEmptyUtils.isEmptyStr(textString)) {
      Logger.error('[drawCircularText] textString is empty.')
      return
    }

    class CircleText {
      x: number = 0
      y: number = 0
      radius: number = 0
    }

    let circleText: CircleText = {
      x: 0,
      y: 0,
      radius: this.screenWidth * CommonConstants.INNER_ARC_RATIOS
    }
    // 圆的半径
    let radius = circleText.radius - circleText.radius / CommonConstants.COUNT
    // 每个字母所占的弧度
    let angleDecrement = (startAngle - endAngle) / (textString.length - 1)
    let angle = startAngle
    let index = 0
    let character: string

    while (index < textString.length) {
      character = textString.charAt(index)
      this.canvasContext?.save()
      this.canvasContext?.beginPath()
      this.canvasContext?.translate(circleText.x + Math.cos(angle) * radius,
        circleText.y - Math.sin(angle) * radius)
      this.canvasContext?.rotate(Math.PI / CommonConstants.TWO - angle)
      this.canvasContext?.fillText(character, 0, 0)
      angle -= angleDecrement
      index++
      this.canvasContext?.restore()
    }
  }

  // 画内部扇形区域文字对应的图片
  drawImage() {
    let beginAngle = this.startAngle
    let imageSrc: string[] = [
      CommonConstants.WATERMELON_IMAGE_URL, CommonConstants.BEER_IMAGE_URL,
      CommonConstants.SMILE_IMAGE_URL, CommonConstants.CAKE_IMAGE_URL,
      CommonConstants.HAMBURG_IMAGE_URL, CommonConstants.SMILE_IMAGE_URL
    ]
    for (let i = 0; i < CommonConstants.COUNT; i++) {
      let image = new ImageBitmap(imageSrc[i])
      this.canvasContext?.save()
      this.canvasContext?.rotate(
        beginAngle * Math.PI / CommonConstants.HALF_CIRCLE
      )
      this.canvasContext?.drawImage(image,
        this.screenWidth * CommonConstants.IMAGE_DX_RATIOS,
        this.screenWidth * CommonConstants.IMAGE_DY_RATIOS,
        CommonConstants.IMAGE_SIZE,
        CommonConstants.IMAGE_SIZE
      )
      beginAngle += this.avgAngle
      this.canvasContext?.restore()
    }
  }
}

关键代码说明：

画外部圆盘的花瓣：通过调用rotate()方法，将画布旋转指定角度。再通过调用save()和restore()方法，使画布保存最新的绘制状态。根据想要绘制的花瓣个数，改变旋转角度，循环画出花瓣效果。
画外部圆盘、圆盘边上的小圈圈：在指定的X、Y（0, 0）坐标处，画一个半径为this.screenWidth * CommonConstants.OUT_CIRCLE_RATIOS的圆形。接下来通过一个for循环，且角度每次递增CommonConstants.CIRCLE / CommonConstants.SMALL_CIRCLE_COUNT，来绘制圆环上的小圈圈。
画内部圆盘、内部扇形抽奖区域：使用fillArc方法绘制内部圆盘。通过一个for循环，角度每次递增this.avgAngle。然后不断更改弧线的起始弧度this.startAngle * Math.PI / CommonConstants.HALF_CIRCLE和弧线的终止弧度(this.startAngle + this.avgAngle) * Math.PI / CommonConstants.HALF_CIRCLE。最后用fill()方法对路径进行填充。
画内部抽奖区域文字：用for循环，通过drawCircularText()方法绘制每组文字。drawCircularText()方法接收三个参数，分别是字符串，起始弧度和终止弧度。绘制文本前需要设置每个字母占的弧度angleDecrement，然后设置水平和垂直的偏移量。垂直偏移量circleText.y - Math.sin(angle) * radius就是朝着圆心移动的距离；水平偏移circleText.x + Math.cos(angle) * radius，是为了让文字在当前弧范围文字居中。最后使用fillText方法绘制文本。
画内部抽奖区域文字对应图片：使用drawImage方法绘制抽奖区域文字对应图片，该方法接收该方法接收五个参数，分别是图片资源、绘制区域左上角的X和Y轴坐标、绘制区域的宽度和高度。

数据模型类（Model）

通过FillArcData类定义圆盘的数据模型。

// main/ets/model/FillArcData.ets
export default class FillArcData {
  x: number
  y: number
  radius: number
  startAngle: number
  endAngle: number

  constructor(x: number, y: number, radius: number, startAngle: number, endAngle: number) {
    this.x = x
    this.y = y
    this.radius = radius
    this.startAngle = startAngle
    this.endAngle = endAngle
  }
}

六、点击“开始”抽奖

实现抽奖功能。

在主界面代码里给“开始”按钮绑定单击事件，实现旋转轮盘抽奖效果。

// main/ets/pages/Index.ets
// ...

@Entry
@ComponentV2
struct CanvasPage {
  // ...
  
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // ...

      Image($r('app.media.ic_center'))
        // ...
        .enabled(this.enableFlag)
        .onClick(() => {
          this.enableFlag = !this.enableFlag
          this.startAnimator()
        })
    }
    
    //...
  }

  startAnimator() {
    let randomAngle = Math.round(Math.random() * CommonConstants.CIRCLE)

    animateTo({
      duration: CommonConstants.DURATION,
      curve: Curve.Ease,
      delay: 0,
      iterations: 1,
      playMode: PlayMode.Normal,
      onFinish: () => {
        this.rotateDegree = CommonConstants.ANGLE - randomAngle
      }
    }, () => {
      this.rotateDegree = CommonConstants.CIRCLE * CommonConstants.FIVE +
      CommonConstants.ANGLE - randomAngle
    })
  }
}

关键代码说明：

给“开始”图片按钮添加单击事件，单击后使按钮不可点击，并启动抽奖动画。
应用animateTo定义显示过渡动效。

在绘制类里添加获取和现实获奖结果信息。

// main/ets/viewmodel/DrawModel.ets
//...
import PrizeData from '../model/PrizeData'
import { EnumeratedValue } from '../common/constants/CommonConstants'

// 画抽奖圆形转盘
export default class DrawModel {
  // ...
  private avgAngle: number = CommonConstants.CIRCLE / CommonConstants.COUNT
  //...

  //...
  
  showPrizeData(randomAngle: number): PrizeData {
    for (let i = 1; i <= CommonConstants.COUNT; i++) {
      if (randomAngle <= i * this.avgAngle) {
        return this.getPrizeData(i)
      }
    }
    return new PrizeData()
  }

  getPrizeData(scopeNum: number): PrizeData {
    let prizeData: PrizeData = new PrizeData()
    switch (scopeNum) {
      case EnumeratedValue.ONE:
        prizeData.message = $r('app.string.prize_text_watermelon')
        prizeData.imageSrc = CommonConstants.WATERMELON_IMAGE_URL
        break
      case EnumeratedValue.TWO:
        prizeData.message = $r('app.string.prize_text_beer')
        prizeData.imageSrc = CommonConstants.BEER_IMAGE_URL
        break
      case EnumeratedValue.THREE:
        prizeData.message = $r('app.string.prize_text_smile')
        prizeData.imageSrc = CommonConstants.SMILE_IMAGE_URL
        break
      case EnumeratedValue.FOUR:
        prizeData.message = $r('app.string.prize_text_cake')
        prizeData.imageSrc = CommonConstants.CAKE_IMAGE_URL
        break
      case EnumeratedValue.FIVE:
        prizeData.message = $r('app.string.prize_text_hamburger')
        prizeData.imageSrc = CommonConstants.HAMBURG_IMAGE_URL
        break
      case EnumeratedValue.SIX:
        prizeData.message = $r('app.string.prize_text_smile')
        prizeData.imageSrc = CommonConstants.SMILE_IMAGE_URL
        break
      default:
        break
    }
    return prizeData
  }
}

关键代码说明：

定义avgAngle变量，计算转盘每个奖品的平均角度。
showPrizeData方法，根据随机角度计算中奖结果，并返回对应的奖品数据。
getPrizeData方法，根据中奖编号获取对应的奖品信息。

定义获奖结果数据模型

// main/ets/model/PrizeData.ets
export default class PrizeData {
  message?: Resource
  imageSrc?: string
}

七、显示抽奖结果

通过自定义弹窗显示抽奖的结果。

在主界面页面中添加自定义弹窗，并在抽奖动画停止后打开弹窗。

// main/ets/pages/Index.ets
//...
import { ComponentContent } from '@kit.ArkUI'
import { PromptActionClass } from '../common/dialog/PromptActionClass'
import DialogData from '../model/DialogData'
import buildPrizeDialog from '../view/PrizeDialog'

@Entry
@ComponentV2
struct CanvasPage {
  //...
  
  @Local enableFlag: boolean = true
  @Local prizeData: PrizeData = new PrizeData()

  @Local enableFlag: boolean = true
  @Local prizeData: PrizeData = new PrizeData()

  private ctx: UIContext = this.getUIContext()
  private contentNode: ComponentContent<Object> =
    new ComponentContent(
      this.ctx,
      wrapBuilder(buildPrizeDialog),
      new DialogData(this.prizeData, () => {})
    )

  aboutToAppear() {
    //...

    PromptActionClass.setContext(this.ctx)
    PromptActionClass.setContentNode(this.contentNode)
    PromptActionClass.setOptions({ alignment: DialogAlignment.Center})
  }

  //...

  startAnimator() {
    //...
    
    // 获取奖品信息
    this.prizeData = this.drawModel.showPrizeData(randomAngle)

    animateTo({
      //...
      onFinish: () => {
        // ...
        
        // 显示奖品信息弹出窗口
        PromptActionClass.openDialog()
        // 更新弹窗数据
        this.contentNode.update(
          new DialogData(
            this.prizeData, 
            // 点击弹窗"确定"时，执行此函数，才可再次抽奖
            () => this.enableFlag = !this.enableFlag
          )
        )
      }
    }, () => {
      //...
    })
  }
}

关键代码说明：

this.contentNode.update更新弹出框中自定义组件的内容
由于不允许在@Builder装饰的函数内部修改参数值，本例采用传递函数作为参数的方式，从而实现在组件作用域里修改enableFlag的状态。

显示获奖结果弹窗的全局Builder

// main/ets/view/PrizeDialog.ets
import StyleConstants from '../common/constants/StyleConstants'
import CommonConstants from '../common/constants/CommonConstants'
import { PromptActionClass } from '../common/dialog/PromptActionClass'
import DialogData from '../model/DialogData'

@Builder
export default function buildPrizeDialog(params: DialogData) {
  Column() {
    Image(params.prizeData?.imageSrc !== undefined ? params.prizeData.imageSrc : '')
      .width($r('app.float.dialog_image_size'))
      .height($r('app.float.dialog_image_size'))
      .margin({
        top: $r('app.float.dialog_image_top'),
        bottom: $r('app.float.dialog_image_bottom')
      })
      .rotate({
        x: 0,
        y: 0,
        z: 1,
        angle: CommonConstants.TRANSFORM_ANGLE
      })

    Text(params.prizeData?.message)
      .fontSize($r('app.float.dialog_font_size'))
      .textAlign(TextAlign.Center)
      .margin({ bottom: $r('app.float.dialog_message_bottom') })

    Text($r('app.string.text_confirm'))
      .fontColor($r('app.color.text_font_color'))
      .fontWeight(StyleConstants.FONT_WEIGHT)
      .fontSize($r('app.float.dialog_font_size'))
      .textAlign(TextAlign.Center)
      .onClick(() => {
        PromptActionClass.closeDialog()
        params.changeEnableFlag()
      })
  }
  .backgroundColor($r('app.color.dialog_background'))
  .width(StyleConstants.NINETY_PERCENT)
  .borderRadius(StyleConstants.DIALOG_BORDER_RADIUS)
  .height($r('app.float.dialog_height'))
}

关键代码说明：

PromptActionClass.closeDialog()，关闭弹窗。
params.changeEnableFlag()，执行父组件传递过来的函数，激活“开始”按钮。

定义对话框数据模型

// main/ets/model/DialogData.ets
import PrizeData from "./PrizeData"

export default class DialogData {
  prizeData: PrizeData
  changeEnableFlag: () => void

  constructor(prizeData: PrizeData, changeEnableFlag: () => void) {
    this.prizeData = prizeData
    this.changeEnableFlag = changeEnableFlag
  }
}

不依赖UI组件的全局自定义弹出框公共类

// main/ets/common/dialog/PromptActionClass.ets
import { BusinessError } from '@kit.BasicServicesKit'
import { ComponentContent, promptAction } from '@kit.ArkUI'
import { UIContext } from '@ohos.arkui.UIContext'

export class PromptActionClass {
  static ctx: UIContext
  static contentNode: ComponentContent<Object>
  static options: promptAction.BaseDialogOptions

  static setContext(context: UIContext) {
    PromptActionClass.ctx = context
  }

  static setContentNode(node: ComponentContent<Object>) {
    PromptActionClass.contentNode = node
  }

  static setOptions(options: promptAction.BaseDialogOptions) {
    PromptActionClass.options = options
  }

  static openDialog() {
    if (PromptActionClass.contentNode !== null) {
      PromptActionClass.ctx.getPromptAction()
        .openCustomDialog(
          PromptActionClass.contentNode, PromptActionClass.options)
        .then(() => {
          console.info('OpenCustomDialog complete.')
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message
          let code = (error as BusinessError).code
          console.error(`error code：${code}, message is ${message}`)
        })
    }
  }

  static closeDialog() {
    if (PromptActionClass.contentNode !== null) {
      PromptActionClass.ctx.getPromptAction()
        .closeCustomDialog(PromptActionClass.contentNode)
        .then(() => {
          console.info('CloseCustomDialog complete.')
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message
          let code = (error as BusinessError).code
          console.error(`error code is ${code}, message is ${message}`)
        })
    }
  }

  static updateDialog(options: promptAction.BaseDialogOptions) {
    if (PromptActionClass.contentNode !== null) {
      PromptActionClass.ctx.getPromptAction()
        .updateCustomDialog(PromptActionClass.contentNode, options)
        .then(() => {
          console.info('UpdateCustomDialog complete.')
        })
        .catch((error: BusinessError) => {
          let message = (error as BusinessError).message
          let code = (error as BusinessError).code
          console.error(`error code is ${code}, message is ${message}`)
        })
    }
  }
}

代码说明：

此类为自定义弹框的公共类，复制代码直接使用即可。不依赖UI组件的全局自定义弹出框 (openCustomDialog)是推荐实现方法，不再推荐使用@CustomDialog装饰器。

八、视频和代码资源

资源请访问：《HarmonyOS应用开发实战指南（进阶篇）》

需要参加鸿蒙认证的请点击鸿蒙认证链接

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

React Native鸿蒙：Image模糊加载效果

本文深入解析在 React Native for OpenHarmony 平台上实现 Image 模糊加载效果的核心技术方案。通过真实项目验证，系统阐述 blurRadius 属性原理、第三方库适配策略及 OpenHarmony 特有优化技巧，提供 7 个可运行代码示例和 4 个性能优化方案。重点解决鸿蒙平台渲染差异导致的模糊失效问题，涵盖内存管理、跨平台兼容性及真机性能调优，助你打造丝滑的图片加