当前位置： 首页 > web >正文

基于Canvas实现抽奖转盘

web 2025/7/15 7:52:07

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

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

一、案例效果截图

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

图11-27 案例效果截图

二、案例运用到的知识点

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

四、公共文件与资源

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

  1. 通用常量类
  • entry/src/main/ets/common/utils/CommonConstants.ets
  1. 样式常量类
  • entry/src/main/ets/common/utils/StyleConstants.ets
  1. 颜色常量类
  • entry/src/main/ets/common/utils/ColorConstants.ets
  1. 用于检查数据是否为空的工具类
  • entry/src/main/ets/common/utils/CheckEmptyUtils.ets
  1. 日志类
  • entry/src/main/ets/common/utils/Logger.ets

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

  1. string.json
  • entry/src/main/resources/base/element/string.json
  1. float.json
  • entry/src/main/resources/base/element/float.json
  1. color.json
  • entry/src/main/resources/base/element/color.json

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

五、绘制主界面

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

  1. 页面构建
// 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方法逐步进行自定义圆形抽奖转盘的绘制。
  1. 绘制类（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 = 0private avgAngle: number = CommonConstants.CIRCLE / CommonConstants.COUNTprivate screenWidth: number = 0private canvasContext?: CanvasRenderingContext2Ddraw(canvasContext: CanvasRenderingContext2D,screenWidth: number,screenHeight: number) {if (CheckEmptyUtils.isEmptyObj(canvasContext)) {Logger.error('[DrawModel][draw] canvasContext is empty.')return}this.canvasContext = canvasContextthis.screenWidth = screenWidththis.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 = fillColorthis.canvasContext.arc(fillArcData.x, fillArcData.y, fillArcData.radius,fillArcData.startAngle, fillArcData.endAngle)this.canvasContext.fill()}}// 画外部圆盘的花瓣drawFlower() {let beginAngle = this.startAngle + this.avgAngleconst pointY = this.screenWidth * CommonConstants.FLOWER_POINT_Y_RATIOSconst radius = this.screenWidth * CommonConstants.FLOWER_RADIUS_RATIOSconst innerRadius = this.screenWidth * CommonConstants.FLOWER_INNER_RATIOSfor (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.avgAnglethis.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_COUNTthis.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_RATIOSfor (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_ALIGNthis.canvasContext.textBaseline = CommonConstants.TEXT_BASE_LINEthis.canvasContext.fillStyle = ColorConstants.TEXT_COLORthis.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_ANGLElet arcTextEndAngle = CommonConstants.ARC_END_ANGLEfor (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 = 0y: number = 0radius: 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 = startAnglelet index = 0let character: stringwhile (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 -= angleDecrementindex++this.canvasContext?.restore()}}// 画内部扇形区域文字对应的图片drawImage() {let beginAngle = this.startAnglelet 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.avgAnglethis.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轴坐标、绘制区域的宽度和高度。
  1. 数据模型类（Model）

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

// main/ets/model/FillArcData.ets
export default class FillArcData {x: numbery: numberradius: numberstartAngle: numberendAngle: numberconstructor(x: number, y: number, radius: number, startAngle: number, endAngle: number) {this.x = xthis.y = ythis.radius = radiusthis.startAngle = startAnglethis.endAngle = endAngle}
}

六、点击“开始”抽奖

实现抽奖功能。

  1. 在主界面代码里给“开始”按钮绑定单击事件，实现旋转轮盘抽奖效果。
// 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.enableFlagthis.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定义显示过渡动效。
  1. 在绘制类里添加获取和现实获奖结果信息。
// 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_URLbreakcase EnumeratedValue.TWO:prizeData.message = $r('app.string.prize_text_beer')prizeData.imageSrc = CommonConstants.BEER_IMAGE_URLbreakcase EnumeratedValue.THREE:prizeData.message = $r('app.string.prize_text_smile')prizeData.imageSrc = CommonConstants.SMILE_IMAGE_URLbreakcase EnumeratedValue.FOUR:prizeData.message = $r('app.string.prize_text_cake')prizeData.imageSrc = CommonConstants.CAKE_IMAGE_URLbreakcase EnumeratedValue.FIVE:prizeData.message = $r('app.string.prize_text_hamburger')prizeData.imageSrc = CommonConstants.HAMBURG_IMAGE_URLbreakcase EnumeratedValue.SIX:prizeData.message = $r('app.string.prize_text_smile')prizeData.imageSrc = CommonConstants.SMILE_IMAGE_URLbreakdefault:break}return prizeData}
}

