O atributo Popup pode ser vinculado a um componente para exibir uma janela de popup, configurando o conteúdo, a lógica de interação e o estado de exibição. É usado principalmente para gravação de tela, lembretes de informações e outros estados de exibição.

Há dois tipos de popups: PopupOptions, fornecido pelo sistema, e CustomPopupOptions, que pode ser personalizado pelo desenvolveder. O PopupOptions permite configurar botões primários e secundários, enquanto o CustomPopupOptions permite definir o conteúdo do popup através do parâmetro builder.

2. Popup de Texto

Os popups de texto são usados para exibir mensagens informativas sem interações. O atributo Popup deve ser vinculado a um componante, e quando o parâmetro show em bindPopup for true, o popup será exibido.

No exemplo abaixo, o popup é acionado ao clicar no botão, altenrando o valor booleano handlePopup.

@Entry
@Component
struct ExemploPopup {
  @State mostrarPopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.mostrarPopup = !this.mostrarPopup
        })
        .bindPopup(this.mostrarPopup, {
          message: 'Este é um popup com PopupOptions',
        })
    }.width('100%').padding({ top: 5 })
  }
}

3. Adicionando Eventos de Mudança de Estado ao Popup

Você pode adicionar um callback de evento de mudança de estado ao popup usando o parâmetro onStateChange, permitindo que você determine o estado atual do popup.

@Entry
@Component
struct ExemploPopup {
  @State mostrarPopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions')
        .onClick(() => {
          this.mostrarPopup = !this.mostrarPopup
        })
        .bindPopup(this.mostrarPopup, {
          message: 'Este é um popup com PopupOptions',
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.mostrarPopup = false
            }
          }
        })
    }.width('100%').padding({ top: 5 })
  }
}

4. Popup com Botões

Você pode configurar até dois botões no popup usando os atributos primaryButton e secondaryButton, permitindo interações simples. Os botões podem ser configurados com ações específicas.

@Entry
@Component
struct ExemploPopupComBotao {
  @State mostrarPopup: boolean = false

  build() {
    Column() {
      Button('PopupOptions').margin({ top: 200 })
        .onClick(() => {
          this.mostrarPopup = !this.mostrarPopup
        })
        .bindPopup(this.mostrarPopup, {
          message: 'Este é um popup com PopupOptions',
          primaryButton: {
            value: 'Confirmar',
            action: () => {
              this.mostrarPopup = !this.mostrarPopup
              console.info('Botão confirmar clicado')
            }
          },
          secondaryButton: {
            value: 'Cancelar',
            action: () => {
              this.mostrarPopup = !this.mostrarPopup
            }
          },
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.mostrarPopup = false
            }
          }
        })
    }.width('100%').padding({ top: 5 })
  }
}

5. Popup Personalizado

Os desenvolvedores podem criar popups personalizados usando o construtor CustomPopupOptions. O conteúdo do popup pode ser definido no método @Builder, e você pode controlar o estilo do popup com parâmetros como popupColor.

@Entry
@Component
struct Index {
  @State popupPersonalizado: boolean = false

  @Builder construtorPopup() {
    Row({ space: 2 }) {
      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
      Text('Este é um Popup Personalizado').fontSize(15)
    }.width(200).height(50).padding(5)
  }

  build() {
    Column() {
      Button('CustomPopupOptions')
        .position({x:100,y:200})
        .onClick(() => {
          this.popupPersonalizado = !this.popupPersonalizado
        })
        .bindPopup(this.popupPersonalizado, {
          builder: this.construtorPopup,
          placement: Placement.Bottom,
          popupColor: Color.Pink,
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.popupPersonalizado = false
            }
          }
        })
    }.height('100%')
  }
}

A configuração do parâmetro placement permite posicionar o popup onde for necessário. O construtor do popup dispara a mensagem de dica, orientando o usuário a completar a ação, melhorando a experiência de interface do usuário.

@Entry
@Component
struct Index {
  @State popupPersonalizado: boolean = false

  @Builder construtorPopup() {
    Row({ space: 2 }) {
      Image('/images/shengWhite.png').width(30).objectFit(ImageFit.Contain)
      Column() {
        Text('Controle da Vida').fontSize(14).fontWeight(900).fontColor(Color.White).width('100%')
        Text('Quando quiser cantar, escolha entre milhões de músicas e ajuste a voz conforme desejar.').fontSize(12).fontColor('#ffeeeeee').width('100%')
      }
    }.width(230).height(80).padding(5)
  }

  build() {
    Row() {
      Text('Quero Cantar')
      Image('/images/sheng.png').width(35).objectFit(ImageFit.Contain)
        .onClick(() => {
          this.popupPersonalizado = !this.popupPersonalizado
        })
        .bindPopup(this.popupPersonalizado, {
          builder: this.construtorPopup,
        })
    }.margin(20).height('100%')
  }
}