HintDialog Advanced Usage and Customization Practices

interface HintParm { content: string; // Display content title?: string; // Title noMsg?: string; // Cancel button text okMsg?: string; // Confirm button text showNo?: boolean; // Whether to show cancel button isWebType?: boolean; // Whether it is Web type controller?: WebviewController; // Web controller outsideCancel?: boolean; // Whether clicking outside can cancel onNo?: () => void; // Cancel callback onOk?: () => void; // Confirm callback alignment?: DialogAlignment; // Alignment method } 

import { WebviewController } from '@ohos.web.webview'; // Create Web controller private webController: WebviewController = new WebviewController(); // Open Web type dialog HintDialog.open({ title: 'Web Content Display', content: 'https://gitee.com/qincji/hint-dialog', isWebType: true, controller: this.webController, showNo: true, onOk: () => { // Get current URL this.webController.getURL().then(url => { console.log('Current web address: ' + url); }); } }) 

HintDialog.open({ title: 'Asynchronous Operation Example', content: 'Are you sure you want to submit the form?', onOk: async () => { // Show loading status HintDialog.open({ content: 'Submitting...', showNo: false }); try { // Simulate API request await new Promise(resolve => setTimeout(resolve, 2000)); // Close loading dialog HintDialog.close(); // Show success prompt HintDialog.open({ content: 'Submission successful', showNo: false }); } catch (e) { HintDialog.close(); HintDialog.open({ content: 'Submission failed, please try again', showNo: false }); } } }) 

HintDialog.initDefaultStyle({ // Callback before popup appears onWillAppear: () => { console.log('Dialog is about to show'); }, // Callback after popup appears onDidAppear: () => { console.log('Dialog has shown'); }, // Callback before popup disappears onWillDisappear: () => { console.log('Dialog is about to disappear'); }, // Callback after popup disappears onDidDisappear: () => { console.log('Dialog has disappeared'); } }) 

// Import related classes import { HintDialog, HintStyle, TitleParm } from '@qincji/dialog'; import { AttributeModifier, TextAttribute, ColumnAttribute } from '@ohos.ui'; // Custom title style const titleAttr: AttributeModifier<TextAttribute> = { applyNormalAttribute(instance: TextAttribute): void { instance.fontColor('#ff1145e5') .fontWeight(FontWeight.Bolder) .fontSize(25) .margin({ bottom: 15 }); } }; // Custom outer container style const outBoxAttr: AttributeModifier<ColumnAttribute> = { applyNormalAttribute(instance: ColumnAttribute): void { instance.backgroundColor('#ffc8f1b3') .borderRadius(15) .padding(20) .margin(50); } }; // Initialize global style HintDialog.initDefaultStyle({ titleParm: new TitleParm('Custom Title', titleAttr), outBoxAttr: outBoxAttr, alignment: DialogAlignment.Bottom, outsideCancel: true }) 

HintDialog.initDefaultStyle({ btnParm: { okAttr: { applyNormalAttribute(btn: ButtonAttribute) { btn.backgroundColor('#007dff') .fontColor('#ffffff') .borderRadius(8) .width(120) .height(40); } }, noAttr: { applyNormalAttribute(btn: ButtonAttribute) { btn.backgroundColor('#f2f2f2') .fontColor('#333333') .borderRadius(8) .width(120) .height(40); } }, space: 15 // Button spacing } }) 

// Define custom content component @Component struct CustomContent { @State count: number = 0; build() { Column({ space: 10 }) { Text('This is a custom counter') Button('+') .onClick(() => this.count++) Text(`Current value: ${this.count}`) } .padding(10) } } // Use in dialog HintDialog.open({ title: 'Custom Content Example', content: '', // Must be provided, can be empty string customContent: () => CustomContent(), // Custom content component showNo: true }) 

@State username: string = ''; @State password: string = ''; HintDialog.open({ title: 'User Login', customContent: () => Column({ space: 15 }) { TextInput({ placeholder: 'Please enter username' }) .onChange(value => this.username = value) .width('100%') TextInput({ placeholder: 'Please enter password', type: InputType.Password }) .onChange(value => this.password = value) .width('100%') } .padding(10), onOk: () => { // Handle login logic console.log(`Login information: ${this.username}, ${this.password}`); } }) 

// Simplified core implementation class HintDialog { private static instance: HintDialog; private controller: CustomDialogController; private style: HintStyle = defaultStyle; // Singleton pattern private constructor() { this.initController(); } static getInstance(): HintDialog { if (!HintDialog.instance) { HintDialog.instance = new HintDialog(); } return HintDialog.instance; } // Initialize dialog controller private initController() { this.controller = new CustomDialogController({ builder: this.buildContent, style: this.style }); } // Open dialog static open(params: HintParm) { const instance = HintDialog.getInstance(); instance.updateParams(params); instance.controller.open(); } // Other methods... } 

// Official CustomDialog implementation @CustomDialog struct OfficialDialog { controller: CustomDialogController; message: string; build() { Column() { Text(this.message) Button('Confirm') .onClick(() => this.controller.close()) } } } // Need to create controller when using private dialogController: CustomDialogController = new CustomDialogController({ builder: OfficialDialog({ message: 'Official dialog', controller: this.dialogController }) }); // Call to display this.dialogController.open();