实现点击播放条的封面一镜到底 可以在设置页面控制是否显示上一首按钮

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

@@ -119,6 +119,7 @@ export struct SettingPage {
   @State isShowFAV: boolean = true //是否显示我的收藏
   @State isShowHistory: boolean = true //是否显示最近播放
   @State isShowPlayPageBack: boolean = false //是否显示播放页返回键
+  @State isShowPrecious: boolean = false //播控条显示上一首按钮
   @State isShowSingleLineLyric: boolean = false //是否显示单行歌词
   @State isShowHeader: boolean = true
   @State isCustomizeBg: boolean = false //自定义背景界面
@@ -229,6 +230,7 @@ export struct SettingPage {
   // 组件生命周期
   aboutToAppear() {
     // this.geIDD()
+    this.isShowPrecious = PreferencesUtil.getBooleanSync('isShowPrecious', false)
     this.isBgPlayOpen = PreferencesUtil.getBooleanSync(SettingPage.IS_BGPLAY_OPEN, true)
     this.isAutoRatate = PreferencesUtil.getBooleanSync(SettingPage.IS_AUTO_RATATE, true)
     this.isMemoryPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_PLAY, true)
@@ -1896,6 +1898,37 @@ export struct SettingPage {
       // .clickEffect({ level: ClickEffectLevel.HEAVY })
       //
       // Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
+      //播控条显示上一首按钮
+      Row() {
+        SymbolGlyph($r('sys.symbol.arrow_left'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
+        Text('播控条上一首按钮')
+          .margin({ left: 8 })
+          .fontSize(15)
+          .fontColor(Color.Gray)
+          .fontWeight(480)
+          .layoutWeight(1)
+        Toggle({ type: ToggleType.Switch, isOn: this.isShowPrecious })
+          .selectedColor(this.themeColor)
+          .switchPointColor(Color.White)
+          .margin({ right: 18 })
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .onChange((checked: boolean) => {
+            this.isShowPrecious = checked;
+            PreferencesUtil.put('isShowPrecious', this.isShowPrecious)
+            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'))
+
       // 播放页返回键
       Row() {
         SymbolGlyph($r('sys.symbol.arrow_left'))

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

@@ -234,9 +234,7 @@ const ITEM_HEIGHT_BIG: number = 78; // 列表项大高度
 @Preview
 @Component
 export struct LocalMusic {
-  // @State button_gradient_state: hdsEffect.PressShadowType = hdsEffect.PressShadowType.NONE;
-  // @State lightIntensity: number = 10;
-  // @State illuminatedType: hdsEffect.PointLightIlluminatedType = hdsEffect.PointLightIlluminatedType.NONE
+  @State isShowPrecious: boolean = false //播控条显示上一首按钮
   //背景两侧流光控制器
   @State sceneBgController: HdsSceneController|undefined = deviceInfo.sdkApiVersion>=20
     &&canIUse("SystemCapability.UIDesign.HDSComponent.Core")?
@@ -908,6 +906,7 @@ export struct LocalMusic {
     context.getApplicationContext().setColorMode(colorMode)
   }
   initSetting() {
+    this.isShowPrecious = PreferencesUtil.getBooleanSync('isShowPrecious', false)
     this.sortType = PreferencesUtil.getNumberSync(SettingPage.SORT_TYPE, 4)
     this.isCustomizeBg = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
     this.customizeBgPath = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
@@ -2617,10 +2616,10 @@ export struct LocalMusic {
               })
 
 
-            // Button('乱码修复', { type: ButtonType.Capsule, stateEffect: true })
-            //   .width(90)
-            //   .height(50)
-            //   .fontSize(13)
+            // Button('乱码', { type: ButtonType.Circle, stateEffect: true })
+            //   .width(45)
+            //   .height(45)
+            //   .fontSize(10)
             //   .margin({ top: 10, bottom: 10, right: 6 })
             //   .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.5 })
             //   .backgroundColor(this.themeColor)
@@ -3855,7 +3854,8 @@ export struct LocalMusic {
                 this.handleFileSelection(item, !isChecked);
               } else {
                 this.doPlay(item,index)
-                this.isShowPlay = true
+                this.setShowPLayTrue()
+
               }
             })
         }
@@ -6130,9 +6130,11 @@ export struct LocalMusic {
     .height(this.bottomBarHeight)
     .hitTestBehavior(HitTestMode.Transparent)
     .bindContentCover($$this.isShowPlay, this.MusicPlayBuilder(), {
-      // modalTransition: ModalTransition.DEFAULT,
-      transition: AnimationHelper.transitionInDown(666),
-      backgroundColor: 'rgba(0, 0, 0, 0.9)',
+      modalTransition: ModalTransition.NONE,
+      onWillDisappear: () => {
+        this.isShowPlay = false
+      },
+      // backgroundColor: 'rgba(0, 0, 0, 0.9)',
     })
     .padding({
       left: 16,
@@ -6151,7 +6153,7 @@ export struct LocalMusic {
         .fontSize(16)
         .textOverflow({ overflow: TextOverflow.MARQUEE }) //超长滚动
         .maxLines(1)
-        .fontColor($r('app.color.text_color'))
+        .fontColor(Color.White)
         .fontWeight(500);
       Row() {
         Text(this.currentSong?.artist)
@@ -6160,23 +6162,36 @@ export struct LocalMusic {
           .textAlign(TextAlign.Start)
           .maxLines(1)
           .textOverflow({ overflow: TextOverflow.MARQUEE }) //超长滚动
-          .fontColor($r('app.color.text_color'));
+          .fontColor(Color.White)
       }
       .visibility(this.currentSong?.artist? Visibility.Visible:Visibility.None)
     }
+    .geometryTransition('name', { follow: true }) // 绑定标识符
     .alignItems(HorizontalAlign.Center)
   }
   @Builder
   playConLeft(isLeft: boolean = true) {
     Row() {
-      RotatingCover({ songLabel: this.currentSong?.pixelMapPath });
-
+      // RotatingCover({ songLabel: this.currentSong?.pixelMapPath })
+      Image( this.currentSong?.pixelMapPath)
+        .height(45)
+        .width(45)
+        .alt( $r('app.media.music_red'))
+        .fillColor(this.themeColor)
+        .borderRadius(8)
+        .shadow({
+          radius: 10,
+          type: ShadowType.BLUR,
+          color: 'on_primary'
+        })
+        .clip(true)
+        .geometryTransition('cover', { follow: true }) // 绑定标识符
       Column() {
         Text(this.currentSong?.name)
           .fontSize(16)
           .textOverflow({ overflow: TextOverflow.MARQUEE }) //超长滚动
           .maxLines(1)
-          .fontColor($r('app.color.text_color'))
+          .fontColor(Color.White)
           .fontWeight(500);
         Row() {
           Text(this.currentSong?.artist)
@@ -6185,10 +6200,12 @@ export struct LocalMusic {
             .textAlign(TextAlign.Start)
             .maxLines(1)
             .textOverflow({ overflow: TextOverflow.MARQUEE }) //超长滚动
-            .fontColor($r('app.color.text_color'));
+            .fontColor(Color.White)
         }
         .visibility(this.currentSong?.artist? Visibility.Visible:Visibility.None)
       }
+      .padding({left:8})
+      .geometryTransition('name', { follow: true }) // 绑定标识符
       .alignItems(isLeft?HorizontalAlign.Start:HorizontalAlign.End)
       .margin({ right: isLeft?22:10 })
       .visibility(isLeft? Visibility.Visible:Visibility.None)
@@ -6200,16 +6217,24 @@ export struct LocalMusic {
       this.showPlayerView()
     })
   }
+
+  setShowPLayTrue(){
+    this.getUIContext()?.animateTo({
+      duration: 500,
+      curve: Curve.Friction
+    }, () => {
+      this.isShowPlay = !this.isShowPlay;
+    });
+  }
+
   //打开播放页
   showPlayerView() {
 
     if (ArrayUtil.isNotEmpty(this.songList)) {
-      this.isShowPlay = true;
+      this.setShowPLayTrue()
       let lyricPath = this.videoUrl.substring(0, this.videoUrl.lastIndexOf('.')) + '.lrc';
       this.initLyric(lyricPath);
       this.startAutoHide();
-
-
     } else {
       ToastUtil.showToast('当前播放列表为空，请先导入音乐。');
     }
@@ -6217,12 +6242,14 @@ export struct LocalMusic {
   @Builder
   playConRigth() {
     Row() {
-      Image($r('app.media.hm_previous'))
-        .height(28)
-        .width(28)
+
+      SymbolGlyph($r('sys.symbol.backward_end_fill'))
+        .fontSize(28)
+        .fontColor([this.themeColor])
+        .alignSelf(ItemAlign.Center)
+        .visibility(this.isShowPrecious? Visibility.Visible:Visibility.None)
         .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.5 })
-        .margin({ left: 8, right: 16 })
-        .fillColor(this.themeColor)
+        .margin({ left: 8, right: 14 })
         .displayPriority(2)
         .onClick(() => {
           if (ArrayUtil.isNotEmpty(this.songList)) {
@@ -6241,12 +6268,11 @@ export struct LocalMusic {
 
         })
           .color(this.themeColor)// 进度条前景色为灰色
-          .backgroundColor($r('app.color.index_background'))
-          .height(40)
+          .height(38)
           .aspectRatio(CommonConstants.ASPECT_RATIO)
         Image(this.CONTROL_PlayStatus === PlayStatus.PLAY ? $r('app.media.hm_pause') : $r('app.media.hm_play2'))
-          .height(38)
-          .width(38)
+          .height(36)
+          .width(36)
           .displayPriority(3)
           .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.5 })
           .fillColor(this.themeColor)
@@ -6261,14 +6287,14 @@ export struct LocalMusic {
       }
 
 
-      Image($r('app.media.hm_next'))
-        .height(28)
-        .width(28)
+      SymbolGlyph($r('sys.symbol.forward_end_fill'))
+        .fontSize(28)
+        .fontColor([this.themeColor])
+        .alignSelf(ItemAlign.Center)
         .margin({
-          right: 16,
-          left: 16
+          right: 14,
+          left: 14
         })
-        .fillColor(this.themeColor)
         .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.5 })
         .displayPriority(2)
         .onClick(() => {
@@ -6281,8 +6307,8 @@ export struct LocalMusic {
         })
 
       Image($r('app.media.hm_playlist'))
-        .height(28)
-        .width(28)
+        .height(26)
+        .width(26)
         .displayPriority(1)
         .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.5 })
         .fillColor(this.themeColor)
@@ -8079,6 +8105,10 @@ export struct LocalMusic {
     Column() {
       this.IjkMusicPlayerView()
     }
+    .transition(TransitionEffect.asymmetric(
+      TransitionEffect.opacity(1),
+      TransitionEffect.OPACITY
+    ))
     .visualEffect(deviceInfo.sdkApiVersion>=20&&this.bgController?
       new hdsEffect.HdsEffectBuilder()
       .shaderEffect({
@@ -9737,6 +9767,7 @@ export struct LocalMusic {
               .margin({ right: 8, left: 8, top: 8 })
               .aspectRatio(1)
               .opacity(this.opacityValueImage)
+              .geometryTransition('cover') // 绑定标识符
               .scale({ x: this.scaleValueImage, y: this.scaleValueImage }) // 添加缩放效果
               .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.8 })
               .visibility(this.isPuraWP() ? Visibility.None : Visibility.Visible)
@@ -9796,6 +9827,7 @@ export struct LocalMusic {
               .margin({ right: 20, left: 20,top:this.isCoverRectangle||this.isLandscape?0:43 })
               .aspectRatio(1)
               .opacity(this.opacityValueImage)
+              .geometryTransition('cover') // 绑定标识符
               .scale({ x: this.scaleValueImage, y: this.scaleValueImage }) // 添加缩放效果
               .visibility(this.isPuraWP() ? Visibility.None : Visibility.Visible)
               .borderRadius(this.isCoverRectangle ? 20 : '100%')
@@ -9862,6 +9894,7 @@ export struct LocalMusic {
         }
         .justifyContent(FlexAlign.Start)
         .zIndex(1)
+        .geometryTransition('name')
         .visibility(this.isCoverOpacity() ? Visibility.Visible : Visibility.None)
 
       }
@@ -9916,6 +9949,7 @@ export struct LocalMusic {
           .maxLines(1)
       }
       .zIndex(1)
+      .geometryTransition('name') // 绑定标识符
       .layoutWeight(1)
       .margin({ left: 15 })
       .scale({ x: this.scaleValueImage, y: this.scaleValueImage }) // 添加缩放效果
@@ -9976,8 +10010,12 @@ export struct LocalMusic {
       .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
       .visibility(this.isHide ? Visibility.Hidden : Visibility.Visible)
       .onClick(() => {
-
-        this.isShowPlay = false;
+        this.getUIContext()?.animateTo({
+          duration: 350,
+          curve: Curve.Friction
+        }, () => {
+          this.isShowPlay = !this.isShowPlay;
+        });
 
       })