【鸿蒙软件开发】自定义弹窗(CustomDialog)

简介: 【鸿蒙软件开发】自定义弹窗(CustomDialog)

前言


自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。


一、创建自己第一个自定义弹窗


1.1 创建自定义弹窗

使用@CustomDialog装饰器装饰自定义弹窗。

@CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  build() {
    Column() {
      Text('我是内容')
      .fontSize(20)
      .margin({ top: 10, bottom: 10 })
    }
  }
}


45fd8291768e4d94ae1294229306c553.png

881137e8a7ac46f4902506dcf3573b54.png

需要注意的是:我们需要把这个自定义弹窗的代码放到我们需要使用的页面里面,就像这样:

我们自定义弹窗中有两个需要我们写的:

controller:控制我们的自定义弹窗的

build函数:和我们主界面是一模一样的,没有区别,直接和主页面一样写代码即可。


1.2 创建构造器,与装饰器呼应相连

在创建好自定义弹窗之后,我们肯定要弄出他的对象来吧,他的类型是CustomDialogController

dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
})


9b226564bd74412485cbe4e491b74304.png

builder: CustomDialogExample({})为指定哪个自定义窗口

CustomDialogExample的参数为自定义窗口的参数


CustomDialogController参数详解

接口函数原型:

CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})


05bb33f9b9194fb89c8b4aeb466c79fa.png

参数如下:


下面参数分别是参数名,参数类型,是否必填,参数作用

1、builder,CustomDialog,是,自定义弹窗内容构造器。

2、cancel,() => void,否,点击遮障层退出时的回调。

3、autoCancel,boolean,否,是否允许点击遮障层退出。默认值:true

4、alignment,DialogAlignment,否,弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Default

5、offset,Offset,否,弹窗相对alignment所在位置的偏移量。

6、customStyle,boolean,否,弹窗容器样式是否自定义。默认值:false,弹窗容器的宽度根据栅格系统自适应,不跟随子节点;高度自适应子节点,最大为窗口高度的90%;圆角为24vp。

7、gridCount,number,否,弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应,异常值按默认值处理,最大栅格数为系统最大栅格数。


函数介绍

open()

函数原型如下:

open(): void


close()

函数原型如下

close(): void


关闭显示的自定义弹窗,若已关闭,则不生效。

显示自定义弹窗内容,允许多次使用,但如果弹框为SubWindow模式,则该弹框不允许再弹出SubWindow弹框。


1.3 点击与onClick事件绑定的组件使弹窗弹出

Button('click me')
  .onClick(() => {
    this.dialogController.open()
  })


49ff47b1dbc64013b8c857216cae3790.png

使用open()函数即可打开自定义窗口

如下图所示:

e996349b52f94ed686a47add2f3fa881.png


二、示例代码


// xxx.ets
@CustomDialog
struct CustomDialogExample {
  @Link textValue: string
  @Link inputValue: string
  controller: CustomDialogController
  // 若尝试在CustomDialog中传入多个其他的Controller,以实现在CustomDialog中打开另一个或另一些CustomDialog,那么此处需要将指向自己的controller放在最后
  cancel: () => void
  confirm: () => void
  build() {
    Column() {
      Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
        .onChange((value: string) => {
          this.textValue = value
        })
      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.inputValue = this.textValue
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
    // dialog默认的borderRadius为24vp,如果需要使用border属性,请和borderRadius属性一起使用。
  }
}
@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
      textValue: $textValue,
      inputValue: $inputValue
    }),
    cancel: this.existApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })
  // 在自定义组件即将析构销毁时将dialogControlle删除和置空
  aboutToDisappear() {
    delete this.dialogController, // 删除dialogController
    this.dialogController = undefined // 将dialogController置空
  }
  onCancel() {
    console.info('Callback when the first button is clicked')
  }
  onAccept() {
    console.info('Callback when the second button is clicked')
  }
  existApp() {
    console.info('Click the callback in the blank area')
  }
  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != undefined) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}


