HarmonyOS 如何在一个class里面promptAction.openCustomDialog 一个自定义弹窗，并动态刷新弹窗里的数据

如何在一个class里面promptAction.openCustomDialog 一个自定义弹窗，并动态刷新弹窗里的数据

比如弹窗的标题是一个倒计时的时间，每秒变化等

import { LifecycleBridgeHandler, ResponseModel } from "@sinochemit/web_bridge";
import promptAction from '@ohos.promptAction'

interface Param {
  open: string | boolean;
  duration: number | string;
  style:number | string
}


export struct  PopViewManager{

  @Builder customDialogComponent(customDialogComponentId:number) {

    Column() {
      Text('弹窗').fontSize(30)
      Row({ space: 50 }) {
        Button("确认").onClick(() => {
          promptAction.closeCustomDialog(globalThis.customDialogComponentId)
        })
        Button("取消").onClick(() => {
          promptAction.closeCustomDialog(globalThis.customDialogComponentId)
        })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }
  build() {
  }
}

export class OpenRecordVoiceBridgeHandler extends LifecycleBridgeHandler {
  static readonly HANDLER_NAME = "openRecordVoice";

  public customDialogComponentId: number = 0

  jsCallNative(data: string, callback: Function): void {

    const param: Param = JSON.parse(data);
    if (!param) {
      callback(ResponseModel.fail("参数错误"));
      return;
    }
    let duration = 60;
    let style = 0;
    let play = param.open
    duration = Number(param.duration)
    style = Number(param.style)
    if (play === "false" || play === false){

    }

    promptAction.openCustomDialog({
      builder: () => {
        new PopViewManager().customDialogComponent(this.customDialogComponentId)
      },
      onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
        console.info("reason" + JSON.stringify(dismissDialogAction.reason))
        console.log("dialog onWillDismiss")
        if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
          dismissDialogAction.dismiss()
        }
        if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
          dismissDialogAction.dismiss()
        }
      }
    }).then((dialogId: number) => {
      globalThis.customDialogComponentId = dialogId
      this.customDialogComponentId = dialogId
    })

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

HarmonyOS

zxjiu

2024-12-24 15:33:23

浏览

回答 1

按赞同

按时间

fox280

动态刷新的弹窗只有这个uicontext的opencustomdialog支持

参考链接：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12

参考代码如下

import { UIContext } from '@ohos.arkui.UIContext';
import { getMyUiContext } from '../entryability/EntryAbility';
import { myTestClass } from './test';
import { ComponentContent } from "@ohos.arkui.node"
import promptAction from '@ohos.promptAction'
import { BusinessError } from '@ohos.base';
let customDialogId: number = 0

@Builder
function customDialogBuilder() {
  Column() {
    Text('Custom dialog Message').fontSize(10)
    Row() {
      Button("确认").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
      Blank().width(50)
      Button("取消").onClick(() => {
        promptAction.closeCustomDialog(customDialogId)
      })
    }
    TextInput()
  }.height(200).padding(5).backgroundColor(Color.Yellow)
}

@Builder
function customDialogBuilderE() {
}

// @Builder
// function customDialogBuilder2() {
// Column(){
// Text('jhsabdchdabsch ').fontSize(40)
// }.backgroundColor(Color.Green)
// }

class Params {
  text: string = ""
  okCallback: () => void
  constructor(text: string, okCallback: () => void) {
    this.text = text;
    this.okCallback = okCallback
  }
}

@Builder
function buildText(params: Params) {
  Column() {
    Button('sdcbjadsbc').margin(10)
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .width(300)
      .height(200)
      .borderRadius(30)
      .onClick(()=> {
        params.okCallback()
        console.info('tag------buildText click!!!!');
      })
    // TextInput().width(200)
  }.backgroundColor(Color.Yellow)
  .onClick(()=> {
    promptAction.showToast({
      message: "sjkfnjhv bhjfd"
    })
  })
  // .offset({x:0,y:16})
  .rotate({
    x: 0,
    y: 0,
    z: 1,
    centerX: '50%',
    centerY: '50%',
    angle: 300
  })
}

// @Builder
// function buildText() {
// Row() {
// Text('params.text')
// .fontSize(50)
// .fontWeight(FontWeight.Bold)
// .width(300)
// .height(300)
// .backgroundColor(Color.Grey)
// .borderRadius(30)
// .onClick(()=> {
// console.info('tag------buildText click!!!!');
// })
// }.rotate({
// x: 0,
// y: 0,
// z: 1,
// centerX: '50%',
// centerY: '50%',
// angle: 300
// })
// }

function clickAction(testCallback: () => void, message: string, newTestCallback: () => void) {
  let ctx: UIContext | null = getMyUiContext()
  let contentNode = new ComponentContent(ctx as UIContext, wrapBuilder(buildText), new Params(message, testCallback))
  let ttt: myTestClass = new myTestClass(ctx as UIContext, new Params(message, testCallback))
  if (ctx != null) {
    ttt.setBuilderNode(contentNode);
    ttt.setOptions({
      alignment: DialogAlignment.TopStart,
      // maskRect: { x: 50, y: 200, width: '100%', height: '50%' },
      // maskColor:'rgba(255, 10, 255, 0.5)',
      autoCancel:false,
      // isModel:false,
      // showInSubWindow: true,
      offset:{dx:0, dy:50},
      onWillDismiss: (dismissDialog: DismissDialogAction) => {
        console.info("tag-----reason=" + JSON.stringify(dismissDialog.reason))
        console.info("tag-----dialog onWillDismiss")
        if (dismissDialog.reason == DismissReason.PRESS_BACK) {
          dismissDialog.dismiss()
        }
        if (dismissDialog.reason == DismissReason.TOUCH_OUTSIDE) {
          dismissDialog.dismiss()
        }
      },
      onDidAppear: () => {
        console.info("tag----customDialog:onDidAppear()")
      },
      onDidDisappear: () => {
        console.info("tag----customDialog:onDidDisappear()")
      },
      onWillAppear: () => {
        console.info("tag----customDialog:onWillAppear()")
      },
      onWillDisappear: () => {
        console.info("tag----customDialog:onWillDisappear()")
      },
      transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY
        .animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})),
        TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
          .combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth})))
    });
    ttt.openTestDialog();

    // if (contentNode != null) {
    // // ttt.closeTestDialog(new ComponentContent(ctx as UIContext, wrapBuilder(buildText), new Params('dhjsch', testCallback)))
    // ttt.closeTestDialog(contentNode)
    // }

    // ttt.openTestDialog();
    setTimeout(() => {
      // ttt.openTestDialog()
      // if (contentNode != null) {
      // // ttt.closeTestDialog(new ComponentContent(ctx as UIContext, wrapBuilder(buildText), new Params('dhjsch', testCallback)))
      // ttt.closeTestDialog(contentNode)
      // }
      if (contentNode != null) {
        ttt.updateTestDialog(new Params('NEW NEW NEW NEW', newTestCallback));
      }
      // if (contentNode != null) {
      // // ttt.updateDialogOptions(new ComponentContent(ctx as UIContext, wrapBuilder(buildText), new Params('dhjsch', testCallback)), {alignment: DialogAlignment.BottomEnd, showInSubwindow: false})
      // ttt.updateDialogOptions(contentNode, {}) //默认值
      // }
    }, 2500)
  }
}

