This content originally appeared on DEV Community and was authored by Lin
Technology Stack
Appgallery Connect
Development Preparation
In the previous section, we implemented the top navigation bar list for the category page and achieved linkage between the diamond zone on the home page and the navigation bar. This section focuses on implementing a pop-up window function for the navigation bar list, requiring knowledge of custom pop-ups and maintaining data source consistency with the category page.
Functional Analysis
- Pop-up Window
Implement a custom pop-up window with synchronized data on creation.
Pass the current index to the pop-up when opening it, maintaining selection state consistency.
When selecting a category in the pop-up, synchronize the switch in the external list and ensure the selected item is centered in the list.
Code Implementation
Pop-up Creation, Data Passing, and Callback Handling
typescript
@link select: number;
@link dataSource: SplitLayoutModel[];
onItemSelected: (item: number) => void = () => {};
controller: CustomDialogController;
Pop-up Layout and Logic
typescript
build() {
Column() {
Text('All Categories')
.fontSize(14)
.margin(12)
.width('100%')
.textAlign(TextAlign.Start)
.fontColor(Color.Black);
Grid() {
ForEach(this.dataSource, (item: SplitLayoutModel, index: number) => {
GridItem() {
Column() {
// Image section
Image(item.url)
.width(40)
.height(40)
.borderRadius(20)
.border({ width: this.select === index ? 2 : 0, color: "#409EFF" });
// Text section
Text(item.txt)
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.fontSize(10)
.padding(2)
.margin({ top: 5 })
.fontColor(this.select === index ? "#FFFFFF" : "#000000")
.backgroundColor(this.select === index ? '#409EFF' : '#FFFFFF')
.borderRadius(this.select === index ? 15 : 0);
}
.onClick(() => {
this.select = this.select === index ? 0 : index;
this.onItemSelected?.(index);
this.controller.close();
});
}
});
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.layoutDirection(GridDirection.Row)
.maxCount(5)
.layoutWeight(1);
Text("Collapse")
.padding(10)
.fontSize(16)
.width('100%')
.textAlign(TextAlign.Center)
.fontColor(Color.Black)
.onClick(() => this.controller.close());
}
.margin({ top: 80 })
.width('90%')
.backgroundColor(Color.White)
.borderRadius(16)
.padding(12);
}
Callback Implementation in the List Component
typescript
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomImageGridDialog({
select: this.selectedIndex,
dataSource: this.list,
onItemSelected: (item: number) => {
this.onItemClick!(item);
}
}),
alignment: DialogAlignment.Top,
customStyle: true
});
onChange() {
this.listScroller.scrollToIndex(this.selectedIndex, true, ScrollAlign.CENTER);
}
The implementation ensures that the pop-up window, diamond zone, and list are linked: selecting an item in the pop-up updates the external list and centers the selected item, achieving seamless interaction.
This content originally appeared on DEV Community and was authored by Lin
Lin | Sciencx (2025-06-25T12:12:51+00:00) Imitation Hema – Category Navigation List Pop up (16). Retrieved from https://www.scien.cx/2025/06/25/imitation-hema-category-navigation-list-pop-up-16/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.