Bläddra i källkod

小尺寸卡片支持背景随封面渐变

chendeben 1 år sedan
förälder
incheckning
5cdbd80f0b
2 ändrade filer med 43 tillägg och 3 borttagningar
  1. 2 1
      .gitignore
  2. 41 2
      entry/src/main/ets/widget/pages/PlayerWidgetSmall.ets

+ 2 - 1
.gitignore

@@ -12,4 +12,5 @@
 .vs
 /build-profile.json5
 oh_modules
-/oh-package-lock.json5
+/oh-package-lock.json5
+*.md

+ 41 - 2
entry/src/main/ets/widget/pages/PlayerWidgetSmall.ets

@@ -8,12 +8,47 @@
 @Component
 struct PlayerWidgetSmall {
   // 卡片数据属性 - 使用LocalStorageProp与FormExtensionAbility通信
-  @LocalStorageProp('formId') formId: string = '202502';
+  @LocalStorageProp('formId') formId: string = '202501';
   @LocalStorageProp('isPlaying') isPlaying: boolean = false;
+  @LocalStorageProp('songTitle') songTitle: string = 'Dream It Possible';
+  @LocalStorageProp('songArtist') songArtist: string = 'Delacey';
+  @LocalStorageProp('coverImage') coverImage: string = '';
   @LocalStorageProp('hasNext') hasNext: boolean = false;
   @LocalStorageProp('hasPrevious') hasPrevious: boolean = false;
   @LocalStorageProp('isLoading') isLoading: boolean = false;
+  @LocalStorageProp('imageColorHex') imageColorHex: string = '2A2A2A';
+  @LocalStorageProp('imgName') imgName: string = ''; // 图片文件名,用于memory://协议
 
+  /**
+   * 获取专辑封面
+   */
+  private getCoverImage(): Resource | string {
+    console.info(`Heanup PlayerWidgetSquare: getCoverImage called, coverImage='${this.coverImage}', imgName='${this.imgName}'`);
+
+    // 优先使用通过formImages传递的本地图片(支持网络图片下载后的显示)
+    if (this.imgName && this.imgName.trim() !== '') {
+      const memoryUrl = 'memory://' + this.imgName;
+      console.info(`Heanup PlayerWidgetSquare: Using memory image: ${memoryUrl}`);
+      return memoryUrl;
+    }
+
+    // 如果有coverImage且不是网络URL,使用本地路径
+    if (this.coverImage && this.coverImage.trim() !== '' && !this.isNetworkUrl(this.coverImage)) {
+      console.info(`Heanup PlayerWidgetSquare: Using local cover image: ${this.coverImage}`);
+      return this.coverImage;
+    }
+
+    // 默认使用内置图片
+    console.info(`Heanup PlayerWidgetSquare: Using default cover image`);
+    return $r('app.media.ic_avatar4'); // 使用默认专辑封面
+  }
+
+  /**
+   * 检查是否为网络URL
+   */
+  private isNetworkUrl(url: string): boolean {
+    return url.startsWith('http://') || url.startsWith('https://');
+  }
   build() {
     // 简洁的播放控制条
     Row() {
@@ -97,9 +132,13 @@ struct PlayerWidgetSmall {
     .height('100%')
     .justifyContent(FlexAlign.Center)
     .alignItems(VerticalAlign.Center)
-    .backgroundColor('#FF2A2A2A')
+    // .backgroundColor('#FF2A2A2A')
     .borderRadius(8)
     .padding(8)
+
+    .backgroundImage(this.getCoverImage())
+    .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
+    .backgroundImageSize(ImageSize.Cover)
     .onClick(() => {
       console.info('Heanup PlayerWidgetSmall: Container clicked, jumping to main app');
       postCardAction(this, {