当前位置：首页 > article >正文

鸿蒙开发：自制原生下拉框

article 2024/10/3 0:32:23

最近一个项目需求，要求实现下拉框设计。跑鸿蒙原生组件挑了半天，发现都不符合甲方要求。无奈啊，只能自己自制，以下是基本代码，如有更好设计，欢迎指正！

整体思路就是当鼠标进入选中项1范围时，选中项2+下拉框出现，同时选中项1消失；当选择下拉框选项或鼠标移出选中项2+下拉框范围后，选中项2+下拉框消失，同时选中项1出现。

下拉菜单箭头

/**
 * 下拉菜单箭头
 * @param src：图片路径
 * @param x：左边距
 * @param y：上边距
 * @param width：宽
 * @param height：高
 */
@Builder
function ImageBuilder(src: string,x: number, y: number, width: number, height: number) {
  Image(src)
    .position({x:px2vp(x),y:px2vp(y)})
    .width(px2vp(width))
    .height(px2vp(height))
}

选中项

@Builder
  Title(){
    Text(this.message)
      .position({x:px2vp(45),y:px2vp(20)})
      .width(px2vp(200))
      .height(px2vp(40))
      .fontSize(px2vp(40))
      .fontWeight(400)
      .fontColor('#262B2F')
      .textAlign(TextAlign.Start)
      .fontStyle(FontStyle.Normal)
      .onClick(()=>{
        this.isHover = !this.isHover
      })
  }

下拉框

Flex(){
      if(!this.isHover){
        Row() {
          this.Title()
          ImageBuilder('/pictures/Vector_right.png',276,25,20,30)
        }
        .height(px2vp(80))
        .width(px2vp(330))
        .backgroundColor('#ffbb75ec')
        .borderRadius(px2vp(50))
        .onHover((isHover: boolean)=>{
          console.log('dfgrjwkgwhgop')
          this.isHover = isHover
        })
      }

      if(this.isHover){
        Column() {
          this.Title()
          ImageBuilder('/pictures/Vector_down.png',274,33,30,20)

          Line()
            .position({ x: px2vp(20), y: px2vp(79) })
            .width(px2vp(290))
            .height(px2vp(2))
            .backgroundColor('#9CB6CD')
          List(){
            ForEach(this.devices,(item: string)=>{
              ListItem(){
                Text(item)
                  .width(px2vp(230))
                  .height(px2vp(62))
                  .fontSize(px2vp(40))
                  .fontWeight(400)
                  .fontColor('#262B2F')
                  .textAlign(TextAlign.Start)
                  .fontStyle(FontStyle.Normal)
                  .onClick(()=> {
                    this.isHover = false
                    this.message = item
                  })
              }
            })
          }
          .position({x:px2vp(45),y:px2vp(90)})
          .height(px2vp(600))
        }
        .height(px2vp(650))
        .width(px2vp(330))
        .backgroundColor('#ffbb75ec')
        .borderRadius(px2vp(40))
        .onHover((isHover: boolean)=>{
          this.isHover = isHover
        })
      }
    }
 }