OpenHarmony JS UI小型系统自定义控件（2）—dialog弹窗原创精华

NL_AIDC_XJS

发布于 2022-4-1 15:54

浏览

1收藏

一、目标

使用OpenHarmony 小型系统支持的基础控件实现dialog弹窗容器。

二、背景

在OpenHarmony 标准系统上有dialog容器，在标准系统中dialog是一种自定义弹窗容器，具体效果可以看官方提供的样例。但在小型系统中没有提供dialog自定义弹窗容器，目前的需求是在L1设备上实现类似于dialog弹窗容器的功能。

三、环境

设备：君正x2000开发板
系统：OpenHarmony 3.0.0.0(LTS)

四、效果

4.1视频效果

视频查看效果

4.2效果截图

OpenHarmony JS UI小型系统自定义控件（2）—dialog弹窗-鸿蒙开发者社区

五、实现思路

从效果图中我们可以看出，dialog弹窗容器可以有以下几个特点：
1、弹窗屏幕居中显示；
2、弹窗整体布局从上到下包括：图片、标题、描述、按钮；
3、弹窗出现时背景半透明；
4、弹窗显示时，点击事件由弹窗消费不向下传递
5、点击弹窗空白处可以关闭弹窗
分析：小型系统所支持的基础容器中
1、弹窗效果可以通过stack堆叠容器，将内容显示层和弹窗层进行分离，初始状态下通过容器的show=false属性将弹窗的视图隐藏，点击按钮需要显示弹窗时，将修改弹窗容器的show=true弹出提示窗口。
2、弹窗中的控件需要使用到：image、text、input

备注：如果你对上面提到的容器API还不熟悉，可以参看以下内容：

六、完整代码

说明：组件的代码包括三个部分：hml、css、js，因为代码比较简单，所以没有写注释，如果有不明白的地方可以留言。

<!-- dialogView.hml -->
<stack class="stack-content">
    <stack class="main">
        <image class="main_img" src="/common/images/dialog_main_bg.jpg"></image>
        <input class="btn" value="升级" onclick="onClick" type="button"></input>
        <image src="/common/images/back.png" class="back-img" onclick="onBack"></image>
    </stack>
    <div class="dialog" onclick="onClickDialog" show="{{isShow}}">
        <div class="dialog-content" onclick="onDialogContent">
            <image class="img" src="/common/images/dialog1_bg.jpg"></image>
            <text class="game-update-title">游戏升级</text>
            <text class="game-update-hint">超级神射手[请重设社区新游戏参数]版本号:2.05.071 版本,游戏已升级到最新版本，可以快速体验以下吧！</text>
            <input class="join-btn" value="快速加入" onclick="onJoin" type="button"></input>
        </div>
    </div>
</stack>

/*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
    }
}