d9c5fada91b6458590c968fa8d9339d1.png


总结


本文介绍了CustomDialog的基础使用,这包括了API9的所有内容,这非常简单,希望大家看完之后一定要写代码!!!

相关文章
|
4月前
|
容器
鸿蒙仓颉开发语言实战教程:自定义tabbar
本文介绍了在仓颉语言中实现自定义 tabbar 的完整过程。由于仓颉的 tabbar 组件限制较大,仅支持图片和文字,无法满足复杂样式需求,因此需手动构建带图标与文字的 tabbar 元素,并通过状态判断实现选中效果及点击切换功能。结合 Tabs 容器完成页面切换,适用于 HarmonyOS 商城应用开发。
|
4月前
|
开发者
鸿蒙仓颉开发语言实战教程:自定义组件
本文介绍了如何在仓颉开发语言中创建自定义组件,以封装和管理项目中的 tabbar 组件为例。通过创建独立的组件文件 yltabbar.cj,并使用 @Component 和 @Link 等修饰符实现组件化开发与参数传递,提升代码复用性和项目可维护性。适合希望深入掌握仓颉语言组件开发的 HarmonyOS 开发者学习参考。 #HarmonyOS #仓颉 #购物
|
17天前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
|
4月前
|
开发者
Uniapp开发鸿蒙应用教程之自定义导航栏
本文介绍了在Uniapp跨平台开发鸿蒙应用时,如何实现自定义导航栏。通过修改pages.json文件可调整默认导航栏样式,但若需添加组件(如搜索框、按钮等),则需手动创建自定义导航栏组件,以适配鸿蒙系统。文中给出了详细的配置代码与实现步骤,帮助开发者灵活控制界面布局。#鸿蒙 #Uniapp #跨平台开发
|
6月前
|
人工智能 物联网 Android开发
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
314 92
|
4月前
|
索引
鸿蒙开发:自定义切换动画实现Swiper层叠滑动效果
customContentTransition不仅仅可以实现平移上的改变,很多的效果,我们都可以实现,比如放大缩小,旋转等等。
198 2
鸿蒙开发:自定义切换动画实现Swiper层叠滑动效果
|
5月前
|
存储 前端开发 Android开发
鸿蒙开发:自定义一个联系人模版
实现的方式并不是一成不变,你也可以通过Canvas自定义绘制来实现,基本上大同小异,都是必须要确认当前触摸字母的位置,然后进行样式的更改,左右列表的联动操作。
鸿蒙开发:自定义一个联系人模版
|
5月前
|
定位技术 开发者
HarmonyOS实战:高德地图自定义定位图标展示
本文详细介绍了在鸿蒙系统中实现地图定位功能的开发流程与注意事项。首先,开发者需要申请两个必要的定位权限,并确保用户手动开启系统设置中的位置权限。接着,通过高德定位获取用户位置信息,并使用自定义图标替代默认的定位箭头。文章特别强调了经纬度数据必须为float类型,否则可能导致定位不准确。此外,还需检查系统的GPS定位按钮是否开启,以确保定位功能正常使用。通过本文的指导,开发者可以避免常见的定位问题,顺利完成地图定位功能的开发。
210 2
HarmonyOS实战:高德地图自定义定位图标展示
|
4月前
|
缓存 JavaScript 前端开发
【HarmonyOS 5】鸿蒙的装饰器原理和自定义装饰器
一、鸿蒙中的装饰器是什么? 在ArkTS中装饰器(Decorator)是一种特殊的声明,能够对类、方法、属性等进行标注和修改。
93 0
|
4月前
|
移动开发 开发工具 容器
【HarmonyOS NEXT】鸿蒙使用ScanKit实现自定义扫码 (一)之业务流程和扫码
1)鸿蒙提供的ScanKit具备以下五种能力: 1. 扫码直达 2. 自定义扫码,图像识码 (自定义扫码需要这两种能力组合在一起,所以我分类在一起) 3. 码图生成 4. 系统提供的默认界面扫码
116 0

热门文章

最新文章