grid的设置自适应列数和 列表封面大和小的切换

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

@@ -49,6 +49,7 @@ export struct SettingPage {
   static readonly IS_SHOW_ALLBAR: string = 'IS_SHOW_ALLBAR';
   static readonly IS_SHOW_TITLTBAR: string = 'IS_SHOW_TITLTBAR';
   public static THEME_COLOR_KEY: string = 'THEME_COLOR';
+  public static IS_GRID_COVERBIG: string = 'isGridCoverBig';
   public static THEME_COLOR_LIST: Array<ThemeColorItem> = [
     { name: '经典蓝', color: '#0A59F7' },
     { name: '活力黄', color: '#FFC107' },
@@ -90,7 +91,8 @@ export struct SettingPage {
   @State isShowAllBar: boolean = true //是否显示播放全部条
   @State blurValue: number = 0 //背景模糊
   @State bgBrightness: number = 0 //背景亮度
-  @State isGridMusic: boolean = false //是否网格布局
+  @State isGridMusic: boolean = true //是否网格布局
+  @State isGridCoverBig: boolean = true //网格是否封面大
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
   @State isSavePlayMode: boolean = true
@@ -189,7 +191,7 @@ export struct SettingPage {
     this.isShowHistory = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_HISTORY, true)
     this.isCustomizeBg = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
     this.customizeBgPath = PreferencesUtil.getStringSync(SettingPage.IS_CUSTOMIZE_BG_PATH, '')
-    this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, false)
+    this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, true)
     this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
     this.isSameTimePlay = PreferencesUtil.getBooleanSync(SettingPage.IS_SAMETIME_PLAY, false)
     this.isSavePlayMode = PreferencesUtil.getBooleanSync(SettingPage.iS_SAVE_PLAY_MODE, true)
@@ -197,6 +199,8 @@ export struct SettingPage {
     this.bgBrightness = PreferencesUtil.getNumberSync(SettingPage.BG_BRIGHTNESS, 0)
     this.isStartAutoPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_START_AUTO_PLAY, false)
     this.isMemoryLastPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_LAST_PLAY, false)
+    this.isGridCoverBig = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_COVERBIG, true)
+
 
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
@@ -616,7 +620,7 @@ export struct SettingPage {
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
-            // 显示私密音频
+            // 网格布局
             Row() {
               Text('网格布局')
                 .margin({ left: 18 })
@@ -641,6 +645,31 @@ export struct SettingPage {
 
             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.isGridCoverBig })
+                .selectedColor(this.themeColor)
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isGridCoverBig = checked;
+                  PreferencesUtil.put(SettingPage.IS_GRID_COVERBIG, this.isGridCoverBig)
+                  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'))
+
           }
           .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
             .animation({ duration: 500, curve: Curve.Ease,delay:200 }))
@@ -654,6 +683,7 @@ export struct SettingPage {
           })
           .padding(0)
 
