[HarmonyOS Next示例代码]自定义弹窗合集

HarmonyOS Coder369

于 2024-08-13 20:08:47 发布

阅读量840

点赞数 29

分类专栏： HarmonyOS Next 鸿蒙开发文章标签： harmonyos 华为 ui 鸿蒙

本文链接：https://blog.csdn.net/zhangtian6691844/article/details/141172594

版权

HarmonyOS Next 同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

鸿蒙开发

68 篇文章 0 订阅

订阅专栏

自定义弹窗合集

介绍

本示例使用自定义弹窗(CustomDialog)、全屏模态转场(bindContentCover)、半模态转场(bindSheet)等实现多种自定义弹窗。

效果预览

使用说明：

加载完成后显示首页的8个自定义弹窗类别，点击对应按钮，进入相应的弹窗页面：

滑动选择弹窗：点击页面底部两个按钮，会弹出对应的12小时制的时间选择器弹窗和文本选择器弹窗。
模态弹窗：点击页面底部选择乘车人，会弹出模态弹窗，点击模态弹窗底部确认按钮，关闭模态弹窗。
半模态弹窗：点击页面中选择点餐口味和餐具按钮，弹出半模态弹窗，点击遮罩层关闭弹窗。
toast弹窗：点击底部按钮，会弹出登陆成功的toast弹窗，3s后弹窗淡出消失。
隐私协议弹窗：点击底部按钮弹出隐私协议弹窗，弹窗内容可以滚动，橙色的隐私协议可以点击，点击后会跳转到新页面，点击新页面的返回按钮回到隐私弹窗页面，弹窗不会关闭，点击同意或不同意关闭弹窗。
全屏弹窗：点击底部按钮弹出全屏弹窗，点击左上角向下箭头可直接关闭弹窗；通过向下滑动会有阻尼效果，当滑动距离大于300时，弹窗会关闭，否则回弹到原位置。
自定义日历选择器弹窗：点击页面中的日期会弹出日期选择器弹窗，当前日期之前的日期不可选，之后的日期可选，选择完成后弹窗关闭，日期更改为选中的日期。
两级半模态+全屏弹窗：点击open sheet1按钮弹出第一个半模态弹窗，点击里面的输入框，弹出的键盘不避让，点击close sheets1按钮会关闭第一个弹窗；点击open sheets2按钮会打开第二个半模态弹窗，第二个半模态弹窗中有两个按钮，点击close sheets2按钮只会关闭第二个半模态弹窗，点击close sheet1 sheet2按钮会关闭第一个和第二个半模态弹窗。

工程目录

├──entry/src/main/ets/
│  ├──common/constant
│  │  └──CommonConstants.ets                   // 公共常量类
│  ├──entryability
│  │  └──EntryAbility.ets                      // 程序入口类
│  ├──pages                 
│  │  ├──Index.ets                             // 首页
│  │  ├──BindContentCoverDemo.ets              // 模态弹窗页面
│  │  ├──BindSheet.ets                         // 半模态弹窗页面
│  │  ├──CustomCalendar.ets                    // 自定义日历选择器弹窗页面
│  │  ├──FullScreen.ets                        // 全屏弹窗页面
│  │  ├──Privacy.ets                           // 隐私协议弹窗页面
│  │  ├──ScrollOption.ets                      // 滑动选择弹窗页面
│  │  └──TwoLevelPageSheet.ets                 // 两级半模态+全屏弹窗页面
│  ├──view                  
│  │  └──CustomCalendarPickerDialog.ets        // 自定义日历弹窗组件
│  └──viewmodel 
│     ├──BindContentModel.ets                  // 模态弹窗接口和数据
│     ├──DataManager.ets                       // 数据存储类
│     ├──DateModel.ets                         // 日期类
│     ├──GetDate.ets                           // 获取日期函数
│     └──MonthDataSource.ets                   // 月份数据类
└──entry/src/main/resources                    // 应用资源目录

具体实现

滑动选择弹窗：通过TimePickerDialog.show(时间选择器弹窗)和TextPickerDialog.show(文本选择器弹窗)两个组件来实现。
模态弹窗：通过bindContentCover属性为组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。
半模态弹窗：通过bindSheet属性为组件绑定半模态页面，点击后显示半模态页面。
toast弹窗：使用自定义弹窗(CustomDialog)来模拟toast提示弹窗，通过设置CustomDialogController类的各种属性值实现效果。
隐私协议弹窗：通过Stack组件层叠模拟实现弹窗，使用visibility属性控制弹窗显示隐藏，实现点击跳转到新页面，点击新页面的返回按钮回到隐私弹窗页面，弹窗不会关闭的效果。
全屏弹窗：通过translate属性将全屏页面隐藏在可视区外，点击全屏弹窗按钮，通过显示动画将全屏弹窗显示出来；在gesture属性内通过PanGesture拖动手势事件，来实现当向下滑动大于300时，弹窗会关闭，否则回弹到原位置。
自定义日历选择器弹窗：使用自定义弹窗(CustomDialog)来实现自定义日历选择器，使用LazyForEach组件循环遍历实现月份，本示例值显示两个月(当前月份与下一个月)，使用ForEach来遍历每个月的每一天。
两级半模态+全屏弹窗：通过bindSheet属性为open sheet1按钮组件绑定第一个半模态页面，给第一个半模态页面中open sheet2绑定第二个半模态页面，从而实现两级半模态弹窗。