Building Dynamic Popups in HarmonyOS for Wearable Devices

#harmonyos #bindpopup #arkts #backgroundblur

Read the original article：Building Dynamic Popups in HarmonyOS for Wearable Devices

Requirement Description

Displaying brief contextual messages without disrupting user flow is essential. This problem explores how to implement visually non-intrusive popups in HarmonyOS that appear upon user interaction, offering features like background blur and custom styling.

Background Knowledge

Popups are widely used in mobile user interfaces to provide users with immediate feedback, warnings, or confirmation prompts without interrupting the current task. In HarmonyOS, developers can create popup elements that temporarily overlay the main interface, triggered by user actions such as button taps. Key features like background blur and masked backgrounds help maintain user focus on the popup content by subtly dimming or obscuring the underlying interface. Customizable text appearance and styling options ensure that popups fit seamlessly within the app’s overall design, enhancing usability and visual appeal.

Delivers contextual information without full-screen transitions
Lightweight and easy to integrate into existing UI components
Supports customization (text style, background mask, blur effects)
Enhances user experience through focused and non-intrusive messaging
Suitable for confirmations, errors, tooltips, and brief status updates
Ideal for compact interfaces requiring minimal disruption

Implementation Steps

Button({ type: ButtonType.Normal }) {
  Row() {
    Column() {
      Text('Get Books List')
        .fontSize(12)
        .fontWeight(FontWeight.Bold)
        .fontColor('#000000')
      Rect()
        .radius(1)
        .fill('#0A59F7')
        .height(2)
        .width(75)
    }
  }
}
.width('70%')
.height('15%')
.backgroundColor('#fff8f1e3')
.borderRadius(24)

Add some codes for the popup. First, let's define a boolean value to check the visibility of the popup.

@State handlePopup: boolean = false
.onClick(() => {
  this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
  backgroundBlurStyle: BlurStyle.Thin,
  message: 'All Books will be listed',
  messageOptions: {
    textColor: Color.Black,
    font: {
      size: '12vp',
      weight: FontWeight.Bolder
    }
  },
  mask: {color:'#33000000'},
})

Code Snippet

Now, merge these two codes.

Button({ type: ButtonType.Normal }) {
  Row() {
    Column() {
      Text('Get Books List')
        .fontSize(12)
        .fontWeight(FontWeight.Bold)
        .fontColor('#000000')
      Rect()
        .radius(1)
        .fill('#0A59F7')
        .height(2)
        .width(75)
    }
  }
}
.width('70%')
.height('15%')
.backgroundColor('#fff8f1e3')
.borderRadius(24)
.onClick(() => {
  this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
  backgroundBlurStyle: BlurStyle.Thin,
  message: 'All Books will be listed',
  messageOptions: {
    textColor: Color.Black,
    font: {
      size: '12vp',
      weight: FontWeight.Bolder
    }
  },
  mask: {color:'#33000000'},
})

This code creates a custom-styled button labeled "Get Books List" using ArkTS. When the button is clicked, it toggles a state variable called handlePopup, which controls the visibility of a popup. The popup displays the message "All Books will be listed" with a thin background blur and a semi-transparent dark mask. The button has a light background, rounded corners, and a blue underline below the text for visual emphasis.

Test Results

HarmonyOS popups offer a flexible way to present brief, context-sensitive messages without disrupting user flow. With features like background blur, customizable text, and masking, they help maintain visual focus and improve usability in space-constrained mobile apps. Proper use of popups enhances user experience by enabling quick and intuitive interactions.

DEV Community