基于Canvas实现抽奖转盘

article/2025/7/28 4:12:29

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

  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.hkcw.cn/article/bnRqcOukMb.shtml

相关文章

【 SpringCloud | 微服务 网关 】

【 SpringCloud | 微服务 网关 】

单体架构时我们只需要完成一次用户登录、身份校验&#xff0c;就可以在所有业务中获取到用户信息。而微服务拆分后&#xff0c;每个微服务都独立部署&#xff0c;这就存在一些问题&#xff1a; 每个微服务都需要编写登录校验、用户信息获取的功能吗&#xff1f; 当微服务之间调…
阅读更多...
Vue2之3v-model在组件中的应用以及sync修饰符

Vue2之3v-model在组件中的应用以及sync修饰符

文章目录 v-model的原理带value属性组件间传值的普通写法解析演示 根据v-model的原理 简写带有value属性组件之间的传值解析演示 使用sync修饰符&#xff0c;自定义属性名进行组件传值解析案例 v-model的原理 v-model 原理 原理&#xff1a;v-model本质上是一个语法糖。例如应…
阅读更多...
从0开始学vue：Element Plus详解

从0开始学vue：Element Plus详解

一、核心架构解析二、技术实现指南三、高级特性实现四、性能优化方案五、生态扩展方案六、调试与测试七、版本演进路线 Element Plus 是专为 Vue 3 设计的桌面端 UI 组件库&#xff0c;基于 Vue 3 的 Composition API 重构&#xff0c;在保持与 Element UI 兼容性的同时&#x…
阅读更多...
Qt6使用opengl

Qt6使用opengl