@Entry
@Component
struct Index {
  @State message: string = "hello"
  testCallback() {
    console.info('tag-------testCallback!!!')
  }
  newTestCallback() {
    console.info("tag-----dialog newTestCallback!!!!!!");
  }

  build() {
    Row() {
      Column() {
        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .onClick(() => {
              clickAction(this.testCallback, this.message, this.newTestCallback)
            })
        }
        .width('100%')

        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .onClick(() => {
              promptAction.openCustomDialog({
                builder: customDialogBuilder.bind(this),
                // alignment: DialogAlignment.Default,
                // maskRect: { x: 50, y: 200, width: '100%', height: '50%' },
                showInSubWindow:true,
                // isModal:false,
                // borderWidth: 10,
                // borderColor: Color.Red,
                // borderStyle: BorderStyle.Dotted,
                // maskColor:Color.Green,
                // onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
                // console.info("reason" + JSON.stringify(dismissDialogAction.reason))
                // console.log("dialog onWillDismiss")
                // if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
                // dismissDialogAction.dismiss()
                // }
                // if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
                // dismissDialogAction.dismiss()
                // }
                // }
              }).then((dialogId: number) => {
                customDialogId = dialogId
              }).catch((error: BusinessError) => {
                let message = (error as BusinessError).message
                let code = (error as BusinessError).code
                console.error(`tag------promptAction.openCustomDialog args error code is ${code}, message is ${message}`);
              })
            })
        }
        .width('100%')


        Button('AlertDialog Set Duration')
          .onClick(()=>{
            AlertDialog.show(
              {
                title: 'AlertDialog 1',
                message: 'Set Animation Duration open 3 second, close 100ms',
                autoCancel: true,
                alignment: DialogAlignment.Top,
                offset: { dx: 0, dy: -20 },
                gridCount: 3,
                transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY
                  .animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})),
                  TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
                    .combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth}))),
                confirm: {
                  value: 'button',
                  action: () => {
                    console.info('Button-clicking callback')
                  }
                },
                cancel: () => {
                  console.info('Closed callbacks')
                }
              }
            )
          })


        TextInput().width(400).margin({top:300})
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}



