codecamp

Popup弹窗控制

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

说明
  • 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
  • popup弹窗的显示状态在onStateChange事件回调中反馈,其显隐与组件的创建或销毁无强对应关系。

接口

名称

参数类型

描述

bindPopup

show: boolean,

popup: PopupOptions | CustomPopupOptions8+

给组件绑定Popup弹窗,设置参数show为true弹出弹框。

show: 弹窗显示状态,默认值为false,隐藏弹窗。popup弹窗必须等待页面全部构建完成才能展示,因此show不能在页面构建中设置为true,否则会导致popup弹窗显示位置及形状错误。

popup: 配置当前弹窗提示的参数。

PopupOptions类型说明

名称

类型

必填

描述

message

string

弹窗信息内容。

placementOnTop

boolean

是否在组件上方显示,默认值为false。

primaryButton

{

value: string,

action: () => void

}

第一个按钮。

value: 弹窗里主按钮的文本。

action: 点击主按钮的回调函数。

secondaryButton

{

value: string,

action: () => void

}

第二个按钮。

value: 弹窗里辅助按钮的文本。

action: 点击辅助按钮的回调函数。

onStateChange

(event: { isVisible: boolean }) => void

弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。

arrowOffset9+

Length

popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。如果显示在屏幕边缘,气泡会自动左右偏移,数值为0时箭头始终指向绑定组件。

showInSubWindow9+

boolean

是否在子窗口显示气泡,默认值为false。

CustomPopupOptions8+类型说明

名称

类型

必填

描述

builder

CustomBuilder

提示气泡内容的构造器。

说明:

popup为通用属性,自定义popup中不支持再次弹出popup。对builder下的第一层容器组件不支持使用position属性,如果使用将导致气泡不显示。

builder中若使用自定义组件,自定义组件的aboutToAppear和aboutToDisappear生命周期与popup弹窗的显隐无关,不能使用其生命周期判断popup弹窗的显隐。

placement

Placement

气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。

默认值:Placement.Bottom

popupColor

ResourceColor

提示气泡的颜色。

enableArrow

boolean

是否显示箭头。

从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,此时如果气泡高度小于箭头的宽度(32vp)与气泡圆角两倍(48vp)之和(80vp),则实际不会显示箭头。

默认值:true

autoCancel

boolean

页面有操作时,是否自动关闭气泡。

默认值:true

onStateChange

(event: { isVisible: boolean }) => void

弹窗状态变化事件回调,参数为弹窗当前的显示状态。

arrowOffset9+

Length

popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。如果显示在屏幕边缘,气泡会自动左右偏移,数值为0时箭头始终指向绑定组件。

showInSubWindow9+

boolean

是否在子窗口显示气泡,默认值为false。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PopupExample {
  5. @State handlePopup: boolean = false
  6. @State customPopup: boolean = false
  7. // popup构造器定义弹框内容
  8. @Builder popupBuilder() {
  9. Row({ space: 2 }) {
  10. Image($r("app.media.image")).width(24).height(24).margin({ left: -5 })
  11. Text('Custom Popup').fontSize(10)
  12. }.width(100).height(50).padding(5)
  13. }
  14. build() {
  15. Flex({ direction: FlexDirection.Column }) {
  16. // PopupOptions 类型设置弹框内容
  17. Button('PopupOptions')
  18. .onClick(() => {
  19. this.handlePopup = !this.handlePopup
  20. })
  21. .bindPopup(this.handlePopup, {
  22. message: 'This is a popup with PopupOptions',
  23. placementOnTop: true,
  24. showInSubWindow:false,
  25. primaryButton: {
  26. value: 'confirm',
  27. action: () => {
  28. this.handlePopup = !this.handlePopup
  29. console.info('confirm Button click')
  30. }
  31. },
  32. // 第二个按钮
  33. secondaryButton: {
  34. value: 'cancel',
  35. action: () => {
  36. this.handlePopup = !this.handlePopup
  37. console.info('cancel Button click')
  38. }
  39. },
  40. onStateChange: (e) => {
  41. console.info(JSON.stringify(e.isVisible))
  42. if (!e.isVisible) {
  43. this.handlePopup = false
  44. }
  45. }
  46. })
  47. .position({ x: 100, y: 50 })
  48. // CustomPopupOptions 类型设置弹框内容
  49. Button('CustomPopupOptions')
  50. .onClick(() => {
  51. this.customPopup = !this.customPopup
  52. })
  53. .bindPopup(this.customPopup, {
  54. builder: this.popupBuilder,
  55. placement: Placement.Top,
  56. maskColor: '0x33000000',
  57. popupColor: Color.Yellow,
  58. enableArrow: true,
  59. showInSubWindow: false,
  60. onStateChange: (e) => {
  61. if (!e.isVisible) {
  62. this.customPopup = false
  63. }
  64. }
  65. })
  66. .position({ x: 80, y: 200 })
  67. }.width('100%').padding({ top: 5 })
  68. }
  69. }

颜色渐变
菜单控制
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }