介绍
本示例使用自定义弹窗(CustomDialog)、全屏模态转场(bindContentCover)、半模态转场(bindSheet)等实现多种自定义弹窗。
效果预览
滑动选择弹窗 | 模态弹窗 | 半模态弹窗 | toast弹窗 |
---|---|---|---|
| | | |
隐私协议弹窗 | 全屏弹窗 | 自定义日历选择器弹窗 | 两级半模态+全屏弹窗 |
| | | |
使用说明:
加载完成后显示首页的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绑定第二个半模态页面,从而实现两级半模态弹窗。
相关权限
不涉及
依赖
不涉及