[经验]

OpenHarmony JS UI小型系统实现dialog弹窗容器的方法

2022-4-2 10:12:07

1997 OpenHarmony dialog

一、目标
使用OpenHarmony 小型系统支持的基础控件实现dialog弹窗容器。
二、背景
在OpenHarmony 标准系统上有dialog容器，在标准系统中dialog是一种自定义弹窗容器，具体效果可以看官方提供的样例。但在小型系统中没有提供dialog自定义弹窗容器，目前的需求是在L1设备上实现类似于dialog弹窗容器的功能。
三、环境
设备：君正x2000开发板
系统：OpenHarmony 3.0.0.0(LTS)
四、效果
4.1视频效果
视频地址–发布中
4.2效果截图

五、实现思路
从效果图中我们可以看出，dialog弹窗容器可以有以下几个特点：
1、弹窗屏幕居中显示；
2、弹窗整体布局从上到下包括：图片、标题、描述、按钮；
3、弹窗出现时背景半透明；
4、弹窗显示时，点击事件由弹窗消费不向下传递
5、点击弹窗空白处可以关闭弹窗
分析：小型系统所支持的基础容器中
1、弹窗效果可以通过stack堆叠容器，将内容显示层和弹窗层进行分离，初始状态下通过容器的show=false属性将弹窗的视图隐藏，点击按钮需要显示弹窗时，将修改弹窗容器的show=true弹出提示窗口。
2、弹窗中的控件需要使用到：image、text、input
备注：如果你对上面提到的容器API还不熟悉，可以参看以下内容：
div API
stack API
image API
input API
text API
六、完整代码
说明：组件的代码包括三个部分：hml、css、js，因为代码比较简单，所以没有写注释，如果有不明白的地方可以留言。

         title">游戏升级
         超级神射手[请重设社区新游戏参数]版本号:2.05.071 版本,游戏已升级到最新版本，可以快速体验以下吧！

/*dialogView.css*/
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.title {
font-size: 30px;
text-align: center;
width: 200px;
height: 100px;
}
.stack-content{
width: 100%;
height: 100%;
background-color: orange;
}
.main{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.btn{
width: 50%;
height: 70px;
left: 25%;
top: 60%;
background-color: #99ec8b36;
}
.dialog{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: white;
font-size: 26fp;
background-color: #77555555;
}
.dialog-content{
width: 80%;
height: 570px;
background-color: white;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.main_img{
width: 100%;
height: 100%;
}
.back-img{
width: 40px;
height:40px;
border-radius: 20px;
left: 20px;
top: 20px;
}
.img{
width: 100%;
height: 300px;
border-radius: 20px;
}
.game-update-title{
font-size: 26px;
text-align: center;
width: 80%;
height: 50px;
color: #2d2d2d;
margin-top: 20px;
}
.game-update-hint{
font-size: 16px;
text-align: center;
width: 80%;
height: 80px;
color: #5d5c5c;
}
.join-btn{
width: 200px;
height: 60px;
background-color: red;
margin-top: 10px;
}
import router from '@system.router';
export default {
data: {
      title: 'World',
      isShow: false,
      isClickDialogContent:false
},
onBack() {
      router.replace({
         uri: "pages/index/index"
      })
},
onClick() {
      console.log("onClick");
      this.isShow = !this.isShow
},
onClickDialog() {
      console.log("onClickDialog");
      if (this.isClickDialogContent) {
         this.isClickDialogContent = false;
      } else {
         this.isShow = !this.isShow
      }
},
onDialogContent() {
      console.log("onDialogContent");
      this.isClickDialogContent = true;
},
onJoin() {
      this.isShow = !this.isShow
}
}