效果图

实现思路

1 通过@Builder 实现模态 ui 开发

1. 通过鸿蒙内置的 bindSheet api 实现半模态框展示

完整代码

@State playerListCreateState:boolean = false
@State songListTitle:string = ''
[@Builder](/user/Builder)
PlayerListCreateBuilder() {
  Column() {
    Row(){
      Text('取消').fontSize(15) .onClick(() =>  this.playerListCreateState = false)
      Text("创建新建歌单").fontSize(18).fontWeight(500)
      Text('创建').fontSize(15).onClick(async () => {
        const serverData:ApiResultType = await request({
          method: 'post',
          url: '/songlist/create',
          data: {title: this.songListTitle} as ESObject
        })
        toast(serverData.msg)
        if (serverData.state===201)  {
          // 关闭弹窗
          this.playerListCreateState = false
          // 更新列表
          this.onListSong()
        }
      })
    }.width('90%').justifyContent(FlexAlign.SpaceBetween)

    TextInput({ placeholder: "请输入歌单名称",text:$$this.songListTitle })
      .width('90%')
      .height(50)
      .margin({ bottom: 20,top:20 })
      .onChange((value: string) => {
        // this.playlistName = value
      })
  }
  .padding({ left: 18, right: 18, top: 22 })
  .width('100%')
  .height('100%')
  .backgroundColor('#f1f5f8')
}



[@Builder](/user/Builder)
PlayListBuilder() {
  Row() {
    Row() {
      Text('歌单').fontWeight(700).fontSize(20).margin({ right: 10, left: 10 })
      Text(this.listSong.length.toString()).fontSize(20).fontColor(Color.Gray)
    }
    Image($r('app.media.profile_plus')).width(20).margin({ right: 10 })
      .onClick(() => this.playerListCreateState = true)
      // 💕 核心代码
      .bindSheet(this.playerListCreateState, this.PlayerListCreateBuilder(), {
        height: 160,
        dragBar: false,
        showClose: false,
        onDisappear: () => this.playerListCreateState = false
      })
  }
  .height(50)
  .width('100%')
  .margin({ bottom: 10 })
  .backgroundColor(Color.White)
  .justifyContent(FlexAlign.SpaceBetween)

}