1.使用qmloscilloscope工程 2.main函数里 bool openGLSupported QQuickWindow::graphicsApi() QSGRendererInterface::OpenGLRhi;if (!openGLSupported) { qWarning() << "OpenGL is not set as the graphics backend, so AbstractSeries.useOpenGL will not work…
阅读更多...
生物化学笔记：神经生物学概论【脑客中国·科研】第186位讲者 | 何超：大脑的觉醒与睡眠

生物化学笔记：神经生物学概论【脑客中国·科研】第186位讲者 | 何超：大脑的觉醒与睡眠

【脑客中国科研】第186位讲者 | 何超&#xff1a;大脑的觉醒与睡眠
阅读更多...
【模拟电子电路-工具使用】

【模拟电子电路-工具使用】

模拟电子电路-工具使用 ■ 1. 模拟软件■ 1. circuit JS ■ 2. 万用表■ 3. 示波器■ 4.■ 5.■ 6.■ 7. ■ 1. 模拟软件 ■ 1. circuit JS ■ 2. 万用表 ■ 3. 示波器 ■ 4. ■ 5. ■ 6. ■ 7.
阅读更多...
高速串行接口

高速串行接口

1.网口设计方案 上图中给出了两种网口设计方案&#xff0c;最上面是传统设计方式&#xff0c;下面是利用GT作为PHY层的设计&#xff0c;然后FPGA中设计协议层和MAC层。 2.SRIO SRIO的本地操作和远程操作 3.其他高速接口 srio rapid io aurora8b10b aurora64b66b pcie s…
阅读更多...
JVM学习(六)--垃圾回收

JVM学习(六)--垃圾回收

目录 一、垃圾回收 1、概述 1.1、什么是垃圾&#xff08;Garbage)&#xff09;&#xff1f; 1.2、为什么需要GC? 1.3、Java中垃圾回收的重点区域是? 1.4、早期的GC 2、垃圾回收算法 2.1、垃圾判别阶段算法 1、引用计数算法 2、可达性分析算法(或根搜索算法、追踪性…
阅读更多...
pikachu通关教程-CSRF

pikachu通关教程-CSRF

CSRF(get) 用bp进行抓包 选择action value值的修改 点击test in browser copy然后放在bp代理的浏览器上&#xff0c;会出现一个提交按钮&#xff0c;这时候点击之后信息就被修改了。 CSRF(post) 请求的方式不同&#xff0c;其他都是一样 CSRF Token 存在cookie 首先要先下载一…
阅读更多...
2024年数维杯国际大学生数学建模挑战赛A题飞行器激光测速中的频率估计问题解题全过程论文及程序

2024年数维杯国际大学生数学建模挑战赛A题飞行器激光测速中的频率估计问题解题全过程论文及程序

2024年数维杯国际大学生数学建模挑战赛 A题 复合直升机的建模与优化控制问题 原题再现&#xff1a; &#xff08;一&#xff09; 问题的背景   空速&#xff0c;即飞机相对于空气的速度&#xff0c;是飞行期间需要监控的关键参数。空速与飞行状态密切相关&#xff0c;如迎角…
阅读更多...
【Hot 100】763. 划分字母区间

【Hot 100】763. 划分字母区间

目录 引言划分字母区间我的解题一、记录每个字母的最远出现位置二、扫描字符串并进行贪心划分 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题&#xff1a;【Hot 100】763. 划分字母区间❣️ 寄语&#xff1a;书到用时…
阅读更多...
【Unity博客节选】Playable Graph Monitor 安装使用

【Unity博客节选】Playable Graph Monitor 安装使用

注&#xff1a;软件版本Unity 6.0 Timeline 1.8.7 作者&#xff1a;CSDN RingleaderWang 原文&#xff1a;《Unity第25期——Timeline结构及其源码浅析》 文章首发Github&#x1f44d;&#xff1a;《Timeline结构及其源码浅析》 Bilibili 视频版&#x1f44d;&#x1f44d;&a…
阅读更多...
＜5＞, Qt系统相关

＜5＞, Qt系统相关

目录 一、Qt 事件 1&#xff0c;事件的定义 2&#xff0c;事件的处理 3&#xff0c;鼠标事件 4&#xff0c;按键事件 5&#xff0c;定时器 6&#xff0c;事件分发器 7&#xff0c;事件过滤器 二、Qt 文件 1&#xff0c;输入输出类 2&#xff0c;文件读写类 3&#x…
阅读更多...
PCB设计教程【强化篇】——USB拓展坞DRC导出生产文件

PCB设计教程【强化篇】——USB拓展坞DRC导出生产文件

前言 本教程基于B站Expert电子实验室的PCB设计教学的整理&#xff0c;为个人学习记录&#xff0c;旨在帮助PCB设计新手入门。所有内容仅作学习交流使用&#xff0c;无任何商业目的。若涉及侵权&#xff0c;请随时联系&#xff0c;将会立即处理 目录 前言 丝印调整 DRC 检查…
阅读更多...
第十一讲 | 多态

第十一讲 | 多态

多态 一、多态的概念二、多态的定义及实现1、动态多态的构成条件&#xff08;1&#xff09;、实现多态还有两个必须重要条件&#xff08;2&#xff09;、虚函数&#xff08;3&#xff09;、虚函数的重写/覆盖&#xff08;4&#xff09;、多态场景的一个选择题&#xff08;5&…
阅读更多...
火语言UI组件--文件对话框

火语言UI组件--文件对话框

【组件功能】&#xff1a;选择单个或多个文件的对话框。 样式预览 设置 基础设置 属性名称属性释义输入值类型标题(title)对话框的标题字符串类型默认路径(defaultPath)对话框的默认展示路径字符串类型多选(multiSelections)是否允许多选布尔型(true / false)显示隐藏文件(s…
阅读更多...
rl_sar功能包详解

rl_sar功能包详解

文章目录 1. 功能包概述2. 目录结构详解2.1 核心目录结构2.2 各目录功能src/ 目录 - C源代码实现scripts/ 目录 - Python脚本实现include/ 目录 - C头文件library/ 目录 - 核心库和第三方依赖models/ 目录 - 预训练模型库launch/ 目录 - ROS启动文件worlds/ 目录 - Gazebo仿真世…
阅读更多...
InternVL2.5-多模态大模型评估专业图片

InternVL2.5-多模态大模型评估专业图片

具备图像理解功能的大模型InternVL2.5&#xff0c;能有效解析大部分图片。 对于专业图片如医学细胞切片&#xff0c;从专业角度解析&#xff0c;能推动模型应用到更广泛的领域。 InternVL2.5解析示例 prompt(胸部癌变细胞图片,来自PanNuke) 请评估这个组织的风险 InternVL2.…
阅读更多...
解决 IDEA 在运行时中文乱码问题

解决 IDEA 在运行时中文乱码问题

直接说解决办法 编译 IDEA 所在目录的启动的 .vmoptions 文件&#xff0c;添加以下JVM 参数即可 -Dfile.encodingUTF-8如下图所示&#xff0c;Help > Edit Custom VM Options&#xff0c;随后在编辑框中添加-Dfile.encodingUTF-8 的 JVM 参数
阅读更多...
【Linux】进程的生命之旅——诞生、消逝与守候（fork/exit/wait）

【Linux】进程的生命之旅——诞生、消逝与守候（fork/exit/wait）

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 一念既出&#xff0c;万山无阻 目录 &#x1f4d6;一、进程创建 1.fork函数 &#x1f4da;高层封装特性 &#x1f4da;fork返回值 2.写时拷…
阅读更多...
推荐文章

Copyright @ 2022~2023