鸿蒙开发:实现popup弹窗

简介: 目前提供了两种方式实现popup弹窗,主推系统实现的方式,几乎能满足我们常见的所有场景,当然了,文章毕竟有限,尽量还是以官网为主。

前言


popup弹窗,可以说是一个很常见的功能,像上边的微信,以及很多的应用,都会存在这样的需求,鸿蒙原生Api中,对于popup弹窗,可以说实现起来特别的简单,直接使用提供的


bindPopup方法即可。

简单举例如下:

Column() {
      Button("点击").onClick(() => {
        this.isShowPopup = !this.isShowPopup
      }).bindPopup(this.isShowPopup, {
        message: "我是一个测试popup",
        onWillDismiss: () => {
          this.isShowPopup = !this.isShowPopup
        }
      })
    }.width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)


实际效果:



本篇文章主要概述bindPopup的使用方式,以及如何不绑定组件的情况下进行弹出popup弹窗。

1、了解bindPopup的属性

2、如何更改popup样式

3、如何自定义popup弹窗

4、不绑定组件方式弹出

5、相关总结

一、了解bindPopup的属性


bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions): T;


bindPopup共有两个参数,第一个参数show用于控制popup弹窗的显示,为了便于动态的弹出和隐藏,需要生成成员变量,并用装饰器来修饰,除此之外,还有一点需要注意,那就是popup弹窗必须等待页面全部构建完成才能展示,如果你在构建之前,比如aboutToAppear里进行改变,是没有效果的。

第二个参数是popup弹窗主要配置项,在这里可以配置,弹窗的样式等等效果,下面针对常见的几个参数,做一个简单的了解。

message:弹窗内容,仅支持string类型,如果只是一个普通的文字弹窗,只实现这一个参数即可。

placement:设置popup组件在绑定组件的显示位置,默认值为Placement.Bottom,也就是底部展示,你可以根据实际情况,设置需要展示的位置。

enableArrow:设置是否显示箭头,默认为true,展示。

popupColor:popup弹窗颜色,因为有背景填充的效果,可以发现,即便我们设置了颜色,并没有达到想要的效果,这里需要去除背景填充,将backgroundBlurStyle设置为BlurStyle.NONE即可。

radius:popup弹窗的圆角半径。

targetSpace:popup弹窗与绑定组件的距离。

onWillDismiss:popup弹窗隐藏回调,这里做一些隐藏之后的逻辑处理。

当然了,还有一些其他的属性,如果大家用到了,可以直接看官网介绍即可。


二、如何更改popup样式


更改popup样式,主要是根据上述的属性来进行设置,简单的举例几个样式。


1、修改popup弹窗背景


bindPopup(this.isShowPopup, {
        message: "我是一个测试popup",
        popupColor: Color.Pink,
        backgroundBlurStyle: BlurStyle.NONE,
        onWillDismiss: () => {
          this.isShowPopup = !this.isShowPopup
        }
      })


通过popupColor属性设置,并改变填充背景backgroundBlurStyle,效果如下:

2、隐藏popup弹窗箭头


bindPopup(this.isShowPopup, {
        message: "我是一个测试popup",
        popupColor: Color.Pink, //设置背景
        enableArrow: fasle, //隐藏箭头
        backgroundBlurStyle: BlurStyle.NONE, //取消背景填充
        onWillDismiss: () => {
          this.isShowPopup = !this.isShowPopup
        }
      })


设置enableArrow为true即可,效果如下:

3、组件上边弹出popup弹窗


bindPopup(this.isShowPopup, {
        message: "我是一个测试popup",
        placement: Placement.Top, //设置组件上边弹出
        popupColor: Color.Pink, //设置背景
        enableArrow: false, //隐藏箭头
        backgroundBlurStyle: BlurStyle.NONE, //取消背景填充
        onWillDismiss: () => {
          this.isShowPopup = !this.isShowPopup
        }
      })


使用属性placement来设置即可,效果如下:

4、设置popup弹窗文字样式

messageOptions: {
          textColor: Color.White,
          font: {
            size: 15,
            weight: FontWeight.Bold
          }
        }


通过messageOptions属性设置即可,可以设置字体的颜色,大小,权重等等。



三、如何自定义popup弹窗


在实际的需求中,popup弹窗不可能总是一个文字展示,有着多种多样的需求,比如前言中微信案例,那么如何自己定义弹窗的效果呢?可以使用提供的builder参数,传递一个定义的@Builder即可。


代码案例:


自定义视图:


@Builder
  popupView() {
    Column() {
      Text("我是条目一").fontColor(Color.White)
      Text("我是条目二").fontColor(Color.White)
      Text("我是条目三").fontColor(Color.White)
      Text("我是条目四").fontColor(Color.White)
    }.padding(5)
  }

实现builder:

.bindPopup(this.isShowPopup, {
        builder: this.popupView,
        radius: 5,
        popupColor: "#999999",
        backgroundBlurStyle: BlurStyle.NONE, //取消背景填充
        onWillDismiss: () => {
          this.isShowPopup = !this.isShowPopup
        }
      })

案例效果:

四、不绑定组件方式弹出


可以发现,bindPopup是组件提供的一个方法,想要在哪个组件下弹出,就给哪个组件进行绑定,实现起来也是十分的简单便捷,当然了也是主推这种方式,如果你不想进行绑定实现,想要在何时何地,都可以书写弹出效果,您可以使用我之前封装的dialog库,里面目前针对Popup也简单封装了一层,感兴趣的可以使用。

