封面顶部功能

entry/src/main/ets/pages/SettingPage.ets

@@ -42,6 +42,7 @@ export struct SettingPage {
   static readonly IS_SHOW_ALLBAR: string = 'IS_SHOW_ALLBAR';
   static readonly IS_SHOW_TITLTBAR: string = 'IS_SHOW_TITLTBAR';
   static readonly IS_CIRCLE_BTN: string = 'isCircleBtn';
+  static readonly IS_COVER_TOP: string = 'IS_COVER_TOP';
   public static THEME_COLOR_KEY: string = 'THEME_COLOR';
   public static TWO_FINGER_TYPE: string = 'twoFingerType';
   public static THEME_COLOR_LIST: Array<ThemeColorItem> = [
@@ -91,6 +92,7 @@ export struct SettingPage {
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
   @State isSavePlayMode: boolean = true
+  @State isCoverTop: boolean = true
   @State customizeBgPath: string | undefined = '';
   context = getContext(this);
   @State showCoverApiDialog: boolean = false
@@ -198,7 +200,7 @@ export struct SettingPage {
     this.isMemoryLastPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_LAST_PLAY, false)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
     this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, false)
-
+    this.isCoverTop = PreferencesUtil.getBooleanSync(SettingPage.IS_COVER_TOP, true)
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
     // 只用 themeMode 控制主题
@@ -688,6 +690,31 @@ export struct SettingPage {
             .height(55)
             .clickEffect({ level: ClickEffectLevel.HEAVY })
 
+            Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+            // 封面顶部
+            Row() {
+              Text('封面顶部')
+                .margin({ left: 18 })
+                .fontSize(15)
+                .fontColor(Color.Gray)
+                .fontWeight(480)
+                .layoutWeight(1)
+              Toggle({ type: ToggleType.Switch, isOn: this.isCoverTop })
+                .selectedColor(this.themeColor)
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isCoverTop = checked;
+                  PreferencesUtil.put(SettingPage.IS_COVER_TOP, this.isCoverTop)
+                  this.sendChangeEvent()
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
+            .clickEffect({ level: ClickEffectLevel.HEAVY })
+
+
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 

entry/src/main/ets/view/LocalMusic.ets

@@ -567,6 +567,7 @@ export struct LocalMusic {
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
+    this.isCoverTop = PreferencesUtil.getBooleanSync(SettingPage.IS_COVER_TOP, true)
     this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, false)
     if (this.isSavePlayMode) {
       this.playType = PreferencesUtil.getNumberSync('musicPlayType', 0)
@@ -6092,14 +6093,14 @@ export struct LocalMusic {
 
       }
       .width('100%')
-      .margin({ left:10,right:10 })
+      .margin({ left:10,right:10,bottom:this.isCoverOpacity()?0:20 })
       .justifyContent(FlexAlign.Center)
       //播放进度条
       this.playProgressView()
 
 
     }
-    .position({ bottom:this.isCoverOpacity()?55: 80 }) // 将  固定在底部
+    .position({ bottom:this.isCoverOpacity()?55: 100 }) // 将  固定在底部
 
   }
 
@@ -6218,33 +6219,13 @@ export struct LocalMusic {
   }
   @State isAutoHide: boolean = true//手机横屏自动隐藏播放进退条，点击屏幕可以显示，倒计时4秒后又自动隐藏
   @State isCoverRectangle: boolean = false
-
+  @State isCoverTop: boolean = true
   @Builder
   CoverInfo() {
     Column() {
 
       // 第一个
-      Column({ space: 8 }) {
-        Text(this.name)
-          .fontSize(this.name.length >= 28 || this.isCoverOpacity() ? 18 : 22)
-          .fontWeight(FontWeight.Bold)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-          .maxLines(1)
-          .width('80%')
-          .textAlign(TextAlign.Center)
-          .fontColor(Color.White)
-        Text(this.artist + '  ' + this.currentSong?.album)
-          .fontSize(this.isCoverOpacity() ? 12 : 15)
-          .textOverflow({ overflow: TextOverflow.Ellipsis })
-          .fontColor(Color.White)
-          .textAlign(TextAlign.Center)
-          .width('60%')
-          .maxLines(1)
-      }
-      .margin({ top: this.isCoverOpacity() ? 20 : 30 })
-      .justifyContent(FlexAlign.Center)
-      .zIndex(1)
-      .visibility(this.isCoverOpacity() ? Visibility.None : Visibility.Visible)
+      this.musicNameInfo(this.isCoverTop)
 
       Stack() {
         // 唱片旋转效果
@@ -6272,29 +6253,60 @@ export struct LocalMusic {
             color: this.randomColor
           })
 
+        Column(){
+          if(this.isCoverTop&&!this.isCoverOpacity()&&this.isCoverRectangle){
+            Image(StrUtil.isEmpty(this.cover) ? this.imageLabel : this.cover)
+              // .height(this.isCoverOpacity() ? 250 : this.isCoverRectangle ? 320 : 162)
+              .width('100%')
+              .objectFit(this.isCoverRectangle ? ImageFit.Contain : ImageFit.Auto)
+              .alt(this.imageLabel)
+              .margin({ right: 8, left: 8 })
+              .aspectRatio(1)
+              .visibility(this.isPuraWP()?Visibility.None:Visibility.Visible)
+              .borderRadius(this.isCoverRectangle ? 20 : '100%')
+              .clickEffect({level:ClickEffectLevel.MIDDLE})
+              .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+                TransitionEffect.scale({ x: 0, y: 0 })  ))
+              .align(Alignment.Center)//
+              .clip(true)
+              .rotate({
+                x: 0,
+                y: 0,
+                z: 1,
+                angle: this.rotateAngle
+              })
+              .onClick(() => {
+                this.getImageColor()
+              })
+          }else{
+            Image(StrUtil.isEmpty(this.cover) ? this.imageLabel : this.cover)
+              .height(this.isCoverOpacity() ? 250 : this.isCoverRectangle ? 320 : 162)
+              .objectFit(this.isCoverRectangle ? ImageFit.Contain : ImageFit.Auto)
+              .alt(this.imageLabel)
+              .margin({ right: 20, left: 20 })
+              .aspectRatio(1)
+              .visibility(this.isPuraWP()?Visibility.None:Visibility.Visible)
+              .borderRadius(this.isCoverRectangle ? 20 : '100%')
+              .clickEffect({level:ClickEffectLevel.MIDDLE})
+              .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+                TransitionEffect.scale({ x: 0, y: 0 })  ))
+              .align(Alignment.Center)//
+              .clip(true)
+              .rotate({
+                x: 0,
+                y: 0,
+                z: 1,
+                angle: this.rotateAngle
+              })
+              .onClick(() => {
+                this.getImageColor()
+              })
+          }
+
+
+          this.musicNameInfo(!this.isCoverTop)
+        }
 
-        Image(StrUtil.isEmpty(this.cover) ? this.imageLabel : this.cover)
-          .height(this.isCoverOpacity() ? 250 : this.isCoverRectangle ? 320 : 162)
-          .objectFit(this.isCoverRectangle ? ImageFit.Contain : ImageFit.Auto)
-          .alt(this.imageLabel)
-          .margin({ right: 20, left: 20 })
-          .aspectRatio(1)
-          .visibility(this.isPuraWP()?Visibility.None:Visibility.Visible)
-          .borderRadius(this.isCoverRectangle ? 20 : '100%')
-          .clickEffect({level:ClickEffectLevel.MIDDLE})
-          .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
-            TransitionEffect.scale({ x: 0, y: 0 })  ))
-          .align(Alignment.Center)//
-          .clip(true)
-          .rotate({
-            x: 0,
-            y: 0,
-            z: 1,
-            angle: this.rotateAngle
-          })
-          .onClick(() => {
-            this.getImageColor()
-          })
         // 唱针以左上角为点选择逆时针40度
         Image($r('app.media.ic_music_cover_hand'))
           .height(130)
@@ -6340,6 +6352,30 @@ export struct LocalMusic {
 
   }
 
+  @Builder
+  private musicNameInfo(isTop:boolean) {
+    Column({ space: 8 }) {
+      Text(this.name)
+        .fontSize(this.name.length >= 28 || this.isCoverOpacity() ? 18 : 22)
+        .fontWeight(FontWeight.Bold)
+        .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
+        .maxLines(1)
+        .width(isTop?'80%':'99%')
+        .textAlign(TextAlign.Center)
+        .fontColor(Color.White)
+      Text(this.artist + '  ' + this.currentSong?.album)
+        .fontSize(this.isCoverOpacity() ? 12 : 15)
+        .textOverflow({ overflow: TextOverflow.MARQUEE })//超长滚动
+        .fontColor(Color.White)
+        .textAlign(TextAlign.Center)
+        .width(isTop?'80%':'99%')
+        .maxLines(1)
+    }
+    .margin({ top: this.isCoverOpacity() ? 20 : isTop?40:20 })
+    .zIndex(1)
+    .visibility(this.isCoverOpacity()||isTop ? Visibility.None : Visibility.Visible)
+  }
+
   @Builder
   private PlayTitle() {