Read the original article：HarmonyOS Next: How To Use DialogBox And Menu
Introduction
This article demonstrates how to create a simple interactive Menu and DialogBox in HarmonyOS NEXT using ArkTS. When the user clicks a button, a Menu appears to select a country. Based on the selected country, a DialogBox then shows the corresponding cities to choose from. The cities displayed dynamically update according to the chosen country, showcasing how to build responsive and connected UI components with ArkTS.
Why Menu and DialogBox?
Menus and dialogs are important UI components that help users make choices. While HarmonyOS NEXT offers powerful declarative UI features, building connected components that respond to user input can sometimes be complex. This example shows a simple and minimal-code way to handle such interactivity.
Implementation
First, we need to define some state variables that help us build a dynamic interface. Using @State, we declare reactive variables such as select to manage the selection state, selectedCountry to keep track of the currently chosen country, selectedCity to store the chosen city, and selection to hold a default value for the country selection. These states allow the UI to update automatically whenever the user makes a selection, ensuring a smooth and connected experience.
@State select: boolean = true
@State selectedCountry : string = "Country"
@State selectedCity : string | string[]= "City"
@State selection : string = "Germany"
After setting up the states, we define the menu items inside the MyMenu builder function. Here, we create a Menu component containing a MenuItemGroup title "Countries" with options for Turkey, Poland, Germany, and France.
Each MenuItem shows an icon and the country name. When a user selects a country, the onChange event updates the selectedCountry state and reset the city selection to the default "City". The menu also has rounded corners and a width of 65%.
This way, when the user picks a country, the app’s state updates, and the list of cities can adjust automatically based on that choice.
@Builder
MyMenu() {
Menu() {
MenuItemGroup({header : 'Countries'}){
MenuItem({ startIcon: $r("app.media.foreground"), content: "Turkey" }).selected(this.select).onChange((selected) => {
this.selectedCountry = "Turkey"
this.selectedCity = "City"
})
MenuItem({ startIcon: $r("app.media.foreground"), content: "Poland" }).selected(this.select).onChange((selected) => {
this.selectedCountry = "Poland"
this.selectedCity = "City"
})
MenuItem({ startIcon: $r("app.media.foreground"), content: "Germany" }).selected(this.select).onChange((selected) => {
this.selectedCountry = "Germany"
this.selectedCity = "City"
})
MenuItem({ startIcon: $r("app.media.foreground"), content: "France" }).selected(this.select).onChange((selected) => {
this.selectedCountry = "France"
this.selectedCity = "City"
})
}
}.borderRadius(30).width('65%')
}
Next, in the build() function, we define the user interface. There are two buttons for selecting a country and a city. The first button displays the currently selected country and is connected to the previously defined country selection menu using bindMenu. This way, when the user clicks the button, the country selection menu opens
Button(`${this.selectedCountry}`)
.bindMenu(this.MyMenu)
.margin({
top:20
})
The second button shows the selected city. When this button is clicked, the showTextPickerDialog function is called to open a dialog box. This dialog displays a list of cities based on the selected country. In other words, when the selected country changes, the cities update automatically to match that country.
Button(`${this.selectedCity}`)
.margin(30)
.onClick(() => {
this.getUIContext().showTextPickerDialog({
range: this.selectedCountry == "Germany" ? this.gerCity : this.selectedCountry == "Turkey" ? this.trCity : this.selectedCountry == "Poland" ? this.plCity : this.frCity,
selected: this.selectm,
onAccept: (value: TextPickerResult) => {
this.selectedCity = value.value
}
})
})
The text on both buttons updates according to the user’s selections, so the buttons always reflect the current choice. When the user selects a new country or city, the button labels change to show the selected values, providing up-to-date information.
Conclusion
This example shows how easy it is to create interactive menus and dialog boxes with ArkTS in HarmonyOS NEXT. Using state variables keeps the UI responsive and dynamic, making development smoother and user experiences better.
Top comments (0)