+
           // 音频设置分组
           Column() {
             Row() {
@@ -902,7 +932,7 @@ export struct SettingPage {
 
 
       Row() {
-        Text('显示首页分类导航条')
+        Text('显示分类导航')
           .margin({ left: 18 })
           .fontSize(15)
           .fontColor(Color.Gray)
@@ -926,7 +956,7 @@ export struct SettingPage {
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
       Row() {
-        Text('显示播放全部条')
+        Text('显示播放全部')
           .margin({ left: 18 })
           .fontSize(15)
           .fontColor(Color.Gray)

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

@@ -132,6 +132,7 @@ interface GeneratedObjectLiteralInterface_1 {
   drmScheme: string;
 }
 const ITEM_HEIGHT: number = 58; // 列表项高度
+const ITEM_HEIGHT_BIG: number = 78; // 列表项高度
 //功能强大的音乐播放器
 @Preview
 @Component
@@ -176,6 +177,7 @@ export struct LocalMusic {
   @State isShowHistory:boolean = true //是否显示最近播放
   @State isCustomizeBg: boolean = false //自定义背景界面
   @State isGridMusic: boolean = false //是否网格布局
+  @State isGridCoverBig: boolean = true //是否网格布局
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
   @State isStartAutoPlay: boolean = false //启动后自动播放
@@ -452,9 +454,12 @@ export struct LocalMusic {
       } else if (event.hintType === InterruptHintType.INTERRUPT_HINT_STOP) {
         this.stop();
       }
+
     }
     this.mIjkMediaPlayer.on('audioInterrupt', event);
 
+
+
     this.makeWorker()
 
 
@@ -530,7 +535,7 @@ export struct LocalMusic {
     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, '')
-    this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, false)
+    this.isGridMusic = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_MUSIC, true)
     this.isScrollHide = PreferencesUtil.getBooleanSync(SettingPage.IS_SCROLL_HIDE, false)
     this.isSameTimePlay = PreferencesUtil.getBooleanSync(SettingPage.IS_SAMETIME_PLAY, false)
     this.isSavePlayMode = PreferencesUtil.getBooleanSync(SettingPage.iS_SAVE_PLAY_MODE, true)
@@ -540,6 +545,7 @@ export struct LocalMusic {
     this.isMemoryLastPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_LAST_PLAY, false)
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
+    this.isGridCoverBig = PreferencesUtil.getBooleanSync(SettingPage.IS_GRID_COVERBIG, true)
     if (this.isSavePlayMode) {
       this.playType = PreferencesUtil.getNumberSync('musicPlayType', 0)
     }
@@ -2290,9 +2296,8 @@ export struct LocalMusic {
       Row() {
         Image(this.modeType !== 0 && StrUtil.isNotEmpty(item.pixelMapPath) ? item.pixelMapPath :
         $r('app.media.music_group'))
-          // SymbolGlyph($r('sys.symbol.identify_song'))
-          .height(33)
-          .width(33)
+          .height(this.isGridCoverBig?48:35)
+          .width(this.isGridCoverBig?48:35)
           .fillColor(this.themeColor)
             // .fontSize(33)
           .alt($r('app.media.music_group'))
@@ -2348,7 +2353,7 @@ export struct LocalMusic {
       }
     }
     .backgroundColor(Color.Transparent)
-    .height(ITEM_HEIGHT)
+    .height(this.isGridCoverBig?ITEM_HEIGHT_BIG:ITEM_HEIGHT)
     .width('100%')
     .visibility(this.isShowDir(item.name)?Visibility.Visible:Visibility.None)
     .opacity(this.opacityItem) // 绑定透明度
@@ -2383,8 +2388,8 @@ export struct LocalMusic {
 
           Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
             .fillColor(this.themeColor)
-            .height(33)
-            .width(33)
+            .height(this.isGridCoverBig?48:35)
+            .width(this.isGridCoverBig?48:35)
             .alt($r('app.media.music_red'))
             .borderRadius('100%')
             .clip(true)
@@ -2466,7 +2471,7 @@ export struct LocalMusic {
     }
     .backgroundColor(Color.Transparent)
     .width('100%')
-    .height(ITEM_HEIGHT)
+    .height(this.isGridCoverBig?ITEM_HEIGHT_BIG:ITEM_HEIGHT)
   }
 
   private readonly tabs: string[] = ['文件夹', '媒体库', '艺术家', '专辑']
@@ -2965,6 +2970,7 @@ export struct LocalMusic {
   private scroller: Scroller = new Scroller();
   @State startIndex:number = 0
   @State endIndex:number = 0
+
   @Builder
   getGridView(){
 
@@ -3056,7 +3062,8 @@ export struct LocalMusic {
     .scrollBar(BarState.Off)
     .supportAnimation(true)
     .cachedCount(3)
-    .columnsTemplate('1fr '.repeat(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ? 2 : 5))
+    // .columnsTemplate('1fr '.repeat(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ? 2 : 5))
+    .columnsTemplate(this.isGridCoverBig?'repeat(auto-fit, 150)':'repeat(auto-fit, 110)')
     .rowsGap(12)
     .visibility(this.isGridMusic?Visibility.Visible:Visibility.None)
     .enableScrollInteraction(true)
@@ -3094,8 +3101,8 @@ export struct LocalMusic {
       Stack() {
         Column() {
           Image(StrUtil.isEmpty(item.pixelMapPath) ?Utility.getMusisBg2(index) : item.pixelMapPath)
-            .height(150)
-            .width(150)
+            .height(this.isGridCoverBig?150:100)
+            .width(this.isGridCoverBig?150:110)
             .alt($r('app.media.ic_avatar6'))
             .clip(true)
             .borderRadius({
@@ -3180,14 +3187,14 @@ export struct LocalMusic {
 
             })
           )
-          .height(50)
-          .width(150)
+          .height(this.isGridCoverBig?50:40)
+          .width(this.isGridCoverBig?150:110)
           .justifyContent(FlexAlign.Center)
           .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
             right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
 
         }
-        .width(150)
+        .width(this.isGridCoverBig?150:110)
         .borderRadius(20)
         .backgroundImage(item.pixelMapPath)
         .backgroundImageSize({ height: '100%',width:'100%' })
@@ -3213,7 +3220,7 @@ export struct LocalMusic {
     }
     .backgroundColor(Color.Transparent)
     .width('100%')
-    .height(205)
+    .height(this.isGridCoverBig?205:150)
     .onClick(() => {
       if(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR){
         this.handleFileSelection(item, !this.selectedFiles.some(x  => x.filePath  === item.filePath))
@@ -3509,7 +3516,12 @@ export struct LocalMusic {
     )
     .onAreaChange((oldValue: Area, newValue: Area) => {
       this.listArea = newValue
-      this.listMaxScrollOffsetY = this.videoLocalList.length * (ITEM_HEIGHT) - 10
+      if(this.isGridCoverBig){
+        this.listMaxScrollOffsetY = this.videoLocalList.length * (ITEM_HEIGHT_BIG) - 10
+      }else{
+        this.listMaxScrollOffsetY = this.videoLocalList.length * (ITEM_HEIGHT) - 10
+      }
+
     })
     .onScrollFrameBegin((offset: number) => {