关键代码说明：

  • 定义avgAngle变量，计算转盘每个奖品的平均角度。
  • showPrizeData方法，根据随机角度计算中奖结果，并返回对应的奖品数据。
  • getPrizeData方法，根据中奖编号获取对应的奖品信息。
  1. 定义获奖结果数据模型
// main/ets/model/PrizeData.ets
export default class PrizeData {message?: ResourceimageSrc?: string
}

七、显示抽奖结果

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

  1. 在主界面页面中添加自定义弹窗，并在抽奖动画停止后打开弹窗。
// 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的状态。
  1. 显示获奖结果弹窗的全局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()，执行父组件传递过来的函数，激活“开始”按钮。
  1. 定义对话框数据模型
// main/ets/model/DialogData.ets
import PrizeData from "./PrizeData"export default class DialogData {prizeData: PrizeDatachangeEnableFlag: () => voidconstructor(prizeData: PrizeData, changeEnableFlag: () => void) {this.prizeData = prizeDatathis.changeEnableFlag = changeEnableFlag}
}
  1. 不依赖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: UIContextstatic contentNode: ComponentContent<Object>static options: promptAction.BaseDialogOptionsstatic 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).messagelet code = (error as BusinessError).codeconsole.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).messagelet code = (error as BusinessError).codeconsole.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).messagelet code = (error as BusinessError).codeconsole.error(`error code is ${code}, message is ${message}`)})}}
}

代码说明：

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

八、视频和代码资源

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

http://www.xdnf.cn/news/10436.html

相关文章：

  • 打打基础 | 从翻转链表到寄存器、汇编与内存
  • 智慧新基建数字孪生，绘就桥梁运维新画卷
  • 【STM32F407 PWM配置和应用指南 】
  • [yolov11改进系列]基于yolov11引入上下文锚点注意力CAA的python源码+训练源码
  • Spring Boot中的事件与JMS消息集成
  • Windows搭建Swift语言编译环境?如何构建ObjC语言编译环境?Swift如何引入ObjC框架?Interface Builder的历史?
  • 【论文复现】水下单光子激光雷达设计 Sequential Multimodal Underwater Single
  • PySide6 GUI 学习笔记——常用类及控件使用方法（地址类QUrl）
  • Vert.x学习笔记-EventLoop与Context的关系
  • 图像处理篇---face_recognition库实现人脸检测
  • Linux系统之gettext详解
  • Excel to JSON 插件 2.4.0 版本更新
  • 【java面试】redis篇
  • 【Linux系统】第八节—进程概念（上）—冯诺依曼体系结构+操作系统+进程及进程状态+僵尸进程—详解！
  • 【请关注】ELK集群部署真实案例分享
  • JS中的函数防抖和节流：提升性能的关键技术
  • 设计模式——模版方法设计模式（行为型）
  • 定时任务：springboot集成xxl-job-core（二）
  • Python-Selenium报错截图
  • Go 即时通讯系统：客户端与服务端 WebSocket 通信交互
  • 【HTML-15.3】HTML表单隐藏域深度解析：从基础使用到高级实践
  • Java补充(Java8新特性)(和IO都很重要)
  • LeRobot ACT——LeRobot对ALOHA ACT策略的封装：含源码解析与真机部署(效果比肩ACT原论文)
  • 【量化交易学习】布林线（BOLL）指标
  • uni-app学习笔记二十一--pages.json中tabBar设置底部菜单项和图标
  • NodeJS全栈开发面试题讲解——P6安全与鉴权
  • Java求职者面试指南：DevOps技术栈深度解析
  • [AI算法] 什么事RoPE scaling
  • 精英-探索双群协同优化（Elite-Exploration Dual Swarm Cooperative Optimization, EEDSCO）
  • 26考研——文件管理_文件系统（4）