In the development of HarmonyOS applications, the Select dropdown menu is a frequently used interactive control. It can efficiently display multiple options within a limited space, providing a dropdown selection menu that enables users to choose among multiple options.
Core implementation techniques:
Core code example:
// xxx.ets
@Entry
@Component
struct SelectExample {
@State text: string = "TTTTT";
@State index: number = 2;
@State space: number = 8;
@State arrowPosition: ArrowPosition = ArrowPosition.END;
build() {
Column() {
Select([{ value: 'aaa', icon: $r("app.media.selection") },
{ value: 'bbb', icon: $r("app.media.selection") },
{ value: 'ccc', icon: $r("app.media.selection") },
{ value: 'ddd', icon: $r("app.media.selection") }])
.selected(this.index)
.value(this.text)
.font({ size: 16, weight: 500 })
.fontColor('#182431')
.selectedOptionFont({ size: 16, weight: 400 })
.optionFont({ size: 16, weight: 400 })
.space(this.space)
.arrowPosition(this.arrowPosition)
.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
.optionWidth(200)
.optionHeight(300)
.onSelect((index: number, text? : string | undefined) => {
console.info('Select:' + index);
this.index = index;
if (text) {
this.text = text;
}
})
.avoidance(AvoidanceMode.COVER_TARGET);
}.width('100%')
}
}
Guide to Avoiding Pitfalls:
It is worth noting that when using the select dropdown menu, the select passes an array of objects. When the number of required items in the dropdown menu increases, you can directly import the array of objects and render the page data through the map method.
Core code example: (Product Filter)
// Define option types interface Option {
name: string,
icon: Resource
}
@Entry
@Component
struct ProductPage {
@State selectedIndex: number = 0
@State options: Option[] = [
{
name: 'Latest Products',
icon: $r('app.media.new')
},
{
name: 'Price: Low to High',
icon: $r('app.media.price_up')
},
{
name: 'Best Sellers',
icon: $r('app.media.hot')
} ]
build() {
Column() {
// Implementation of the Select component Select(this.options.map(opt => ({
value: opt.name,
icon: opt.icon // Icon and text combination })))
.selected(this.selectedIndex)
.onSelect((index: number) => {
this.selectedIndex = index
this.filterProducts() // Trigger the filtering logic })
.selectedOptionFont({ size: 18, weight: FontWeight.Bold })
.optionFont({ size: 16 })
.width('60%')
// Product list display... }
}
// Filtering logic filterProducts() {
switch(this.selectedIndex) {
case 0: // Logic for latest products
case 1: // Logic for price sorting
case 2: // Logic for sales volume sorting }
}
}
The Select component perfectly aligns with the declarative UI paradigm of HarmonyOS, achieving automatic UI updates through data binding. Coupled with icon integration and style customization capabilities, developers can quickly build both aesthetically pleasing and powerful filtering controls. In scenarios such as e-commerce and settings pages, the judicious use of Select can significantly enhance user operation efficiency, making it an essential skill for HarmonyOS application development.
Top comments (0)