// // xxx.ets
// @Entry
// @Component
// struct CalendarPickerExample {
// private selectedDate: Date = new Date()
// build() {
// Column() {
// Text('月历日期选择器').fontSize(30)
// Column() {
// CalendarPicker({ hintRadius: 10, selected: this.selectedDate })
// .edgeAlign(CalendarAlign.END)
// .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })
// .margin(10).offset({x:80,y:80})
// .onChange((value) => {
// console.info("CalendarPicker onChange:" + JSON.stringify(value))
// })
//
//
// CalendarPicker({ hintRadius: 10, selected: this.selectedDate }).scale({ x: 3, y: 2 })
// .edgeAlign(CalendarAlign.END)
// .textStyle({ color: "#ff182431", font: { size: 20, weight: FontWeight.Normal } })
// .margin(100)
//
//
// TextInput().width(200).height(100)
// // .scale({ x: 3, y: 2 })
// }.width("100%")
// }.width('100%')
// }
// }


import { UIContext } from '@ohos.arkui.UIContext';
import { ComponentContent } from "@ohos.arkui.node";
import { BusinessError } from '@ohos.base';

export class myTestClass {
  ctx: UIContext;
  myNode: ComponentContent<Object>;
  params: Object
  options: Object
  constructor(context: UIContext, obj?: Object) {
    this.ctx = context;
    this.params = obj
  }
  setCtx(context) {
    this.ctx = context;
  }
  getCtx() {
    return this.ctx;
  }
  setBuilderNode(node: ComponentContent<Object>) {
    this.myNode = node;
  }
  setOptions(opts: Object) {
    this.options = opts
  }
  openTestDialog() {
    console.error("lyly111----"+this.ctx);
    if (this.myNode != null) {
      // try {
      // // console.error("lyly111----", Object.keys(this.ctx));
      // console.error("lyly111----", Object.keys(this.ctx || {a: 1}));
      // } finally {
      //
      // }
      // if (this.ctx == null || this.ctx == undefined) {
      // console.error("lyly------ctx null");
      // } else {
      // if (this.ctx.getPromptAction() == null || this.ctx.getPromptAction() == undefined) {
      // console.error("lyly------getPromptAction null");
      // }
      // }
      // this.ctx.getPromptAction().showToast({message:'sdahcdshafcbhjsah'})
      this.ctx.getPromptAction().openCustomDialog(this.myNode, this.options)
        .then(()=> {
          console.info('tag------openCustomDialog complete!!!');
        }).catch((error: BusinessError) => {
        let message = (error as BusinessError).message
        let code = (error as BusinessError).code
        console.error(`tag------openCustomDialog args error code is ${code}, message is ${message}`);
      })
    }
  }
  updateTestDialog(params:Object) {
    this.myNode.update(params)
  }
  updateDialogOptions(node: ComponentContent<Object>, opts: Object) {
    if (node != null) {
      this.ctx.getPromptAction().updateCustomDialog(node, opts)
        .then(()=> {
          console.info('tag------updateCustomDialog complete!!!');
        }).catch((error: BusinessError) => {
        let message = (error as BusinessError).message
        let code = (error as BusinessError).code
        console.error(`tag------updateCustomDialog args error code is ${code}, message is ${message}`);
      })
    }
  }
  closeTestDialog(node: ComponentContent<Object>) {
    if (node != null) {
      this.ctx.getPromptAction().closeCustomDialog(node)
        .then(()=> {
          console.info('tag------closeCustomDialog complete!!!');
        }).catch((error: BusinessError) => {
        let message = (error as BusinessError).message
        let code = (error as BusinessError).code
        console.error(`tag------closeCustomDialog args error code is ${code}, message is ${message}`);
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.

2024-12-24 18:04:35

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 如何在一个class里面promptAction.openCustomDialog 一个自定义弹窗，并动态刷新弹窗里的数据

订阅鸿蒙技术特刊，精选内容抢先看