HarmonyOS 非ui界面拉起自定义弹窗的demo

//index 
import { ComponentContent } from "@ohos.ArkUI.node"; 
import { myFunc, Params } from './CustomDialogController' 
import { PromptAction, router } from '@kit.ArkUI'; 
 
let PromptActionGlobal: PromptAction | undefined = undefined; 
let ContentNodeGlobal: ComponentContent<Params> | undefined = undefined; 
 
const params: boolean = router.getParams() as boolean; 
 
@Builder 
function buildText(params: Params) { 
 
  Column() { 
    test() 
  }.backgroundColor('#FFF0F0F0') 
} 
@Component 
struct test{ 
  controller: RichEditorController = new RichEditorController() 
 
  build() { 
    Column() { 
      RichEditor({ controller: this.controller }) 
        // 绑定自定义键盘 
        // .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) 
        .height(200) 
        .id('ni') 
        .borderWidth(1) 
        .borderColor(Color.Red) 
        .width("100%") 
        .onAppear(()=>{ 
          focusControl.requestFocus('ni') 
        }) 
        .onFocus(()=>{ 
          console.log('聚焦') 
        }) 
        .onBlur(()=>{ 
          console.log('失去聚焦') 
        }) 
    } 
  } 
 
} 
@Entry 
@Component 
struct CustomDialogDemo { 
  @State message: string = "hello" 
  uiContext = this.getUIContext(); 
  isUpdata: boolean = false; 
 
  aboutToAppear() { 
    PromptActionGlobal = this.uiContext.getPromptAction(); 
    ContentNodeGlobal = new ComponentContent(this.uiContext, wrapBuilder(buildText), new Params(this.message)); 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Button("click me") 
          .onClick(() => { 
            if (ContentNodeGlobal) { 
              myFunc(ContentNodeGlobal, this.uiContext); 
            } 
          }) 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .height('100%') 
  } 
} 
//dialogController 
import { BusinessError } from '@ohos.base'; 
import { ComponentContent } from "@ohos.ArkUI.node"; 
import { UIContext } from '@kit.ArkUI'; 
 
export class Params { 
  text: string = "" 
  constructor(text: string) { 
    this.text = text; 
  } 
} 
 
declare enum DialogAlignment { 
  Top, 
  Center, 
  Bottom, 
  Default, 
  TopStart, 
  TopEnd, 
  CenterStart, 
  CenterEnd, 
  BottomStart, 
  BottomEnd 
} 
 
declare enum DismissReason { 
  PRESS_BACK = 0, 
  TOUCH_OUTSIDE = 1, 
  CLOSE_BUTTON = 2 
} 
 
