【鸿蒙实战开发】dialog组件开发指导

于 2024-08-13 16:45:20 发布
阅读量685 收藏 12
点赞数 12
分类专栏： 安卓 鸿蒙 前端 文章标签： harmonyos 华为 前端 ui android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141167868
版权
安卓 同时被 3 个专栏收录
201 篇文章 0 订阅
订阅专栏
鸿蒙
201 篇文章 3 订阅
订阅专栏
前端
201 篇文章 0 订阅
订阅专栏

dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考dialog API。

创建dialog组件

在pages/index目录下的hml文件中创建一个dialog组件，并添加Button组件来触发dialog。dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。

<!-- xxx.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" dragable="true">
    <div class="content">
      <text>this is a dialog</text>
    </div>
  </dialog>
  <button value="click me" onclick="opendialog"></button>
</div>

/* xxx.css */
.doc-page {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.dialogClass{
  width: 80%;
  height: 250px;
  margin-start: 1%;
}
.content{
  width: 100%;
  height: 250px;
  justify-content: center;
  background-color: #e8ebec;
  border-radius: 20px;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
}
button{
  width: 70%;
  height: 60px;
}

// xxx.js
export default {
  //Touch to open the dialog box.
  opendialog(){
    this.$element('dialogId').show()
  },
}

0000000000011111111.20240813092130.62195004476806885622284236819830.gif

设置弹窗响应

开发者点击页面上非dialog的区域时，将触发cancel事件而关闭弹窗。同时也可以通过对dialog添加show和close方法来显示和关闭弹窗。

<!-- xxx.hml -->
<div class="doc-page">
  <dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
    <div class="dialogDiv">
      <text>dialog</text>
      <button value="confirm" onclick="confirmClick"></button>
    </div>
  </dialog>
  <button value="click me" onclick="opendialog"></button>
</div>

/* xxx.css */
.doc-page {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.dialogClass{
  width: 80%;
  height: 300px;
  margin-start: 1%;
}
.dialogDiv{
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
text{
  height: 100px;
  align-self: center;
}
button{
  align-self: center;
  margin-top: 20px;
  width: 60%;
  height: 80px;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  canceldialog(e){
    promptAction.showToast({
      message: 'dialogCancel'
    })
  },
  opendialog(){
    this.$element('dialogId').show()
     promptAction.showToast({
      message: 'dialogShow'
    })
  },
  confirmClick(e) {
    this.$element('dialogId').close()
    promptAction.showToast({
      message: 'dialogClose'
    })
  },
}

0000000000011111111.20240813092130.03261150716004046539029829758973.gif

说明

  • 仅支持单个子组件。

  • dialog属性、样式均不支持动态更新。

  • dialog组件不支持focusable、click-effect属性

场景示例

在本场景中，开发者可以通过dialog组件实现一个日程表。弹窗在打开状态下，利用Textarea组件输入当前日程，点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。

<!-- xxx.hml -->
<div class="doc-page">
  <text style="margin-top: 60px;margin-left: 30px;">
    <span>{{date}} events</span>
  </text>
  <div class="btndiv">
    <button type="circle" class="btn" onclick="addschedule">+</button>
  </div>
<!--  for Render events data  -->
  <list style="width: 100%;">
    <list-item type="item" for="schedulelist" style="width:100%;height: 200px;">
      <div class="schedulediv">
        <text class="text1">{{date}}  event</text>
        <text class="text2">{{$item.schedule}}</text>
      </div>
    </list-item>
  </list>
  <dialog id="datedialog" oncancel="canceldialog" >
    <div class="dialogdiv">
      <div class="innertxt">
        <text class="text3">{{date}}</text>
        <text class="text4">New event</text>
      </div>
      <textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea>
      <div class="innerbtn">
        <button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button>
        <button type="text" value="OK" onclick="setschedule" class="btntxt"></button>
      </div>
    </div>
  </dialog>
</div>

/* xxx.css */
.doc-page {
  flex-direction: column;
  background-color: #F1F3F5;
}
.btndiv {
  width: 100%;
  height: 200px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.btn {
  radius:60px;
  font-size: 100px;
  background-color: #1E90FF;
}
.schedulediv {
  width: 100%;
  height: 200px;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 55px;
}
.text1 {
  color: #000000;
  font-weight: bold;
  font-size: 39px;
}
.text2 {
  color: #a9a9a9;
  font-size: 30px;
}
.dialogdiv {
  flex-direction: column;
  align-items: center;
}
.innertxt {
  width: 320px;
  height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.text3 {
  font-family: serif;
  color: #1E90FF;
  font-size: 38px;
}
.text4 {
  color: #a9a9a9;
  font-size: 33px;
}
.area {
  width: 320px;
  border-bottom: 1px solid #1E90FF;
}
.innerbtn {
  width: 320px;
  height: 120px;
  justify-content: space-around;
}
.btntxt {
  text-color: #1E90FF;
}

// xxx.js
var info = null;
import promptAction from '@ohos.promptAction';
export default {
  data: {
    curYear:'',
    curMonth:'',
    curDay:'',
    date:'',
    schedule:'',
    schedulelist:[]
  },
  onInit() {
    // Obtain the current date. 
    var date = new Date();
    this.curYear = date.getFullYear();
    this.curMonth = date.getMonth() + 1;
    this.curDay = date.getDate();
    this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
    this.schedulelist = []
  },
  addschedule(e) {
    this.$element('datedialog').show()
  },
  canceldialog(e) {
    promptAction.showToast({
      message: 'Event setting canceled.'
    })
  },
  getschedule(e) {
    info = e.value
  },
  cancelschedule(e) {
    this.$element('datedialog').close()
    promptAction.showToast({
      message: 'Event setting canceled.'
    })
  },
//    Touch OK to save the data.
  setschedule(e) {
    if (e.text === '') {
      this.schedule = info
    } else {
      this.schedule = info
      var addItem =  {schedule: this.schedule,}
      this.schedulelist.push(addItem)
    }
    this.$element('datedialog').close()
  }
}

0000000000011111111.20240813092131.01777995864613412581682187770758.gif

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (HarmonyOS)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

在这里插入图片描述

代码改变世界996
关注
专栏目录
鸿蒙中级之 ListDialog （HarmonyOS鸿蒙开发基础知识）
iCloudEnd的博客
09-23 4861
ListDialog 创建一个ListDialog实例。 列表对话框包括单选框列表和复选框列表。 未经授权禁止转载 更多技术交流请加入QQ群 群名称：harmonyos鸿蒙技术交流 群 号：856567895 从零开始入门学习HarmonyOS鸿蒙2.0开发 原创 HarmonyOS 鸿蒙入门教程之01 基础环境和开发工具 （教程含源码） 原创 HarmonyOS 鸿蒙开发之02开发工具安装 原创 HarmonyOS 鸿蒙入门教程之03 运行开发工具完成基础配置DevE
【鸿蒙实战开发】list组件开发指导
最新发布
HarmonyOS007的博客
08-13 709
list是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。具体用法请参考list API。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Dialog对话框组件
zy0412326的专栏
12-26 1608
对话框的使用场景也很高频，比如 APP 上架应用市场要求 APP 首次启动要有服务协议和隐私权限提示弹框等，ArkUI开发框架提供了两种方式显示一个对话框，一种是使用。操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1。模块提供的 API 可以显示一个对话框外，还可以使用全局对话框。模块里提供的 API 显示，另一种是使用全局对话框。：事件回调，并显示对话框的点击下标。：显示对话框的配置项，：显示一个对话框，参数。
【愚公系列】2023年12月 HarmonyOS教学课程 020-ArkUI组件（CustomDialog）
热门推荐
时光隧道
12-08 6万+
HarmonyOS的@CustomDialog是一个自定义对话框控件，它可以帮助开发人员快速创建各种各样的对话框，包括提示框、确认框、输入框等。使用@CustomDialog，开发人员可以自定义对话框的标题、消息、按钮、图标等属性，以及对话框的样式和布局。此外，它还支持自定义对话框的背景、动画和触发事件等属性，以满足不同场景的需求。build() {Column() {Text('我是内容')@Entry@Component})build() {Column() {})
HarmonyOS原子化服务开发实战-dialog自定义.docx
06-03
### HarmonyOS原子化服务开发实战——自定义Dialog详解 #### 一、引言 随着HarmonyOS生态的不断发展，开发者们对于系统定制化的需求日益增长。在HarmonyOS的应用开发中，Dialog作为与用户交互的重要组件之一，其...
OpenHarmony实战开发-dialog开发指导
2401_82546228的博客
04-29 811
dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。
自学鸿蒙应用开发（26）- 自定义CommonDialog
面向对象思考
08-02 721
执行效果 上一篇文章中说过，直接使用鸿蒙系统中的CommonDialog大致是下面的效果： 这个效果实在是无法用于实际的应用开发。本文介绍如何定制自己的CommonDialog。还是先看演示视频： CustomizeCommonDialog 准备布局 定制CommonDialog的第一步是定义对话框的布局，具体如下： <?xml version="1.0" encoding="utf-8"?><DirectionalLayout xmlns:ohos="http
HarmonyOS实战开发-实现自定义弹窗
2401_82546228的博客
03-28 1343
本篇Codelab基于ArkTS的声明式开发范式实现了三种不同的弹窗，第一种直接使用公共组件，后两种使用CustomDialogController实现自定义弹窗，效果如图所示
HarmonyOS实战开发-目标管理、如何实现一个自定义弹窗。
2401_82546228的博客
03-29 841
本篇Codelab将介绍如何使用@State、@Prop、@Link、@Watch、@Provide、@Consume管理页面级变量的状态，实现对页面数据的增加、删除、修改。要求完成以下功能：
鸿蒙开发自定义Dialog
王鑫林的博客
06-08 1208
首先创建一个BaseDialog public class WbBaseDialog extends CommonDialog { /** * 类似Android Dialog的cancelable属性， * true: 支持点击外部或返回键消失。 * false: 则只有手动调用hide才会消失。 */ private boolean cancelable = true; protected boolean hideWithBackPre
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 595
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
鸿蒙 dialog各种用法教程
xq610928的博客
08-20 227
前言： 各位同学大家好。有段时间没有给大家更新文章了，具体多久呢我也记不清楚了哈，最近又在看鸿蒙相关的文档 学习了一些鸿蒙里面dialog的用法。所以今天就出一篇dialog的文章分享给大家，那么废话不多说我们正式开始。 准备工作： 1 安装鸿蒙开发环境 大家可以看我之前的文章 华为鸿蒙系统开发初体验 ：[https://www.jianshu.com/p/f94c847c7fdc] 效果图： 具体实现 main_ability_slice 布局文件 <?xml version="1
3.7、自定义弹窗（CustomDialog）
lujianfeiccie2009的专栏
04-17 184
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。build() {Column() {Text('我是内容')3.创建构造器，与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})
Harmony 鸿蒙中类AlertDialog的CommonDialog使用
le0102的博客
06-11 852
Harmony 鸿蒙中类AlertDialog的CommonDialog使用 new CommonDialog(getFractionAbility()) .setTitleText("标题") .setContentText("内容") .setButton(0, "取消", new IDialog.Clicked
鸿蒙HarmonyOS实战-ArkUI组件（CustomDialog）
shudaoshanQAQ的博客
01-05 1557
CustomDialog组件是一种自定义对话框，可以通过开发人员根据特定的要求定制内容和布局。它允许开发人员创建一个完全可定制的对话框，可以显示任何类型的内容，例如文本、图像、表单和按钮。
3.8【HarmonyOS鸿蒙开发】组件ToastDialog
hanru723的博客
07-08 463
3.8【HarmonyOS鸿蒙开发】组件ToastDialog 作者：韩茹 公司：程序咖（北京）科技有限公司 鸿蒙巴士专栏作家 ToastDialog是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。 所以它的特点： 不能够和用户交互，用户不能点击，触摸 不影响用户的其他操作 短时显示后，自动消失 一、创建一个ToastDialog 点击按钮，弹出ToastDialog。 我们现在xml布局文件中： <?xml
maters鸿蒙系统,Flutter入门进阶之旅（十）Dialog&Toast
weixin_28863779的博客
05-28 394
做原生开发的时候，我们都知道要想让一个app做的活灵活现，与用户交互时有更棒的体验，各种样式美轮美奂的对话框跟提示是必不可少的，Flutter在设计对话框的时候充分考虑到了在UI上的体验，帮助我们设计了一整套的基于material design风格的对话框以及轻量级的用于提示的widget。看完上面的效果图，读者是不是也觉得这一套UI设计给人以很棒的体验，下面我们就逐一介绍下上图中出现的常用于提示...
Vue组件开发深度解析：构建Dialog组件
"Vue组件开发技巧总结，包括Vue单文件组件的开发模式，以及如何创建一个具有标题、确定和取消事件及内容插槽的Dialog组件。" 在Vue.js中，组件是构建可复用UI的基本单元，它使得代码更加模块化，易于维护。Vue组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值