在HarmonyOS 中非ui界面拉起自定义弹窗的demo怎么解决?

春暖花开

发布于
2024-12-17 河南

在HarmonyOS中非ui界面拉起自定义弹窗的demo怎么解决?

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

阅读 730

AI BotBETA

在HarmonyOS中，要在非UI界面拉起自定义弹窗，你可以通过以下步骤实现：

1. **创建自定义弹窗布局**：
   首先，你需要定义一个自定义的弹窗布局文件（XML），这通常包含一个或多个组件，用于显示弹窗的内容。

2. **创建弹窗类**：
   接着，你需要创建一个继承自`Ability`或其他合适组件的类，用于控制弹窗的显示和隐藏。在这个类中，你可以加载自定义的布局文件，并设置相关的属性（如宽高、位置等）。

3. **在非UI界面触发弹窗**：
   在非UI界面中，你可以通过某种方式（如事件监听、定时器触发等）来实例化并显示这个弹窗类。通常，你需要确保在非UI线程中正确切换到UI线程来更新UI（如果平台需要）。

4. **处理弹窗的生命周期**：
   你需要确保弹窗在显示和隐藏时能够正确处理其生命周期，比如监听窗口关闭事件来执行清理工作。

5. **测试和优化**：
   最后，通过在不同设备和场景下进行测试，确保弹窗能够在非UI界面中正确拉起，并且不影响应用的性能和用户体验。

由于HarmonyOS的具体API和框架可能会有所不同，因此建议查阅HarmonyOS的官方文档或相关开发者社区，以获取更详细的示例代码和最佳实践。

1 个回答

发布于
2024-12-17 上海

✓ 已被采纳

具体解决方案：

//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('失去聚焦') 
        }) 
    } 
  } 
}

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

HarmonyOS

子站问答

相似问题

找不到问题？创建新问题