一、CustomDialog

CustomDialog组件是一种自定义对话框,可以通过开发人员根据特定的要求定制内容和布局。它允许开发人员创建一个完全可定制的对话框,可以显示任何类型的内容,例如文本、图像、表单和按钮。

CustomDialog通常用于在执行任务之前向用户提供额外的信息或输入选项,例如确认删除操作或输入登录凭据。它们还可以用于创建弹出窗口来显示信息或广告。

CustomDialog通常涉及创建一个新的布局文件,并扩展Dialog类来自定义其行为和外观。

1.创建自定义弹窗

HarmonyOS的@CustomDialog是一个自定义对话框控件,它可以帮助开发人员快速创建各种各样的对话框,包括提示框、确认框、输入框等。

使用@CustomDialog,开发人员可以自定义对话框的标题、消息、按钮、图标等属性,以及对话框的样式和布局。此外,它还支持自定义对话框的背景、动画和触发事件等属性,以满足不同场景的需求。

@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController
build() {
Column() {
Text('我是内容')
.fontSize(20)
.margin({ top: 10, bottom: 10 })
}
}
} @Entry
@Component
struct TextInputSample {
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({}),
})
build() {
Column() {
Flex({justifyContent:FlexAlign.Center}){
Button('click me')
.onClick(() => {
this.dialogController.open()
})
}.width('100%')
}.padding(20)
}
}

2.弹窗的交互

弹窗数据交互的作用包括提高用户体验、简化流程、提高交互性、实现数据交互和优化UI设计等。它可以在用户操作过程中快速展示信息或选项,减少操作繁琐度和时间成本;同时作为数据交互的桥梁,传递用户输入或选择的信息进行处理,展示需要的信息给用户。弹窗数据交互可以提供灵活的交互形式,同时也可以通过多样化的UI设计形式实现独特的设计效果。

@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController
cancel: () => void
confirm: () => void
build() {
Column() {
Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('cancel')
.onClick(() => {
this.controller.close()
this.cancel()
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('confirm')
.onClick(() => {
this.controller.close()
this.confirm()
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 })
}
}
} @Entry
@Component
struct TextInputSample {
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: this.onCancel,
confirm: this.onAccept,
}),
alignment: DialogAlignment.Default, // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示
})
onCancel() {
console.info('Callback when the first button is clicked')
}
onAccept() {
console.info('Callback when the second button is clicked')
}
build() {
Column() {
Flex({justifyContent:FlexAlign.Center}){
Button('click me')
.onClick(() => {
this.dialogController.open()
})
}.width('100%')
}.padding(20)
}
}

3.案例

// xxx.ets
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController
cancel: () => void
confirm: () => void
build() {
Column() {
Text('我是弹窗案例').fontSize(20).margin({ top: 10, bottom: 10 })
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Button('取消')
.onClick(() => {
this.controller.close()
this.cancel()
}).backgroundColor(0xffffff).fontColor(Color.Black)
Button('确认')
.onClick(() => {
this.controller.close()
this.confirm()
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 })
}
}
} @Entry
@Component
struct DialogExample {
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
cancel: this.onCancel,
confirm: this.onAccept,
}),
alignment: DialogAlignment.Default, // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示
})
onCancel() {
console.info('取消')
}
onAccept() {
console.info('确认')
} build() {
Flex({ justifyContent: FlexAlign.Center }) {
Button('点我')
.onClick(() => {
this.dialogController.open()
})
}.width('100%')
}
}

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

鸿蒙HarmonyOS实战-ArkUI组件(CustomDialog)的更多相关文章

  1. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

  2. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  3. 手把手带你体验鸿蒙 harmonyOS

    wNlRGd.png 前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 image.png 一.为什么要尝鲜 harmonyos? wNlfx ...

  4. 最全华为鸿蒙 HarmonyOS 开发资料汇总

    开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...

  5. 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京

    12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...

  6. 鸿蒙开源第三方件组件——轮播组件Banner

    目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...

  7. 14-Flutter移动电商实战-ADBanner组件的编写

    拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...

  8. 13-Flutter移动电商实战-ADBanner组件的编写

    1.AdBanner组件的编写 我们还是把这部分单独出来,需要说明的是,这个Class你也是可以完全独立成一个dart文件的.代码如下: 广告图片class AdBanner extends Stat ...

  9. iview实战 : 树形组件自定义

    Tree树形组件是 iview 中相对复杂的一个组件. 自定义节点内容 使用强大的 Render 函数可以自定义节点显示内容和交互,比如添加图标,按钮等. ——官方文档 但官方的 example 只有 ...

  10. ArkUI 组件 Props

    在上一篇博客文章中简单地提到了 Props . 在使用 Props 时需要注意到一个点,子组件从寄主页面传递过来的值是单向的,也就是子组件不能直接修改传递下来的值,即单向性. 以上篇文章定义的头像组件 ...

随机推荐

  1. 【图论#02】岛屿系列题(数量、周长、最大面积),flood fill算法的代码实现与优化

    岛屿数量 给你一个由 '1'(陆地)和 '0'(水)组成的的二维网格,请你计算网格中岛屿的数量. 岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成. 此外,你可以假设该网 ...

  2. macOS通过ssh使用PEM登录

    在win上面可以使用XSHELL来登录类似于亚马逊这样的安全服务器,在mac上面就可以使用系统自带的命令工具来连接 使用命令 ssh -i key.pem [server] 如下: ssh -i ke ...

  3. 【Azure Redis 缓存】Redis Geo-replication(异地复制)的问题 

    问题描述 在Azure官网中,已列出了一系列的常规问题:https://docs.azure.cn/zh-cn/azure-cache-for-redis/cache-how-to-geo-repli ...

  4. Nebula Importer 数据导入实践

    本文首发于 Nebula Graph Community 公众号 前言 Nebula 目前作为较为成熟的产品,已经有着很丰富的生态.数据导入的维度而言就已经提供了多种选择.有大而全的Nebula Ex ...

  5. 【Openxml】如何为OpenXml元素创建超链接

    已知在OpenXml有以下几种超链接 功能 说明 跳转页面 跳转某一页:ppaction://hlinksldjump跳转第一页:ppaction://hlinkshowjump?jump=first ...

  6. PetriCrode ---Code Genreation for Colored Petri Nets Annotated with Pragmatics

    1. PetriCode lets users generate code from CPN  models annotated with pragmatics ,PetriCode allows t ...

  7. nginx rewrite 语法

    nginx rewrite 语法 一 定义 Rewrite主要实现url地址重写, 以及地址重定向,就是将用户请求web服 务器的地址重新定向到其他URL的过程. 二 语法格式 reweite fia ...

  8. HttpClientHandler VS SocketsHttpHandler

    .NET Framework 和 .NET Core 2.0 及更低版本中由 HttpClient 使用的默认消息处理程序为HttpClientHandler. 从 .NET Core 2.1 开始, ...

  9. 安装VMware——Unable to install all modules.See log /tmp/vmware-han/vmware-6098.log for detalls.(Exit code 1)的解决方法(模块加载失败)

    这是编译失败的原因在VM社区有这样一种解决方案,亲测有效,帮助我自己解决的麻烦,所有在这分享,希望能够帮助到小伙伴:不要被接下来的代码吓倒因为这是github上项目,所以要先在ubuntu上安装git ...

  10. linux程序运行结果在打印到屏幕的同时写入文件

    1.使用script工具 script工具是一个非常使用的工具,可以把输出到终端的信息记录下来.使用方法如: (1)输入 script log.txt命令开始保存终端输出的信息 ,其中log.txt为 ...