# 构建多种样式弹窗(ArkTS)
### 简介
本篇Codelab将介绍如何使用弹窗功能,实现四种类型弹窗。分别是:警告弹窗、自定义弹窗、日期滑动选择器弹窗、文本滑动选择器弹窗。
![](screenshots/device/MultipeDialog.gif)
### 相关概念
- [警告弹窗](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-methods-alert-dialog-box-0000001478341185-V3?catalogVersion=V3) :显示警告弹窗组件,可设置文本内容与响应回调。
- [自定义弹窗](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-methods-custom-dialog-box-0000001477981237-V3?catalogVersion=V3) : 通过CustomDialogController类显示自定义弹窗。
- [日期滑动选择器弹窗](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-methods-datepicker-dialog-0000001427902500-V3?catalogVersion=V3) :根据指定范围的Date创建可以选择日期的滑动选择器,展示在弹窗上。
- [文本滑动选择器弹窗](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-methods-textpicker-dialog-0000001427584912-V3?catalogVersion=V3) :根据指定的选择范围创建文本选择器,展示在弹窗上。
### 相关权限
不涉及
### 使用说明
1. 打开应用首页,点击主页左上角返回按钮,展示警告弹窗,点击确定按钮退出页面。
2. 打开应用首页,点击出生日期选项,展示日期滑动选择弹窗,上下滑动日期,点击确定按钮,显示选中日期。
3. 打开应用首页,点击性别选项,展示文本滑动选择弹窗,上下滑动文本,点击确定按钮,显示选中文本。
4. 打开应用首页,点击兴趣爱好选项,展示自定义弹窗,选中多个兴趣爱好,点击确定,显示选中兴趣爱好。
### 约束与限制
1. 本示例仅支持标准系统上运行,支持设备:华为手机或运行在DevEco Studio上的华为手机设备模拟器。
2. 本示例为Stage模型,支持API version 9。
3. 本示例需要使用DevEco Studio 3.1 Release版本进行编译运行。
没有合适的资源?快使用搜索试试~ 我知道了~
构建多种样式的弹窗 示例代码
共42个文件
png:10个
json:10个
ets:9个
需积分: 1 0 下载量 41 浏览量
2024-01-29
15:45:19
上传
评论
收藏 2.96MB ZIP 举报
温馨提示
在应用中,界面通常都是动态的。如图1所示,在子目标列表中,当用户点击目标一,目标一会呈现展开状态,再次点击目标一,目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。 ArkUI作为一种声明式UI,具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时,状态的变化会触发组件自动更新。所以在ArkUI中,我们只需要通过一个变量来记录状态。当改变状态的时候,ArkUI就会自动更新界面中受影响的部分。 ArkUI框架提供了多种管理状态的装饰器来修饰变量,使用这些装饰器修饰的变量即称为状态变量。 在组件内使用@State装饰器来修饰变量,可以使组件根据不同的状态来呈现不同的效果。若当前组件的状态需要通过其父组件传递而来,此时需要使用@Prop装饰器;若是父子组件状态需要相互绑定进行双向同步,则需要使用@Link装饰器。使用@Provide和@Consume装饰器可以实现跨组件层级双向同步状态。
资源推荐
资源详情
资源评论
收起资源包目录
构建多种样式弹窗(ArkTS).zip (42个子文件)
MultipleDialog
AppScope
resources
base
media
app_icon.png 7KB
element
string.json 100B
app.json5 220B
screenshots
device
MultipeDialog.gif 2.91MB
hvigor
hvigor-wrapper.js 66KB
hvigor-config.json5 100B
hvigorfile.ts 160B
LICENSE 10KB
entry
hvigorfile.ts 162B
src
main
ets
pages
HomePage.ets 5KB
viewmodel
HobbyItem.ets 806B
entryability
EntryAbility.ets 1KB
view
CustomDialogWidget.ets 6KB
TextCommonWidget.ets 2KB
TextInputWidget.ets 2KB
common
utils
Logger.ets 2KB
CommonUtils.ets 4KB
constants
CommonConstants.ets 3KB
resources
base
media
ic_hobbies.png 3KB
ic_arrow.png 822B
ic_back.png 1020B
ic_birthdate.png 2KB
ic_nickname.png 2KB
ic_avatar.png 9KB
icon.png 7KB
ic_sex.png 3KB
ic_signature.png 2KB
profile
main_pages.json 45B
element
float.json 3KB
stringarray.json 549B
string.json 1KB
color.json 565B
en_US
element
stringarray.json 549B
string.json 1KB
zh_CN
element
stringarray.json 530B
string.json 1KB
module.json5 954B
oh-package.json5 207B
build-profile.json5 150B
oh-package.json5 249B
build-profile.json5 455B
README.md 2KB
共 42 条
- 1
资源评论
断水流大撕兄
- 粉丝: 1w+
- 资源: 19
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功