HarmonyOS 按钮下拉列表弹窗

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

HarmonyOS
2024-11-27 09:37:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

​参考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%') 
  } 
}
分享
微博
QQ
微信
回复
2024-11-27 14:59:22
相关问题
HarmonyOS 怎么实现下拉分类列表
255浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
223浏览 • 1回复 待解决
HarmonyOS 首页下拉刷新异常
345浏览 • 1回复 待解决
HarmonyOS使用Refresh下拉刷新问题
893浏览 • 1回复 待解决
HarmonyOS 组件的下拉刷新问题
499浏览 • 1回复 待解决