美化音乐卡片UI

entry/src/main/ets/widget/pages/MusicPlayerWidgetCard.ets

@@ -24,7 +24,7 @@ struct MusicPlayerWidgetCard {
   @LocalStorageProp('durationMs') @Watch('syncSliderFromPlayback') durationMs: number = 0
   @LocalStorageProp('currentTimeText') currentTimeText: string = '00:00'
   @LocalStorageProp('durationTimeText') durationTimeText: string = '00:00'
-
+  @State isChangeBg: boolean = true
   @State sliderProgressMs: number = 0
 
   aboutToAppear(): void {
@@ -139,19 +139,30 @@ struct MusicPlayerWidgetCard {
     .height(34)
   }
 
+  private hasCoverBackground(): boolean {
+    if (this.hasCoverImage && this.coverImageName.length > 0) {
+      return true;
+    }
+    return this.coverPath.length > 0;
+  }
+
   build() {
     Stack() {
-      Image(this.resolveCoverSource())
-        .width('100%')
-        .height('100%')
-        .objectFit(ImageFit.Cover)
-
-      Column()
-        .width('100%')
-        .height('100%')
-        .linearGradient(
-          { direction: GradientDirection.Right, colors:
-          [['#00BC70',0.0],['#D81B60',1.0]]})
+
+      if (this.hasCoverBackground()&&this.isChangeBg) {
+        Column()
+          .width('100%')
+          .height('100%')
+          .backgroundImage(this.resolveCoverSource())
+          .backgroundImageSize({ width: '100%' })
+          .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
+      } else {
+        Column()
+          .width('100%')
+          .height('100%')
+          .linearGradient( { direction: GradientDirection.Right, colors:[
+            ['#00BC70',0.0],['#D81B60',1.0]]})
+      }
 
       Column({ space: 12 }) {
         Image(this.resolveCoverSource())
@@ -159,6 +170,9 @@ struct MusicPlayerWidgetCard {
           .height(60)
           .borderRadius(6)
           .objectFit(ImageFit.Cover)
+          .onClick(()=>{
+            this.isChangeBg = !this.isChangeBg
+          })
 
         Text(this.resolveTitleArtistText())
           .fontSize(13)

entry/src/main/ets/widget/pages/MusicPlayerWidgetLyricCard.ets

@@ -35,6 +35,7 @@ struct MusicPlayerWidgetLyricCard {
   @State isDragging: boolean = false
   @State dragProgressMs: number = 0
   @State sliderProgressMs: number = 0
+  @State isChangeBg: boolean = true
 
   aboutToAppear(): void {
     Logger.info(TAG,
@@ -174,13 +175,13 @@ struct MusicPlayerWidgetLyricCard {
   build() {
     Stack({ alignContent: Alignment.Center }) {
 
-      if (this.hasCoverBackground()) {
+      if (this.hasCoverBackground()&&this.isChangeBg) {
         Column()
           .width('100%')
           .height('100%')
           .backgroundImage(this.resolveCoverSource())
           .backgroundImageSize({ width: '100%' })
-          .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR)
+          .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
       } else {
         Column()
           .width('100%')
@@ -197,6 +198,9 @@ struct MusicPlayerWidgetLyricCard {
           .height(120)
           .borderRadius(10)
           .objectFit(ImageFit.Cover)
+          .onClick(()=>{
+            this.isChangeBg = !this.isChangeBg
+          })
 
         Column({ space: 8 }) {
           Text(this.resolveTitleArtistText())
@@ -207,14 +211,16 @@ struct MusicPlayerWidgetLyricCard {
             .textAlign(TextAlign.Center)
             .textOverflow({ overflow: TextOverflow.Ellipsis })
           Text(this.resolveLyricMetaText())
-            .fontSize(12)
-            .fontColor('#F2FFFFFF')
+            .fontSize(14)
+            .fontColor(Color.White)
+            .fontWeight(FontWeight.Bold)
             .maxLines(1)
             .textAlign(TextAlign.Center)
             .textOverflow({ overflow: TextOverflow.Ellipsis })
           Text(this.resolveNextLyricText())
             .fontSize(13)
-            .fontColor('#D8FFFFFF')
+            .fontColor(Color.White)
+            .fontWeight(FontWeight.Medium)
             .maxLines(1)
             .textAlign(TextAlign.Center)
             .textOverflow({ overflow: TextOverflow.Ellipsis })

entry/src/main/ets/widget/pages/MusicPlayerWidgetWideCard.ets

@@ -26,7 +26,7 @@ struct MusicPlayerWidgetWideCard {
   @LocalStorageProp('durationMs') @Watch('syncSliderFromPlayback') durationMs: number = 0
   @LocalStorageProp('currentTimeText') currentTimeText: string = '00:00'
   @LocalStorageProp('durationTimeText') durationTimeText: string = '00:00'
-
+  @State isChangeBg: boolean = true
   @State isDragging: boolean = false
   @State dragProgressMs: number = 0
   @State sliderProgressMs: number = 0
@@ -160,7 +160,7 @@ struct MusicPlayerWidgetWideCard {
 
   build() {
     Stack() {
-      if (this.hasCoverBackground()) {
+      if (this.hasCoverBackground()&&this.isChangeBg) {
         Column()
           .width('100%')
           .height('100%')
@@ -181,6 +181,9 @@ struct MusicPlayerWidgetWideCard {
             .height(120)
             .borderRadius(10)
             .objectFit(ImageFit.Cover)
+            .onClick(()=>{
+              this.isChangeBg = !this.isChangeBg
+            })
 
           Column({ space: 12 }) {
             Column({ space: 4 }) {