How to pop up different context menus based on different list items

Read the original article：How to pop up different context menus based on different list items

How To Pop Up Different Context Menus Based On Different List Items

Problem Description

How to bind a context menu to the Item of the List component, determine whether to display the context menu based on conditions, and pop up different context menus depending on the list items?

Background

1. List: A list contains a series of items of equal width. It is suitable for presenting similar data, such as images and text, in a continuous, multi-line format.
2. bindContextMenu: binds a menu to the component. The triggering method is long press or right click. The pop-up menu items need to be customized.

Solution

First, the Item of the List component is judged so that the menu pops up for even-numbered items and not for odd-numbered items. The menu pops up by long pressing and the content of the pop-up menu is also different. For details, please refer to the following sample code:

@Entry
@Component
struct Index {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State listData: number[] = [0, 0, 0]

  // @Builder decorator: Build context menu component
  @Builder
  MenuBuilder(num: number, flag: boolean) {
    // Determine whether to display the menu according to the flag parameter
    if (flag) {
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
        ForEach(this.listData, (item: number, index) => {
          Column() {
            Row() {
              Image($r('app.media.startIcon')).width(20).height(20).margin({ right: 5 })
              Text(`Menu${num}`).fontSize(20)
            }
            .width('100%')
            .height(30)
            .justifyContent(FlexAlign.Center)
            .align(Alignment.Center)

            // If it is not the last menu item, show the separator line
            if (index !== this.listData.length - 1) {
              Divider().height(10).width('80%').color('#ccc')
            }
          }.padding(5).height(40)
        })
      }.width(100)
    }
  }

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          // Determine whether to bind the context menu based on item parity
          if (item % 2 === 0) {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF) // Bind the context menu, use MenuBuilder to generate the menu, and long press to trigger
                .bindContextMenu(this.MenuBuilder(item, true), ResponseType.LongPress)
            }
          } else {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
                .bindContextMenu(this.MenuBuilder(item, false), ResponseType.LongPress)
            }
          }
        }, (item: string) => item)
      }.width('90%')
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

Code Running Effect Diagram

Restrictions and Limitations

This example supports API Version 19 Release and above.

This example supports HarmonyOS SDK Version 5.1.1 Release and above.

This example requires DevEco Studio Version 5.1.1 Release and above to compile and run.

Written by Recep Sadullah Yegin