codecamp

气泡提示(Popup)

Popup属性可绑定在组件上显示气泡弹窗提示,设置弹窗内容、交互逻辑和显示状态。主要用于屏幕录制、信息弹出提醒等显示状态。

气泡分为两种类型,一种是系统提供的气泡PopupOptions,一种是开发者可以自定义的气泡CustomPopupOptions。其中PopupOptions为系统提供的气泡,通过配置primaryButton、secondaryButton来设置带按钮的气泡。CustomPopupOptions通过配置builder参数来设置自定义的气泡。

文本提示气泡

文本提示气泡常用于只展示带有文本的信息提示,不带有任何交互的场景。Popup属性需绑定组件,当bindPopup属性中参数show为true的时候会弹出气泡提示。

在Button组件上绑定Popup属性,每次点击Button按钮,handlePopup会切换布尔值,当其为true时,触发bindPopup弹出气泡。

  1. @Entry
  2. @Component
  3. struct PopupExample {
  4. @State handlePopup: boolean = false
  5. build() {
  6. Column() {
  7. Button('PopupOptions')
  8. .onClick(() => {
  9. this.handlePopup = !this.handlePopup
  10. })
  11. .bindPopup(this.handlePopup, {
  12. message: 'This is a popup with PopupOptions',
  13. })
  14. }.width('100%').padding({ top: 5 })
  15. }
  16. }

添加气泡状态变化的事件

通过onStateChange参数为气泡添加状态变化的事件回调,可以判断当前气泡的显示状态。

  1. @Entry
  2. @Component
  3. struct PopupExample {
  4. @State handlePopup: boolean = false
  5. build() {
  6. Column() {
  7. Button('PopupOptions')
  8. .onClick(() => {
  9. this.handlePopup = !this.handlePopup
  10. })
  11. .bindPopup(this.handlePopup, {
  12. message: 'This is a popup with PopupOptions',
  13. onStateChange: (e)=> { // 返回当前的气泡状态
  14. if (!e.isVisible) {
  15. this.handlePopup = false
  16. }
  17. }
  18. })
  19. }.width('100%').padding({ top: 5 })
  20. }
  21. }

带按钮的提示气泡

通过primaryButton、secondaryButton属性为气泡最多设置两个Button按钮,通过此按钮进行简单的交互,开发者可以通过配置action参数来设置想要触发的操作。

  1. @Entry
  2. @Component
  3. struct PopupExample22 {
  4. @State handlePopup: boolean = false
  5. build() {
  6. Column() {
  7. Button('PopupOptions').margin({ top: 200 })
  8. .onClick(() => {
  9. this.handlePopup = !this.handlePopup
  10. })
  11. .bindPopup(this.handlePopup, {
  12. message: 'This is a popup with PopupOptions',
  13. primaryButton: {
  14. value: 'Confirm',
  15. action: () => {
  16. this.handlePopup = !this.handlePopup
  17. console.info('confirm Button click')
  18. }
  19. },
  20. secondaryButton: {
  21. value: 'Cancel',
  22. action: () => {
  23. this.handlePopup = !this.handlePopup
  24. }
  25. },
  26. onStateChange: (e) => {
  27. if (!e.isVisible) {
  28. this.handlePopup = false
  29. }
  30. }
  31. })
  32. }.width('100%').padding({ top: 5 })
  33. }
  34. }

自定义气泡

开发者可以使用构建器CustomPopupOptions创建自定义气泡,@Builder中可以放自定义的内容。除此之外,还可以通过popupColor等参数控制气泡样式。

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State customPopup: boolean = false
  5. // popup构造器定义弹框内容
  6. @Builder popupBuilder() {
  7. Row({ space: 2 }) {
  8. Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
  9. Text('This is Custom Popup').fontSize(15)
  10. }.width(200).height(50).padding(5)
  11. }
  12. build() {
  13. Column() {
  14. Button('CustomPopupOptions')
  15. .position({x:100,y:200})
  16. .onClick(() => {
  17. this.customPopup = !this.customPopup
  18. })
  19. .bindPopup(this.customPopup, {
  20. builder: this.popupBuilder, // 气泡的内容
  21. placement:Placement.Bottom, // 气泡的弹出位置
  22. popupColor:Color.Pink, // 气泡的背景色
  23. onStateChange: (e) => {
  24. console.info(JSON.stringify(e.isVisible))
  25. if (!e.isVisible) {
  26. this.customPopup = false
  27. }
  28. }
  29. })
  30. }
  31. .height('100%')
  32. }
  33. }

使用者通过配置placement参数将弹出的气泡放到需要提示的位置。弹窗构造器会触发弹出提示信息,来引导使用者完成操作,也让使用者有更好的UI体验。

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State customPopup: boolean = false
  5. // popup构造器定义弹框内容
  6. @Builder popupBuilder() {
  7. Row({ space: 2 }) {
  8. Image('/images/shengWhite.png').width(30).objectFit(ImageFit.Contain)
  9. Column(){
  10. Text('控制人生').fontSize(14).fontWeight(900).fontColor(Color.White).width('100%')
  11. Text('想要跟唱时,数千万歌曲任你选择,人声随心调整。').fontSize(12).fontColor('#ffeeeeee').width('100%')
  12. }
  13. }.width(230).height(80).padding(5)
  14. }
  15. build() {
  16. Row() {
  17. Text('我要K歌')
  18. Image('/images/sheng.png').width(35).objectFit(ImageFit.Contain)
  19. .onClick(() => {
  20. this.customPopup = !this.customPopup
  21. })
  22. .bindPopup(this.customPopup, {
  23. builder: this.popupBuilder,
  24. })
  25. }
  26. .margin(20)
  27. .height('100%')
  28. }
  29. }
XComponent(绘制)
菜单(Menu)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

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; }