【鸿蒙 HarmonyOS NEXT】popup弹窗

一、背景

给组件绑定popup弹窗,并设置弹窗内容,交互逻辑和显示状态。

常见场景:点击按钮弹出popup弹窗,并对弹窗的内容进行交互逻辑处理,如:弹窗内点击跳转到其他页面

二、给组件绑定Popup弹窗

PopupOptions类型说明

名称 类型 必填 描述
message string 弹窗信息内容。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
placementOnTop(deprecated) boolean 是否在组件上方显示,默认值为false。 说明: 从 API version 10 开始废弃,建议使用placement替代。
primaryButton { value: string, action: () => void } 第一个按钮。 value: 弹窗里主按钮的文本。 action: 点击主按钮的回调函数。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
secondaryButton { value: string, action: () => void } 第二个按钮。 value: 弹窗里辅助按钮的文本。 action: 点击辅助按钮的回调函数。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
onStateChange (event: { isVisible: boolean }) => void 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
arrowOffset9+ Length popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。如果显示在屏幕边缘,气泡会自动左右偏移,数值为0时箭头始终指向绑定组件。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
showInSubWindow9+ boolean 是否在子窗口显示气泡,默认值为false。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
mask10+ boolean | { color : ResourceColor } 设置气泡是否有遮罩层及遮罩颜色。如果设置为false,则没有遮罩层;如果设置为true,则设置有遮罩层并且颜色为透明色;如果设置为Color,则为遮罩层的颜色。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
messageOptions10+ PopupMessageOptions 设置弹窗信息文本参数。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
targetSpace10+ Length 设置popup与目标的间隙。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
placement10+ Placement 设置popup组件相对于目标的显示位置,默认值为Placement.Bottom。 如果同时设置了placementOnTop和placement,则以placement的设置生效。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
offset10+ Position 设置popup组件相对于placement设置的显示位置的偏移。 说明: 不支持设置百分比。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
enableArrow10+ boolean 设置是否显示箭头。 默认值:true 说明: 当页面可用空间无法让气泡完全避让时,气泡会覆盖到组件上并且不显示箭头。 元服务API: 从API version 11开始,该接口支持在元服务中使用。
popupColor11+ Color | string | number | Resource 提示气泡的颜色。如需去除模糊背景填充效果,需将backgroundBlurStyle设置为BlurStyle.NONE。 默认值:透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK元服务API: 从API version 12开始,该接口支持在元服务中使用。
autoCancel11+ boolean 页面有操作时,是否自动关闭气泡。 默认值:true 元服务API: 从API version 12开始,该接口支持在元服务中使用。
width11+ Dimension 弹窗宽度。 说明: showInSubWindow=true时最大高度为设备屏幕高度,showInSubWindow=false时最大高度为应用窗口高度。高度限定逻辑=最大高度-状态栏高度(没有时高度为0)-dock栏高度(没有时高度为0)-40VP-40VP。 元服务API: 从API version 12开始,该接口支持在元服务中使用。
arrowPointPosition11+ ArrowPointPosition 气泡尖角相对于父组件显示位置,气泡尖角在垂直和水平方向上有 "Start"、"Center"、"End"三个位置点可选。以上所有位置点均位于父组件区域的范围内,不会超出父组件的边界范围。 元服务API: 从API version 12开始,该接口支持在元服务中使用。
arrowWidth11+ Dimension 设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小,则不绘制气泡箭头。 默认值:16.0_vp 说明: 不支持设置百分比。 元服务API: 从API version 12开始,该接口支持在元服务中使用。
arrowHeight11+ Dimension 设置箭头高度。 默认值:8.0_vp 说明: 不支持设置百分比。 元服务API: 从API version 12开始,该接口支持在元服务中使用。
radius11+ Dimension 设置气泡圆角半径。 默认值:20.0_vp 元服务API: 从API version 12开始,该接口支持在元服务中使用。
shadow11+ ShadowOptions | ShadowStyle 设置气泡阴影。 默认值:ShadowStyle.OUTER_DEFAULT_MD 元服务API: 从API version 12开始,该接口支持在元服务中使用。
backgroundBlurStyle11+ BlurStyle 设置气泡模糊背景参数。 默认值:BlurStyle.COMPONENT_ULTRA_THICK 元服务API: 从API version 12开始,该接口支持在元服务中使用。
transition12+ TransitionEffect 自定义设置popup弹窗显示和退出的动画效果。 说明: 1.如果不设置,则使用默认的显示/退出动效。 2.显示动效中按back键,打断显示动效,执行退出动效,动画效果为显示动效与退出动效的曲线叠加后的效果。 3.退出动效中按back键,不会打断退出动效,退出动效继续执行,back键不被响应。 元服务API: 从API version 12开始,该接口支持在元服务中使用。
onWillDismiss12+ boolean|(dismissPopupAction: DismissPopupAction) => void 设置popup交互式关闭拦截开关及拦截回调函数,默认值为true,popup响应点击、左滑/右滑、三键back。 1.当为boolean类型时,如果设置为false,则不响应点击、左滑/右滑、三键back或键盘ESC退出事件,仅当设置"弹窗显示状态"参数show值为false时才退出;如果设置为true,则正常响应退出事件; 2.如果设置为函数类型,则拦截退出事件且执行回调函数。 说明: 在onWillDismiss回调中,不能再做onWillDismiss拦截。 元服务API: 从API version 12开始,该接口支持在元服务中使用。

三、具体实现

代码:

javascript 复制代码
@Extend(Text)
function PopupTextStyle() {
  .fontSize(14)
  .fontColor('#222427')
  .lineHeight(16)
}
@Entry
@Component
struct PopupExample {
  @State customPopup: boolean = false; //定义变量控制弹窗显示
  controller: TabsController = new TabsController()

  build() {
    Column(){
      Image($r('app.media.navImg')).width(100)
        .onClick(()=>{
          this.customPopup = !this.customPopup;
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Bottom,
          mask: { color: '#80000000' },
          popupColor: Color.White,
          enableArrow: true, //是否显示箭头
          arrowPointPosition: ArrowPointPosition.CENTER, //气泡尖角位置
          arrowWidth: 13, //箭头宽度
          arrowHeight: 10, //箭头高度
          radius: 4,
          offset: {x:-5, y: -8 },
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false;
            }
          }
        })
    }
    .layoutWeight(1)
    .width('100%')
    .backgroundColor('#f0f2f4')
    }

  //popup构造器定义弹框内容
  @Builder
  popupBuilder() {
    Column({ space: 16 }) {
      Text('首页')
        .PopupTextStyle()
        .onClick(()=>{
          console.log('lucy== 11')
        })
      Text('购物车')
        .PopupTextStyle()
        .onClick(()=>{
          console.log('lucy== 22')
        })
      Text('分类')
        .PopupTextStyle()
        .onClick(()=>{
          console.log('lucy== 33')
        })
    }
    .alignItems(HorizontalAlign.Start)
    .width(74)
    .padding({ top: 16, bottom: 16, left: 16 })
  }
}

效果:

点击图片出现弹窗,弹窗内点击内容进行交互处理

相关推荐
踏雪Vernon4 小时前
[OpenHarmony5.0][Docker][环境]OpenHarmony5.0 Docker编译环境镜像下载以及使用方式
linux·docker·容器·harmonyos
Andy醒8 小时前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
yuwinter8 小时前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
ZZZCY20038 小时前
华为ENSP--IP编址及静态路由配置
网络·华为
jikuaidi6yuan10 小时前
鸿蒙系统(HarmonyOS)分布式任务调度
分布式·华为·harmonyos
智慧化智能化数字化方案16 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY200317 小时前
华为VER系统及CLI命令熟悉
华为
SameX17 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX17 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos