Grid网格功能进一步完善

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

@@ -31,6 +31,7 @@ export struct SettingPage {
   @State isShowHistory:boolean = true //是否显示最近播放
   @State isCustomizeBg: boolean = false //自定义背景界面
   @State isCustomizeBgSheet: boolean = false //自定义背景界面
+  @State isGridMusic: boolean = false //是否网格布局
   @State customizeBgPath: string | undefined = '';
   context = getContext(this);
 
@@ -147,6 +148,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)
 
     // 只用 themeMode 控制主题
     this.themeMode = PreferencesUtil.getNumberSync(SettingPage.THEME_MODE, 0)
@@ -295,6 +297,30 @@ export struct SettingPage {
               this.isCustomizeBgSheet = !this.isCustomizeBgSheet;
             })
 
+            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.isGridMusic })
+                .selectedColor($r('app.color.tab_item_bg'))
+                .switchPointColor(Color.White)
+                .margin({ right: 18 })
+                .onChange((checked: boolean) => {
+                  this.isGridMusic = checked;
+                  PreferencesUtil.put(SettingPage.IS_GRID_MUSIC, this.isGridMusic)
+                  this.sendChangeEvent()
+                })
+                .width(50)
+                .height(30);
+            }
+            .height(55)
+
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 显示私密音频
             Row() {

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

@@ -418,7 +418,7 @@ export struct LocalMusic {
     });
 
     let eventSetting: emitter.InnerEvent = { eventId: 333 }
-    // 监听广播事件（打开其他应用处理）
+    // 监听广播事件（通用设置配置更新）
     emitter.on(eventSetting, (eventData: emitter.EventData) => {
       this.doChangeSetting()
 
@@ -482,6 +482,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)
     if(this.isCustomizeBg){
       this.titleBarModel.setRightTitleStateNormalStyleColor(Color.Transparent)
       this.titleBarModel.setTitleBarBackground(Color.Transparent)
@@ -605,9 +606,7 @@ export struct LocalMusic {
     this.getSortedFiles(this.rootPath).then(() => {
       this.isFavMusic = false
       //穿山甲
-      this.loadBannerAd(CSJUtil.getBannerID())
-
-      // this.songList = Utility.getGlobalList(this.videoLocalList, CommonConstants.TYPE_LOCAL) as VideoItem[];
+      // this.loadBannerAd(CSJUtil.getBannerID())
 
       this.songList = PreferencesUtil.getSync('LastMusicList', []) as Array<VideoItem>
       this.currentSong = PreferencesUtil.getSync('LastMusicInfo', undefined) as VideoItem
@@ -757,11 +756,11 @@ export struct LocalMusic {
         this.dirList = directories
         this.addCache(curPath + "_dirList", this.dirList);
       }
-
-      if (this.isShowAd && ArrayUtil.isNotEmpty(directories)) {
-        let adItem: VideoItem = new VideoItem('', '', '', CommonConstants.TYPE_IS_CSJAD, 0, '')
-        directories.push(adItem)
-      }
+      //插入广告先注释掉
+      // if (this.isShowAd && ArrayUtil.isNotEmpty(directories)) {
+      //   let adItem: VideoItem = new VideoItem('', '', '', CommonConstants.TYPE_IS_CSJAD, 0, '')
+      //   directories.push(adItem)
+      // }
       // 合并文件夹和文件，文件夹在前，文件在后,广告在中间
       this.videoLocalList = directories.concat(files);
 
@@ -2465,6 +2464,17 @@ export struct LocalMusic {
           .onClick(() => {
             this.showRankDialog()
           })
+
+        Image(this.isGridMusic?$r('app.media.list'):$r("app.media.grid"))
+          .width(25)
+          .animation({
+            duration: 666,
+            curve: 'ease-in-out' // 可选动画曲线
+          })
+          .clickEffect({ level: ClickEffectLevel.MIDDLE })
+          .onClick(() => {
+            this.isGridMusic = !this.isGridMusic
+          })
       }
       .visibility(((this.modeType === 2 || this.modeType === 3) && !this.isCanBack) ? Visibility.Visible :
       Visibility.None)
@@ -2561,6 +2571,16 @@ export struct LocalMusic {
           .onClick(() => {
             this.isSearchMode = true
           })
+        Image(this.isGridMusic?$r('app.media.list'):$r("app.media.grid"))
+          .width(25)
+          .animation({
+            duration: 666,
+            curve: 'ease-in-out' // 可选动画曲线
+          })
+          .clickEffect({ level: ClickEffectLevel.MIDDLE })
+          .onClick(() => {
+            this.isGridMusic = !this.isGridMusic
+          })
         Image($r("app.media.refresh"))
           .width(25)
           .visibility(this.isHistory || this.isCanBack || this.isSearchMode ? Visibility.None : Visibility.Visible)
@@ -2780,13 +2800,12 @@ export struct LocalMusic {
     Grid() {
       LazyForEach(this.dataSource, (item: VideoItem, index: number) => {
         GridItem() {
-          Stack({ alignContent: Alignment.TopEnd }) {
+          Stack({ alignContent: Alignment.Center }) {
             this.MusicItemGrid(item,index)
 
           }
         }
-        .rowStart(0)
-        .rowEnd(this.getRowEnd(index))
+
         .scale({ x: this.scaleItem === index ? 1.02 : 1, y: this.scaleItem === index ? 1.02 : 1 })
         .zIndex(this.dragItem === index ? 1 : 0)
         .translate(this.dragItem === index ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 })
@@ -2852,82 +2871,129 @@ export struct LocalMusic {
     .width('100%')
     .height('100%')
     .editMode(true)
+    .margin({ bottom: this.isCoverOpacity() ? 50 : 165 })
+    .layoutWeight(1)
     .scrollBar(BarState.Off)
-    // .columnsTemplate('1fr 1fr')
     .supportAnimation(true)
+    .cachedCount(20)
     .columnsTemplate('1fr '.repeat(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ? 2 : 4))
-    .columnsGap(12)
     .rowsGap(12)
     .visibility(this.isGridMusic?Visibility.Visible:Visibility.None)
     .enableScrollInteraction(true)
+    .onScrollFrameBegin((offset: number) => {
+      //滚动小屏幕 比如puraX外屏和手机横屏可以隐藏bottomBarHeight topBarHeight
+      if(this.isPhoneLan()){
+        this.setBarHeightHide(offset)
+      }else if (this.currentWidthBreakpoint !== WidthBreakpoint.WIDTH_SM ||
+        (this.currentHeightBreakpoint !== HeightBreakpoint.HEIGHT_MD &&
+          this.currentHeightBreakpoint !== HeightBreakpoint.HEIGHT_SM)) {
+        this.setBarHeightNormal()
+      }else{
+        this.setBarHeightHide(offset)
+      }
+
+      return { offsetRemain: offset };
+    })
 
   }
   @Builder
   private MusicItemGrid(item: VideoItem, index?: number) {
 
-    Column() {
-      Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.ic_avatar6') : item.pixelMapPath)
-        .height(150)
-        .width(150)
-        .alt($r('app.media.ic_avatar6'))
-        .borderRadius(20)
-        .clip(true)
-        .draggable(false)
-        .opacity(this.opacityItem)// 绑定透明度
-        .animation({ curve: Curve.Sharp, duration: 300 })
-        .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
-          right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
-      Column() {
+    Stack() {
 
+      Column() {
+        Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.ic_avatar6') : item.pixelMapPath)
+          .height(150)
+          .width(150)
+          .alt($r('app.media.ic_avatar6'))
+          .clip(true)
+          .borderRadius({
+            topLeft: 20,
+            topRight	: 20,
+            bottomLeft: 0,
+            bottomRight: 0
+          })
+          .draggable(false)
+          .opacity(this.opacityItem)// 绑定透明度
+          .animation({ curve: Curve.Sharp, duration: 300 })
+          .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
+            right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
         Column() {
-          Text(item.name)
+          Text(item.name.startsWith('.')?item.name.replace(/\./g, ''):item.name)
             .fontSize(14)
             .maxLines(1)
+            .fontWeight(FontWeight.Bold)
+            .textOverflow({overflow: TextOverflow.MARQUEE}) //超长滚动
             .animation({
               duration: 555,
               curve: 'Linear',
             })
             .fontColor(this.currentSong?.filePath === item.filePath ? $r('app.color.title_bar_bg_text') :
             $r('app.color.text_color'))
-            .margin({ left: 10 })
-          Row() {
-            Text(StrUtil.isEmpty(item.artist) ? item.cTime : item.artist + '  ' + item?.album)
+
+          Column(){
+            Text(`${this.artistMap.get(item.name)?.length ?? 0}首`)
               .fontSize(11)
-              .padding({ top: 8 })
-              .fontColor(this.currentSong?.filePath === item.filePath ? $r('app.color.title_bar_bg_text') :
-              $r('app.color.text_color'))
-              .margin({ left: 10 })
-            Blank()
-            Text(item.size)
+              .visibility(this.modeType===2?Visibility.Visible:Visibility.None)
+              .fontColor($r('app.color.text_color'))
+            Text(`${this.albumMap.get(item.name)?.length ?? 0}首`)
               .fontSize(11)
-              .padding({ top: 8 })
-              .visibility(StrUtil.isEmpty(item.artist) ? Visibility.Visible : Visibility.None)
+              .visibility(this.modeType===3?Visibility.Visible:Visibility.None)
+              .fontColor($r('app.color.text_color'))
+            Text(StrUtil.isEmpty(item.artist) ? 'Unknown' : item.artist )
+              .fontSize(11)
+              .maxLines(1)
+              .margin({top:2})
+              .visibility(item.type==CommonConstants.TYPE_IS_DIR?Visibility.None:Visibility.Visible)
+              .fontWeight(FontWeight.Medium)
               .fontColor(this.currentSong?.filePath === item.filePath ? $r('app.color.title_bar_bg_text') :
               $r('app.color.text_color'))
-              .margin({ left: 10 })
+
           }
+          .alignItems(HorizontalAlign.Center) // 关键：使内容水平居中
 
         }
-        .height('100%')
-        .width('100%')
+        .height(50)
+        .width(150)
         .justifyContent(FlexAlign.Center)
-        .alignItems(HorizontalAlign.Start)
+        .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
+          right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
 
       }
-      .layoutWeight(1)
-      .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
-        right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
+      .width(150)
+      .borderRadius(20)
+      .backgroundImage(item.pixelMapPath)
+      .backgroundImageSize({ height: '100%',width:'100%' })
+      .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
+      .animation({ curve: Curve.Sharp, duration: 300 })
+
+
+      Checkbox({ name: 'checkbox' + index })
+        .select(this.selectedFiles.some(x  => x.filePath  === item.filePath))
+        .selectedColor(0x39a2db)
+        .shape(CheckBoxShape.CIRCLE)
+        .opacity(this.isMultiSelect ? 1 : 0)
+        .animation({
+          duration: 666,
+          curve: 'Smooth' // 可选动画曲线
+        })
+        .visibility(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR?Visibility.Visible:Visibility.None)
+        .onChange((checked: boolean) => this.handleFileSelection(item, checked))
+        .margin({ left: 20, top: 8, bottom: 8 })
+        .width(38)
+        .height(38)
     }
     .width('100%')
-    .height(200)
-    .animation({ curve: Curve.Sharp, duration: 300 })
-    .justifyContent(FlexAlign.SpaceBetween)
+    .height(205)
     .stateStyles({
       pressed: { opacity: 0.6 } // 按压反馈
     })
     .onClick(() => {
-
-      this.doPlay(item, index)
+      if(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR){
+        this.handleFileSelection(item, !this.selectedFiles.some(x  => x.filePath  === item.filePath))
+      }else{
+        this.doPlay(item, index)
+      }
 
     })
   }