export function myFunc(contentNode: ComponentContent<Params>, uiContext: UIContext) { 
  let promptAction = uiContext.getPromptAction(); 
  try { 
    promptAction.openCustomDialog(contentNode, { 
      alignment: DialogAlignment.Center, 
      showInSubWindow: true, // 作为子窗口弹出，而不是toast的形式 
      onWillDismiss: (dismissDialogAction: DismissDialogAction) => { 
        console.info("reason" + JSON.stringify(dismissDialogAction.reason)) 
        console.log("MWB ", "dialog onWillDismiss") 
        if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 
          dismissDialogAction.dismiss() 
        } 
        if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 
          dismissDialogAction.dismiss() 
        } 
      } 
    }); 
    console.log('MWB', 'Start to openCustomDialog') 
  } catch (error) { 
    let message = (error as BusinessError).message; 
    let code = (error as BusinessError).code; 
    console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`); 
  }; 
} 
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 
import { hilog } from '@kit.PerformanceAnalysisKit'; 
import { window } from '@kit.ArkUI'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
export default class EntryAbility extends UIAbility { 
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 
  } 
 
  onDestroy(): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 
  } 
 
  onWindowStageCreate(windowStage: window.WindowStage): void { 
    // Main window is created, set main page for this ability 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
 
    windowStage.loadContent('pages/Index', (err) => { 
      if (err.code) { 
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 
        return; 
      } 
      let windowClass: window.Window | undefined = undefined; 
      windowStage.getMainWindow((err: BusinessError, data) => { 
        let errCode: number = err.code; 
        if (errCode) { 
          console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 
          return; 
        } 
        windowClass = data; 
        console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 
        // 获取UIContext实例。 
        let uiContext: UIContext | null = null; 
        uiContext = windowClass.getUIContext(); 
        AppStorage.setOrCreate('uiContext1111',uiContext) 
      }) 
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 
    }); 
  } 
  onWindowStageDestroy(): void { 
    // Main window is destroyed, release UI related resources 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 
  } 
 
  onForeground(): void { 
    // Ability has brought to foreground 
    hilog.info(0x0000, 'wangyi testTag', '%{public}s', 'Ability onForeground'); 
  } 
 
  onBackground(): void { 
    // Ability has back to background 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 
  } 
 
  onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void { 
  } 
} 
import { myFunc, Params } from './CustomDialogController' 
 
 
@Entry 
@Component 
struct CustomDialogDemo { 
  @State message: string = "hello" 
  aboutToAppear(): void { 
    myFunc(); 
  } 
  build() { 
    Row() { 
      Column() { 
        Button("click me") 
          .onClick(() => { 
          }) 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .height('100%') 
  } 
} 
//dialogController 
import { BusinessError } from '@ohos.base'; 
import { ComponentContent } from "@ohos.ArkUI.node"; 
import { UIContext, window } from '@kit.ArkUI'; 
 
export class Params { 
  text: string = "" 
 
  constructor(text: string) { 
    this.text = text; 
  } 
} 
 
declare enum DialogAlignment { 
  Top, 
  Center, 
  Bottom, 
  Default, 
  TopStart, 
  TopEnd, 
  CenterStart, 
  CenterEnd, 
  BottomStart, 
  BottomEnd 
} 
 
declare enum DismissReason { 
  PRESS_BACK = 0, 
  TOUCH_OUTSIDE = 1, 
  CLOSE_BUTTON = 2 
} 
 
export function myFunc() { 
  let uiContext: UIContext | undefined = AppStorage.get('uiContext1111'); 
  console.info('wangyi ' + uiContext) 
  try { 
    if (uiContext) { 
      let promptAction = uiContext.getPromptAction(); 
      promptAction.openCustomDialog(new ComponentContent(uiContext, wrapBuilder(buildText), new Params('as')), { 
        alignment: DialogAlignment.Center, 
        showInSubWindow: true, // 作为子窗口弹出，而不是toast的形式 
        onWillDismiss: (dismissDialogAction: DismissDialogAction) => { 
          console.info("reason" + JSON.stringify(dismissDialogAction.reason)) 
          console.log("MWB ", "dialog onWillDismiss") 
          if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 
            dismissDialogAction.dismiss() 
          } 
          if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 
            dismissDialogAction.dismiss() 
          } 
        } 
      }); 
      console.log('MWB', 'Start to openCustomDialog') 
    } 
 
 
  } catch (error) { 
    let message = (error as BusinessError).message; 
    let code = (error as BusinessError).code; 
    console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`); 
  } 
  ; 
 
} 
 
@Builder 
function buildText(params: Params) { 
 
  Column() { 
    test() 
  }.backgroundColor('#FFF0F0F0') 
} 
 
@Component 
struct test { 
  controller: RichEditorController = new RichEditorController() 
 
  build() { 
    Column() { 
      RichEditor({ controller: this.controller })// 绑定自定义键盘 
        // .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) 
        .height(200) 
        .id('ni') 
        .borderWidth(1) 
        .borderColor(Color.Red) 
        .width("100%") 
        .onAppear(() => { 
          focusControl.requestFocus('ni') 
        }) 
        .onFocus(() => { 
          console.log('聚焦') 
        }) 
        .onBlur(() => { 
          console.log('失去聚焦') 
        }) 
    } 
  } 
}
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.