在HarmonyOS NEXT开发中按钮下拉列表弹窗？

Question

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

Answer 1

参考popup弹窗：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
代码可以参考：

@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+"行") 
        }) 
      }) 
    } 
    .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 
              } 
            } 
          }) 
        //需求 
        /* 
        * UI具体实现的效果是，点击按钮在按钮下面下拉一个弹窗，弹窗宽度，高度可以设置，其中高度根据数组长度来调节， 
        * 其中弹窗每一行的点击事件要能响应 
        * 最终效果图放在附件里面，请 查看。谢谢 
        * */ 
      } 
      .height('100%') 
      .width('100%') 
      .margin({ top: 0, left: -10 }) 
    } 
    .height('100%') 
  } 
}