HarmonyOS 按钮下拉列表弹窗？

Question

如题：HarmonyOS 按钮下拉列表弹窗？

Answer 1

问题场景

UI具体实现的效果是，点击按钮在按钮下面下拉一个弹窗，弹窗宽度，高度可以设置，其中高度根据数组长度来调节， 其中弹窗每一行的点击事件要能响应

参考popup弹窗：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-popup-V5

代码可以参考

@Entry
@Component
struct Index {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false
  @State message: string = 'Hello World';
  @State titleArray: Array<string> = [" 人员信息", " 税票信息",
    " 扩展权限", " 密码修改",
    " 登录方式", " 日志上传",
    " 缓存清理", " 意见反馈",
    " 隐私安全", " 版本信息",
    " 注销退出"];
  @State titleImageArray: Array<string> = ["app.media.more_ry", "app.media.more_sp",
    "app.media.more_qx", "app.media.more_mm",
    "app.media.more_dl", "app.media.more_rz",
    "app.media.more_clean", "app.media.more_fk",
    "app.media.more_ys", "app.media.more_bb",
    "app.media.more_tc"];

  // popup构造器定义弹框内容
  @Builder
  popupBuilder() {
    Column({ space: 2 }) {
      ForEach(this.titleImageArray,(titleImage:string,index:number)=>{
        Row(){
          Image($r(titleImage))
            .width(40)
            .height(40)
            .margin({ left: -5 })
          Text(this.titleArray[index])
            .fontSize(30)
        }
        .onClick(()=>{
          console.log("点击了第"+index+"行")
        })
      })
    }
    // .width(200)
    // .height(100)
    .padding(5)
  }

  build() {
    Row() {
      Column() {
        Button('点我下方弹窗')
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize('18fp')
          .margin({ top: 0, left: 200 })
          .onClick(() => {
            this.customPopup = !this.customPopup
          })
          .bindPopup(this.customPopup, {
            builder: this.popupBuilder,
            placement: Placement.Top,
            mask: { color: '#33000000' },
            popupColor: Color.Black,
            enableArrow: true,
            showInSubWindow: false,
            onStateChange: (e) => {
              if (!e.isVisible) {
                this.customPopup = false
              }
            }
          })
        // .backgroundColor(Color.Black)
        // .position({ x: 80, y: 300 })
        //需求
        /*
        * UI具体实现的效果是，点击按钮在按钮下面下拉一个弹窗，弹窗宽度，高度可以设置，其中高度根据数组长度来调节，
        * 其中弹窗每一行的点击事件要能响应
        * 最终效果图放在附件里面，请 查看。谢谢
        * */
      }
      .height('100%')
      .width('100%')
      .margin({ top: 0, left: -10 })
    }
    .height('100%')
  }
}