更新时间：2022-06-03 09:40:04浏览次数：924+次
本文介绍HarmonyOS鸿蒙功能很强大的弹窗XPopup的实现方法，步骤有：项目集成XPopup、普通的弹框、加载的弹框、xml布局创建、java代码功能实现、最后附上运行截图。可以参考Android的XPopup的框架去比较学习。
一、api讲解
1、项目集成XPopup
1].我们需要在项目级的bulid.gradle添加如下代码：
repositories {
mavenCentral()
}
2].我们在entry的目录下bulid.gradle添加如下代码：
implementation 'io.openharmony.tpc.thirdlib:XPopup:1.1.4'
2、普通的弹框
该方法是显示普通的弹框，详细api方法和注释见代码：
popupView = new XPopup.Builder(getContext())
// 设置是否显示导航栏，默认是显示的。如果你希望弹窗隐藏导航栏，就设置为true
.hasNavigationBar(false)
/*
* 是否在弹窗消失后就立即释放资源，杜绝内存泄漏，仅仅适用于弹窗只用一次的场景，默认为false。
* 如果你的弹窗对象需是复用的，千万不要开启这个设置
*/
.isDestroyOnDismiss(true)
.hasBlurBg(true)//是否设置背景为高斯模糊背景。默认为false
.dismissOnTouchOutside(false)//设置点击弹窗外面是否关闭弹窗，默认为true
.autoDismiss(false)//设置当操作完毕后是否自动关闭弹窗，默认为true。比如：点击Confirm弹窗的确认按钮默认是关闭弹窗，如果为false，则不关闭
.popupAnimation(PopupAnimation.NoAnimation)// 为弹窗设置内置的动画器，默认情况下，已经为每种弹窗设置了效果最佳的动画器；如果你不喜欢，仍然可以修改。
/*
* title:标题
* content：内容
* cancelBtnText：取消按钮文本(左边按钮文本)
* confirmBtnText：确定按钮文本(右边按钮文本)
* confirmListener：确定按钮点击事件(右边按钮点击事件)
* cancelListener：取消按钮点击事件(左边按钮点击事件)
* isHideCancel：是否隐藏左侧按钮(设置单个点击按钮使用)
*/
.asConfirm("标题", "内容：床前明月光，疑是地上霜；举头望明月，低头思故乡。",
"取消", "确定",
new OnConfirmListener() {
@Override
public void onConfirm() {
popupView.dismiss();
}
}, new OnCancelListener() {
@Override
public void onCancel() {
popupView.dismiss();
}
}, false);
popupView.show();
3、加载的弹框
该方法是显示加载的弹框，详细api方法和注释见代码：
if (loadingPopup == null) {
loadingPopup = (LoadingPopupView) new XPopup.Builder(getContext())
.dismissOnBackPressed(false)//todo 点击 弹框外部 加载框消失
.asLoading("加载中")
.show();
} else {
loadingPopup.show();
}
二、代码实现
1、xml布局创建
创建两个text按钮，分别是“普通的弹框”，“加载弹框”，作用分别是用于创建普通的弹框，和创建加载的弹框，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="left"
ohos:orientation="vertical">
<Text
ohos:id="$+id:text_Normal"
ohos:height="100vp"
ohos:text_alignment="center"
ohos:width="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text="普通弹框"
ohos:text_size="40vp"
/>
<Text
ohos:id="$+id:text_load"
ohos:height="100vp"
ohos:text_alignment="center"
ohos:width="match_parent"
ohos:layout_alignment="horizontal_center"
ohos:background_element="#ed6262"
ohos:text="加载框"
ohos:text_size="40vp"
/>
</DirectionalLayout>
2、java代码功能实现
代码分别实现这个功能，代码如下：
package com.newdemo.myapplication.slice;
import com.lxj.xpopup.XPopup;
import com.lxj.xpopup.core.BasePopupView;
import com.lxj.xpopup.enums.PopupAnimation;
import com.lxj.xpopup.impl.LoadingPopupView;
import com.lxj.xpopup.interfaces.OnCancelListener;
import com.lxj.xpopup.interfaces.OnConfirmListener;
import com.lxj.xpopup.interfaces.XPopupCallback;
import com.newdemo.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
public class MainAbilitySlice extends AbilitySlice {
private BasePopupView popupView;
private LoadingPopupView loadingPopup;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
findComponentById(ResourceTable.Id_text_Normal).setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
popupView = new XPopup.Builder(getContext())
// 设置是否显示导航栏，默认是显示的。如果你希望弹窗隐藏导航栏，就设置为true
.hasNavigationBar(false)
/*
* 是否在弹窗消失后就立即释放资源，杜绝内存泄漏，仅仅适用于弹窗只用一次的场景，默认为false。
* 如果你的弹窗对象需是复用的，千万不要开启这个设置
*/
.isDestroyOnDismiss(true)
.hasBlurBg(true)//是否设置背景为高斯模糊背景。默认为false
.dismissOnTouchOutside(false)//设置点击弹窗外面是否关闭弹窗，默认为true
.autoDismiss(false)//设置当操作完毕后是否自动关闭弹窗，默认为true。比如：点击Confirm弹窗的确认按钮默认是关闭弹窗，如果为false，则不关闭
.popupAnimation(PopupAnimation.NoAnimation)// 为弹窗设置内置的动画器，默认情况下，已经为每种弹窗设置了效果最佳的动画器；如果你不喜欢，仍然可以修改。
/*
* title:标题
* content：内容
* cancelBtnText：取消按钮文本(左边按钮文本)
* confirmBtnText：确定按钮文本(右边按钮文本)
* confirmListener：确定按钮点击事件(右边按钮点击事件)
* cancelListener：取消按钮点击事件(左边按钮点击事件)
* isHideCancel：是否隐藏左侧按钮(设置单个点击按钮使用)
*/
.asConfirm("标题", "内容：床前明月光，疑是地上霜；举头望明月，低头思故乡。",
"取消", "确定",
new OnConfirmListener() {
@Override
public void onConfirm() {
popupView.dismiss();
}
}, new OnCancelListener() {
@Override
public void onCancel() {
popupView.dismiss();
}
}, false);
popupView.show();
}
});
findComponentById(ResourceTable.Id_text_load).setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
if (loadingPopup == null) {
loadingPopup = (LoadingPopupView) new XPopup.Builder(getContext())
.dismissOnBackPressed(false)//todo 点击 弹框外部 加载框消失
.asLoading("加载中")
.show();
} else {
loadingPopup.show();
}
}
});
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
三、运行效果
使用以上代码后，效果如下：
相关资讯
