场景一:创建并显示全局自定义弹窗
方案
可以使用openCustomDialog接口, 创建并弹出dialogContent对应的自定义弹窗,使用Promise异步回调。
创建Params类方便开发者进行传参的,开发者可以在@Builder里自定义组件的内容,宽度跟随子节点自适应,圆角为0,弹窗背景色为透明色;
let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message))
上述代码中uiContext代表上下文,wrapBuilder(buildText)代表自定义节点,new Params(this.message)代表传参。
核心代码
import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
}//传参
@Builder
function buildText(params: Params) {
Row(){
Column() {
Text(params.text)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({bottom: 36})
}.backgroundColor('#FFF0F0F0')
}
.height("100%")
} //自定义组件的内容
@Entry
@Component
struct Index {
@State message: string = "显示TOAST"
build() {
Row() {
Column() {
Button("click me")
.onClick(() => {
let uiContext = this.getUIContext();
let promptAction = uiContext.getPromptAction();
let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));//上下文、自定义节点、传参
try {
promptAction.openCustomDialog(contentNode);
} 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}`);
};
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
}//传参
@Builder
function buildText(params: Params) {
Row(){
Column() {
Text(params.text)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({bottom: 36})
}.backgroundColor('#FFF0F0F0')
}
.height("100%")
} //自定义组件的内容
@Entry
@Component
struct Index {
@State message: string = "显示TOAST"
build() {
Row() {
Column() {
Button("click me")
.onClick(() => {
let uiContext = this.getUIContext();
let promptAction = uiContext.getPromptAction();
let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));//上下文、自定义节点、传参
try {
promptAction.openCustomDialog(contentNode);
} 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}`);
};
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
场景二:全局弹窗拦截返回并监听返回事件
方案
onWillDismiss Callback,当用户执行点击遮障层关闭、左滑/右滑、三键back、键盘ESC关闭交互操作时,如果注册该回调函数,则不会立刻关闭弹窗。在回调函数中可以通过reason得到阻拦关闭弹窗的操作类型,从而根据原因选择是否能关闭弹窗。
名称 | 描述 |
---|---|
PRESS_BACK | 点击三键back、左滑/右滑、键盘ESC。 |
TOUCH_OUTSIDE | 点击遮障层时。 |
CLOSE_BUTTON | 点击关闭按钮。 |
当前组件返回的reason中,暂不支持CLOSE_BUTTON的枚举值。
核心代码
import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
} //传参
@Builder
function buildText(params: Params) {
Row() {
Column() {
Text(params.text)
.fontSize(20)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.padding(8)
Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
.fontSize(16)
.textAlign(TextAlign.Center)
.padding({ left: 14, right: 14 })
.margin({ top: -4 })
Row({ space: 64 }) {
Button("不允许")
.onClick(() => {
let link1: SubscribedAbstractProperty<number> = storage.link('PropA');
let numsss = link1.get()
console.log('nums', link1.get())
link1.set(++numsss)
})
Button("允许")
}
.padding(24)
}
.width("90%")
.borderRadius(8)
.backgroundColor('#FFF0F0F0')
}
.height("100%")
} //自定义组件的内容
let para: Record<string, number> = { 'PropA': 1 };
let storage: LocalStorage = new LocalStorage(para); // 创建新实例并使用给定对象初始化
@Entry(storage)
@Component
struct Index {
@State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"
@LocalStorageLink('uiContext') aaa: UIContext = this.getUIContext();
@LocalStorageLink('PropAA') shjsh: ComponentContent<Params> | null = null
@LocalStorageLink('PropA') @Watch('onchang') nums: number = 0;
onchang() {
try {
this.aaa.getPromptAction().closeCustomDialog(this.shjsh);
} 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}`);
}
}
build() {
Row() {
Column() {
Button("click me")
.onClick(() => {
let uiContext = this.getUIContext();
let promptAction = uiContext.getPromptAction();
let contentNode =
new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); // 上下文、自定义节点、传参
this.shjsh = contentNode
try {
promptAction.openCustomDialog(contentNode,
{
onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
console.info("reason" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
}
});
} 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}`);
}
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
} //传参
@Builder
function buildText(params: Params) {
Row() {
Column() {
Text(params.text)
.fontSize(20)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.padding(8)
Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
.fontSize(16)
.textAlign(TextAlign.Center)
.padding({ left: 14, right: 14 })
.margin({ top: -4 })
Row({ space: 64 }) {
Button("不允许")
.onClick(() => {
let link1: SubscribedAbstractProperty<number> = storage.link('PropA');
let numsss = link1.get()
console.log('nums', link1.get())
link1.set(++numsss)
})
Button("允许")
}
.padding(24)
}
.width("90%")
.borderRadius(8)
.backgroundColor('#FFF0F0F0')
}
.height("100%")
} //自定义组件的内容
let para: Record<string, number> = { 'PropA': 1 };
let storage: LocalStorage = new LocalStorage(para); // 创建新实例并使用给定对象初始化
@Entry(storage)
@Component
struct Index {
@State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"
@LocalStorageLink('uiContext') aaa: UIContext = this.getUIContext();
@LocalStorageLink('PropAA') shjsh: ComponentContent<Params> | null = null
@LocalStorageLink('PropA') @Watch('onchang') nums: number = 0;
onchang() {
try {
this.aaa.getPromptAction().closeCustomDialog(this.shjsh);
} 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}`);
}
}
build() {
Row() {
Column() {
Button("click me")
.onClick(() => {
let uiContext = this.getUIContext();
let promptAction = uiContext.getPromptAction();
let contentNode =
new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); // 上下文、自定义节点、传参
this.shjsh = contentNode
try {
promptAction.openCustomDialog(contentNode,
{
onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
console.info("reason" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
}
});
} 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}`);
}
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
场景三:自定义弹窗样式
样式一:渐隐渐显的方式弹出
效果图
方案
promptAction.openCustomDialog接口,弹窗的样式相当于customdialog设置customStyle为true时;此时弹窗的样式完全按照dialogContent中设置的样式显示,完全由开发者自己来定义。
核心代码
import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
} //传参
@Builder
function buildText(params: Params) {
Row(){
Column() {
Text(params.text)
.fontSize(20)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.padding(8)
Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
.fontSize(16)
.textAlign(TextAlign.Center)
.padding({ left:14,right:14})
.margin({top:-4})
Row({space:64}){
Button("不允许")
Button("允许")
}
.padding(24)
}
.width("90%")
.borderRadius(8)
.backgroundColor('#FFF0F0F0')
}
.height("100%")
} //自定义组件的内容
@Entry
@Component
struct Index {
@State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"
build() {
Row() {
Column() {
Button("click me")
.onClick(() => {
let uiContext = this.getUIContext();
let promptAction = uiContext.getPromptAction();
let contentNode =
new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); //上下文、自定义节点、传参
try {
promptAction.openCustomDialog(contentNode);
} 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}`);
}
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
import { BusinessError } from '@ohos.base';
import { ComponentContent } from "@ohos.arkui.node";
class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
} //传参
@Builder
function buildText(params: Params) {
Row(){
Column() {
Text(params.text)
.fontSize(20)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.padding(8)
Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
.fontSize(16)
.textAlign(TextAlign.Center)
.padding({ left:14,right:14})
.margin({top:-4})
Row({space:64}){
Button("不允许")
Button("允许")
}
.padding(24)
}
.width("90%")
.borderRadius(8)
.backgroundColor('#FFF0F0F0')
}
.height("100%")
} //自定义组件的内容
@Entry
@Component
struct Index {
@State message: string = "允许“应用”在您使用该应用时访问您的位置吗?"
build() {
Row() {
Column() {
Button("click me")
.onClick(() => {
let uiContext = this.getUIContext();
let promptAction = uiContext.getPromptAction();
let contentNode =
new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message)); //上下文、自定义节点、传参
try {
promptAction.openCustomDialog(contentNode);
} 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}`);
}
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}
样式二:由下往上的方式弹出
效果图.
方案
在自定义组件Builder里添加组件内转场动画(transition),设置组件转场时的平移效果和纵向的平移距离。
核心代码
@Builder
function buildText(params: Params) {
Row(){
Column() {
Text(params.text)
.fontSize(20)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.padding(8)
Text('方便为你提供本地新闻和天气信息,并且根据您的位置信息发现附近的免费WiFi')
.fontSize(16)
.textAlign(TextAlign.Center)
.padding({ left:14,right:14})
.margin({top:-4})
Row({space:64}){
Button("不允许")
Button("允许")
}
.padding(24)
}
.width("90%")
.borderRadius(8)
.backgroundColor('#FFF0F0F0')
}
.height("100%")
.visibility(800)
// 定义进场出场转场动画效果
.transition(TransitionEffect.OPACITY.animation({duration: 800}).combine(TransitionEffect.translate({y: 100})))
} //自定义组件的内容
以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解;想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到!
下面是鸿蒙的完整学习路线,展示如下:
除此之外,根据这个学习鸿蒙全栈学习路线,也附带一整套完整的学习【文档+视频】,内容包含如下:
内容包含了:(ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战)等技术知识点。帮助大家在学习鸿蒙路上快速成长!
鸿蒙【北向应用开发+南向系统层开发】文档
鸿蒙【基础+实战项目】视频
鸿蒙面经
为了避免大家在学习过程中产生更多的时间成本,对比我把以上内容全部放在了↓↓↓想要的可以自拿喔!谢谢大家观看!