Переглянути джерело

Merge remote-tracking branch 'origin/master'

chendeben 1 рік тому
батько
коміт
fcea7027c1
1 змінених файлів з 181 додано та 20 видалено
  1. 181 20
      entry/src/main/ets/view/LocalMusic.ets

+ 181 - 20
entry/src/main/ets/view/LocalMusic.ets

@@ -1891,14 +1891,17 @@ export struct LocalMusic {
 
     Scroll() {
       Column() {
-        Column(){
-          Line().width('100%').height('100%')
+        if(!this.isShowCoverTitle()){
+          Column(){
+            Line().width('100%').height('100%')
+          }
+          .height(this.topRectHeight)
+          .backgroundColor(this.isCustomizeBg?Color.Transparent:(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor))
+          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+          TitleBar({ model: $titleBarModel })
+            .id('pup_positon_music')
         }
-        .height(this.topRectHeight)
-        .backgroundColor(this.isCustomizeBg?Color.Transparent:(this.isDarkMode?$r('app.color.title_bar_bg'):this.themeColor))
-        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-        TitleBar({ model: $titleBarModel })
-          .id('pup_positon_music')
+
         Stack() {
           Column() {
 
@@ -1971,8 +1974,14 @@ export struct LocalMusic {
             }.visibility(Visibility.None)
 
             Column() {
-              this.tabTitle()
-              this.listViewTitle()
+
+              if(this.isShowCoverTitle()){
+                // this.coverTitle()
+              }else{
+                this.tabTitle()
+                this.listViewTitle()
+              }
+
               if(this.isGridMusic){
                 this.getGridView()
               }else {
@@ -2071,7 +2080,8 @@ export struct LocalMusic {
             duration: 666,
             curve: 'ease-in-out' // 可选动画曲线
           })
-          .position({ bottom:this.isPhoneLan()?130: 168 }) // 将 Row 固定在底部
+          .position(this.isShowCoverTitle()?{ bottom:78}
+            :{ bottom:this.isPhoneLan()?130: 168 }) // 将 Row 固定在底部
 
           if(this.modeType==0){
             Column() {
@@ -2631,6 +2641,136 @@ export struct LocalMusic {
     .visibility(this.isShowTitleBar?Visibility.Visible:Visibility.None)
   }
 
+  @State currentTitleName:string = ''
+  @State currentTitleCover:string = ''
+
+  isShowCoverTitle(){
+    return (this.modeType==2||this.modeType==3)&&this.isCanBack&&!this.isGridMusic
+  }
+
+  @Builder
+  coverTitle() {
+    if(this.isShowCoverTitle()){
+      Column(){
+
+        Stack() {
+          // 居中标题
+          Text('')
+            .fontSize(18)
+            .fontColor(Color.White)
+            .align(Alignment.Center)
+          // 左右按钮
+          Row() {
+            Image($r('app.media.left_back_white'))
+              .width(28)
+              .height(28)
+              .margin({ left: 12, right: 8 })
+              .onClick(() => {
+                animateTo({ duration: 555 }, () => {
+                  this.doSwipBack()
+                })
+              })
+            Blank().flexGrow(1)
+            Blank().width(32)
+          }
+          .height(48)
+          .width('100%')
+          .alignItems(VerticalAlign.Center)
+        }
+        .height(48)
+        .width('100%')
+
+        Row() {
+          Column() {
+
+            Image(StrUtil.isEmpty(this.currentTitleCover) ? this.imageLabel : this.currentTitleCover)
+              .height(100)
+              .width(100)
+              .alt(this.imageLabel)
+              .borderRadius(8)
+              .clickEffect({level:ClickEffectLevel.HEAVY})
+
+          }
+          .alignItems(HorizontalAlign.Start)
+          .margin({left:25,top:10,bottom:10})
+
+          Column() {
+            Column() {
+              Text(this.currentTitleName)
+                .fontSize(16)
+                .maxLines(1)
+                .fontWeight(FontWeight.Bold)
+                .fontColor(Color.White)
+                .margin({ left: this.currentLyricAlignMode === 0 ? 18 : 0 })
+              if(this.modeType==3&&ArrayUtil.isNotEmpty(this.videoLocalList)){
+                Text(`艺术家:${this.videoLocalList[0].artist}`)
+                  .fontSize(16)
+                  .padding({ top: 8 })
+                  .maxLines(1)
+                  .fontWeight(FontWeight.Bold)
+                  .fontColor(Color.White)
+                  .margin({ left: this.currentLyricAlignMode === 0 ? 18 : 0 })
+              }
+              Row() {
+                Text(`共${this.videoLocalList.length}首歌`)
+                  .fontSize(13)
+                  .fontWeight(FontWeight.Bold)
+                  .padding({ top: 8 })
+                  .fontColor(Color.White)
+                  .margin({ left: this.currentLyricAlignMode === 0 ? 18 : 0 })
+                Blank()
+
+              }
+
+            }
+            .height('100%')
+            .width('100%')
+            .justifyContent(FlexAlign.Center)
+            .alignItems(HorizontalAlign.Start)
+
+          }
+          .height('100%')
+          .layoutWeight(1)
+          .margin({left:20})
+        }
+
+        this.listViewTitle()
+
+      }
+
+      .backgroundImage(this.getCoverTitleBg())
+      .height(250)
+      .width('100%')
+      .backgroundImageSize({ height: '100%', width: '100%' })
+      .backgroundBlurStyle(this.isCustomizeBg?BlurStyle.NONE:BlurStyle.BACKGROUND_ULTRA_THICK)
+      .padding({top:this.topRectHeight ,bottom:this.bottomBarHeight+48  })
+      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+      .justifyContent(FlexAlign.SpaceBetween)
+      // .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
+      .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+        TransitionEffect.scale({ x: 0, y: 0 })  ))
+      .clickEffect({level:ClickEffectLevel.LIGHT})
+      // .animation({
+      //   duration: 666,
+      //   curve: 'ease-in-out' // 可选动画曲线
+      // })
+    }
+
+  }
+
+  getCoverTitleBg(): ResourceStr | image.PixelMap{
+    if(this.isCustomizeBg)
+      return ('rgba(255,255,255,0.2)')
+    if(this.isDarkMode)
+      return $r('app.color.user_center_card_background')
+    if(StrUtil.isEmpty(this.currentTitleCover)){
+      return this.imageLabel
+    }else{
+      return this.currentTitleCover
+    }
+
+  }
+
   @Builder
   listViewTitle() {
     Column() {
@@ -3513,10 +3653,11 @@ export struct LocalMusic {
     this.pinchValue = 1;
     this.scaleValue = 1;
   }
-    @Builder
+  @Builder
   getListView() {
 
     List({ scroller: this.listScroller }) {
+      ListItemGroup({ header: this.coverTitle() }) {
       LazyForEach(this.dataSource, (item: VideoItem, index: number) => {
         ListItem() {
           Column() {
@@ -3549,17 +3690,17 @@ export struct LocalMusic {
         }
         // .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
         .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
-          TransitionEffect.scale({ x: 0, y: 0 })  ))
-        .clickEffect({level:ClickEffectLevel.LIGHT})
+          TransitionEffect.scale({ x: 0, y: 0 })))
+        .clickEffect({ level: ClickEffectLevel.LIGHT })
         .swipeAction((
-          (this.modeType==0||this.modeType==1 ||((this.modeType==3||this.modeType==2)&&this.isCanBack))
+          (this.modeType == 0 || this.modeType == 1 || ((this.modeType == 3 || this.modeType == 2) && this.isCanBack))
             && item.type !== CommonConstants.TYPE_IS_CSJAD &&
             !this.isHistory) ? { end: this.DeleteButton(item, index, item.filePath) } : {}) //左滑
         .onClick(() => {
-          if(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR){
+          if (this.isMultiSelect && item.type !== CommonConstants.TYPE_IS_DIR) {
             const isChecked = this.selectedFiles.some(x => x.filePath == item.filePath);
             this.handleFileSelection(item, !isChecked);
-          }else{
+          } else {
             this.doPlay(item, index)
           }
 
@@ -3629,13 +3770,13 @@ export struct LocalMusic {
                 if (clickPercentY > 0.8 && !this.listScroller.isAtEnd()) {
                   let scrollVelocity = clickPercentY > 0.9 ? 4 : 2
                   if (this.listMaxScrollOffsetY - curListOffset.yOffset > scrollVelocity + 5) {
-                    this.listScroller.scrollTo({xOffset: 0, yOffset: curListOffset.yOffset += scrollVelocity})
+                    this.listScroller.scrollTo({ xOffset: 0, yOffset: curListOffset.yOffset += scrollVelocity })
 
                   }
                 } else if (clickPercentY < 0.2 && curListOffset.yOffset >= 0) {
                   let scrollVelocity = clickPercentY < 0.1 ? 4 : 2
                   if (curListOffset.yOffset > scrollVelocity + 5) {
-                    this.listScroller.scrollTo({xOffset: 0, yOffset: curListOffset.yOffset -= scrollVelocity})
+                    this.listScroller.scrollTo({ xOffset: 0, yOffset: curListOffset.yOffset -= scrollVelocity })
                   }
                 }
 
@@ -3670,6 +3811,7 @@ export struct LocalMusic {
 
       }, (item: VideoItem) => item.filePath)
     }
+    }
     .scale({x:this.scaleValue,y:this.scaleValue,z:1})
     .gesture(PinchGesture({ fingers: 2 })
       .onActionEnd((event: GestureEvent)=>{
@@ -3682,7 +3824,8 @@ export struct LocalMusic {
 
       }))
     // .divider({ strokeWidth: 1, color: this.isDarkMode? '#333333':'#ffe9f0f0' })
-    .margin({ bottom: this.isCoverOpacity() ? 80 : 166 })
+    .margin({ bottom: this.isCoverOpacity() ? (this.isShowCoverTitle()? 20:80)
+      :(this.isShowCoverTitle()? 70:166) })
     .cachedCount(6)
     .borderRadius(20)
     .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
@@ -3871,6 +4014,10 @@ export struct LocalMusic {
           Utility.doSortListAscending(mList)
           this.isCanBack = true
           this.titleBarModel.setTitleName(item.name)
+          this.currentTitleName = '艺术家:'+ item.name
+          if(item.pixelMapPath){
+            this.currentTitleCover = item.pixelMapPath
+          }
           this.updateListData(mList)
           this.titleBarModel.setLeftIconMain($r('app.media.left_back_white'))
         }
@@ -3901,6 +4048,10 @@ export struct LocalMusic {
           Utility.doSortListAscending(albumList)
           this.isCanBack = true
           this.titleBarModel.setTitleName(item.name)
+          this.currentTitleName = '专辑:'+item.name
+          if(item.pixelMapPath){
+            this.currentTitleCover = item.pixelMapPath
+          }
           this.updateListData(albumList)
           this.titleBarModel.setLeftIconMain($r('app.media.left_back_white'))
           this.mScrollMap.set(item.name, this.selectedIndex)
@@ -6248,6 +6399,11 @@ export struct LocalMusic {
           }
         }
       }
+      .visibility(this.isPhoneLan()&&this.isAutoHide?Visibility.None:Visibility.Visible)
+      .animation({
+        duration: 666,
+        curve: 'ease-in-out' // 可选动画曲线
+      })
       .backgroundColor(Color.Transparent)
       .margin({ left:10,right:10 })
       .onClick(async () => {
@@ -6317,6 +6473,11 @@ export struct LocalMusic {
             }
           })
       }
+      .visibility(this.isPhoneLan()&&this.isAutoHide?Visibility.None:Visibility.Visible)
+      .animation({
+        duration: 666,
+        curve: 'ease-in-out' // 可选动画曲线
+      })
       .backgroundColor(Color.Transparent)
       .margin({ right: 10, left: 20 })
       .onClick(() => {
@@ -6510,7 +6671,7 @@ export struct LocalMusic {
 
           this.playProgressView()
         }
-        .position({bottom:48})
+        .position({left:40,bottom:48})
 
       }else{
         this.BottomControl()