中心仓库地址:https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fdialog


定义弹出UI


首先要定义弹出的组件,自定义即可,支持自定义组件形式,传入即可


/**
 * AUTHOR:AbnerMing
 * INTRODUCE:popup 弹出框,可以自定义,任意组件
 * */
@Builder
  function BuilderWindowView() {
    Text("我是任意的组件")
      .backgroundColor(Color.Pink)
  }

任意位置

showPopupWindow({
  view: wrapBuilder(BuilderWindowView),
  x: 60,
  y: 300
})

上边

showPopupWindow({
  id: "popupTop",//要弹出的组件id,也就是你要在哪一个组件进行弹出
  view: wrapBuilder(BuilderWindowView)
})

下边

showPopupWindow({
  id: "popupBottom",//要弹出的组件id,也就是你要在哪一个组件进行弹出
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM
})

左边

showPopupWindow({
  id: "popupLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.LEFT
})

右边

showPopupWindow({
  id: "popupRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.RIGHT
})

左上

showPopupWindow({
  id: "popupTopLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.TOP_LEFT
})

右上

showPopupWindow({
  id: "popupTopRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.TOP_RIGHT
})

左下

showPopupWindow({
  id: "popupBottomLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM_LEFT
})

右下

showPopupWindow({
  id: "popupBottomRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM_RIGHT
})

携带参数

class WindowParams {
  title?: string
}
@Builder
function BuilderWindowParams(params: WindowParams) {
  Text(params.title)
    .backgroundColor(Color.Pink)
}
//代码调用
 let params = new WindowParams()
params.title = "我是携带的参数"
showPopupWindow({
  id: "popupParams",
  params: params,
  viewParams: wrapBuilder(BuilderWindowParams),
  direction: PopupDirection.BOTTOM
})


五、相关总结


目前提供了两种方式实现popup弹窗,主推系统实现的方式,几乎能满足我们常见的所有场景,当然了,文章毕竟有限,尽量还是以官网为主。

目录
打赏
0
2
2
0
160
分享
相关文章
|
7天前
鸿蒙开发:了解@Builder装饰器
@Builder装饰是鸿蒙UI开发中,非常重要的一个装饰器,在实际的开发中,合理且正确的使用,能够让我们的代码更加的简洁,有两点需要注意,一是,是用私有还是全局,取决于当前的组件的复用机制,如果多个页面都使用了,建议以全局为主;二是传参的动态更新,有更新就使用引用参数传递,没有更新按值传递即可。
56 28
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
28 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
115 47
Harmony OS开发-ArkTS语言速成二
鸿蒙开发:异步并发操作
在结合async/await进行使用的时候,有一点需要注意,await关键字必须结合async,这两个是搭配使用的,缺一不可,同步风格在使用的时候,如何获取到错误呢,毕竟没有catch方法,其实,我们可以自己创建try/catch来捕获异常。
107 3
鸿蒙开发:异步并发操作
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
62 5
【HarmonyOS NEXT开发——ArkTS语言】欢迎界面(启动加载页)的实现【合集】
从ArkTS代码架构层面而言,@Entry指明入口、@Component助力复用、@Preview便于预览,只是初窥门径,为开发流程带来些许便利。尤其动画回调与Blank组件,细节粗糙,后续定当潜心钻研,力求精进。”,字体颜色为白色,字体大小等设置与之前类似,不过动画配置有所不同,时长为。,不过这里没有看到额外的动画效果添加到这个特定的图片元素上(与前面带动画的元素对比而言)。这是一个显示文本的视图,文本内容为“奇怪的知识”,设置了字体颜色为灰色(的结构体,它代表了整个界面组件的逻辑和视图结构。
57 1
|
2月前
|
鸿蒙开发:实现一个超简单的网格拖拽
实现拖拽,最重要的三个方法就是,打开编辑状态editMode,实现onItemDragStart和onItemDrop,设置拖拽移动动画和交换数据,如果想到开启补位动画,还需要实现supportAnimation方法。
91 13
鸿蒙开发:实现一个超简单的网格拖拽
|
2月前
|
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘
|
2月前
|
API
鸿蒙开发:自定义一个英文键盘
实现方式呢,有很多种,目前采用了比较简单的一种,如果大家采用网格Grid组件实现方式,也是可以的,但是需要考虑每行的边距以及数据,还有最后两行的格子占位问题。
鸿蒙开发:自定义一个英文键盘
鸿蒙元服务项目实战:备忘录内容编辑开发
富文本内容编辑我们直接使用RichEditor组件即可,最重要的就是参数,value: RichEditorOptions,通过它,我们可以用来设置样式,和获取最后的富文本内容,这一点是很重要的。
鸿蒙元服务项目实战:备忘录内容编辑开发

热门文章

最新文章

  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    28
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    52
  • 3
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    61
  • 4
    鸿蒙原生应用再添新丁!北京广电、充电管家、有我帮 入局鸿蒙
    26
  • 5
    鸿蒙开发:了解@Builder装饰器
    56
  • 6
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    156
  • 7
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    63
  • 8
    华为鸿蒙自己家的“AI”编辑器插件用起来到底怎么样?
    66
  • 9
    《鸿蒙 HarmonyOS 应用开发从入门到精通(第 2 版)》学习笔记 ——HarmonyOS 环境搭建之注册华为开发者联盟帐号
    92
  • 10
    微信纯血鸿蒙版正式发布,295天走完微信14年技术之路!
    90
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等