鸿蒙开发弹窗
·


promptAction
import { promptAction } from '@kit.ArkUI';
@Entry
@Component
struct PromptPage {
@State message: string = 'Hello World';
build() {
Column() {
Button('打开弹窗')
.onClick(() => {
promptAction.showToast({
message:"我爱祖国",
duration:3000,
bottom:'50%',
textColor:Color.White,
backgroundColor:Color.Black,
backgroundBlurStyle:BlurStyle.NONE
})
})
}
.height('100%')
.width('100%')
}
}
2、CustomDialog
@CustomDialog
struct CustomDialogExample {
controller?: CustomDialogController
build() {
Column() {
Text('你喜欢媳妇吗?')
.fontSize(20)
Row({space:10}){
Button('喜欢').onClick(()=>{
this.controller?.close()
})
Button('超级喜欢').onClick(()=>{
this.controller?.close()
})
}.width('100%')
.height(150)
.justifyContent(FlexAlign.SpaceAround)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.backgroundColor(Color.Transparent)
}
}
@Entry
@Component
struct CustomDialogPage {
@State message: string = 'Hello World';
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(),
backgroundColor:Color.Transparent
})
build() {
Column() {
Button('打开弹窗').onClick(()=>{
this.dialogController?.open();
})
}
.height('100%')
.width('100%')
}
}
3、OperCustomDialog 用法1
import { promptAction } from '@kit.ArkUI';
@Entry
@Component
struct OperCustomDialogPage {
@State dialogId:number=0
@Builder
myDialog(){
Column(){
Text("你喜欢李清扬吗")
.fontColor(Color.Yellow)
Row({space:30}){
Button('喜欢').onClick(()=>{
promptAction.closeCustomDialog(this.dialogId)
})
Button('不喜欢').onClick(()=>{
promptAction.closeCustomDialog(this.dialogId)
})
}
}
}
build() {
Column() {
Button('打开弹窗').onClick(()=>{
promptAction.openCustomDialog({
builder:()=>{
this.myDialog()
},
backgroundColor:Color.Black
}).then((dialogId:number)=>{
this.dialogId = dialogId
})
})
}
.height('100%')
.width('100%')
}
}
3、OperCustomDialog 用法2
// PromptActionClass.ets
import { BusinessError } from '@kit.BasicServicesKit';
import { ComponentContent, promptAction, UIContext } from '@kit.ArkUI';
export class PromptActionClass {
static ctx: UIContext;
static contentNode: ComponentContent<Object>;
static options: promptAction.BaseDialogOptions;
static 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).message;
let code = (error as BusinessError).code;
console.error(`OpenCustomDialog args error code is ${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).message;
let code = (error as BusinessError).code;
console.error(`CloseCustomDialog args 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).message;
let code = (error as BusinessError).code;
console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`);
})
}
}
}
// Index.ets
import { ComponentContent } from '@kit.ArkUI';
import { PromptActionClass } from '../model/MyDialog';
class Params {
text: string = "";
constructor(text: string) {
this.text = text;
}
}
@Builder
function buildText(params: Params) {
Column() {
Text(params.text)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 36 })
Button('Close')
.onClick(() => {
PromptActionClass.closeDialog();
})
}.backgroundColor('#FFF0F0F0')
}
@Entry
@Component
struct OpenCustomDialog2Page {
@State message: string = "hello";
private ctx: UIContext = this.getUIContext();
private contentNode: ComponentContent<Object> =
new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));
aboutToAppear(): void {
PromptActionClass.setContext(this.ctx);
PromptActionClass.setContentNode(this.contentNode);
PromptActionClass.setOptions({ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } });
}
build() {
Row() {
Column() {
Button("open dialog and update options")
.margin({ top: 50 })
.onClick(() => {
PromptActionClass.openDialog();
setTimeout(() => {
PromptActionClass.updateDialog({
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -50 }
});
}, 1500)
})
Button("open dialog and update content")
.margin({ top: 50 })
.onClick(() => {
PromptActionClass.openDialog();
setTimeout(() => {
this.contentNode.update(new Params('update66'));
}, 1500)
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
案例:
import { ComponentContent, promptAction, UIContext } from '@kit.ArkUI';
interface DeleteBuildType {
ok:()=>void
cancel:()=>void
// ok:string
}
@Builder
function DeleteBuilder(params:DeleteBuildType){
Column(){
Text('删除')
Row(){
Button('是').onClick(()=>params.ok())
Button('否').onClick(()=>params.cancel())
}.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
}
}
@Entry
@Component
struct Dialog4Page {
private contentNode:ComponentContent<Object> = new ComponentContent(this.getUIContext(),wrapBuilder(DeleteBuilder),{
ok:()=>{
this.getUIContext().getPromptAction().closeCustomDialog(this.contentNode)
},
cancel:()=>{
this.getUIContext().getPromptAction().closeCustomDialog(this.contentNode)
}
} as DeleteBuildType)
build() {
Column() {
Button('点击删除').onClick(()=>{
this.getUIContext().getPromptAction().openCustomDialog(this.contentNode,{
isModal:false,
autoCancel:false
})
})
}
.height('100%')
.width('100%')
}
}
更多推荐



所有评论(0)