修复grid和list的滚动加上动画效果切换的bug

双指放大和缩小list和gird的相对于列数的变化

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

@@ -49,7 +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 TWO_FINGER_TYPE: string = 'twoFingerType';
   public static THEME_COLOR_LIST: Array<ThemeColorItem> = [
     { name: '经典蓝', color: '#0A59F7' },
     { name: '活力黄', color: '#FFC107' },
@@ -92,7 +92,7 @@ export struct SettingPage {
   @State blurValue: number = 0 //背景模糊
   @State bgBrightness: number = 0 //背景亮度
   @State isGridMusic: boolean = true //是否网格布局
-  @State isGridCoverBig: boolean = true //网格是否封面大
+  @State twoFingerType: number = 3 //双指放大瘦小Grid或list的大小
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
   @State isSavePlayMode: boolean = true
@@ -199,7 +199,7 @@ 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.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
 
 
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
@@ -653,17 +653,37 @@ export struct SettingPage {
                 .fontColor(Color.Gray)
                 .fontWeight(480)
                 .layoutWeight(1)
-              Toggle({ type: ToggleType.Switch, isOn: this.isGridCoverBig })
-                .selectedColor(this.themeColor)
-                .switchPointColor(Color.White)
+              // 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);
+
+              Select([
+                { value: CommonConstants.SORT_ARRAY[0] },
+                { value: CommonConstants.SORT_ARRAY[1] },
+                { value: CommonConstants.SORT_ARRAY[2] },
+                { value: CommonConstants.SORT_ARRAY[3] },
+                { value: CommonConstants.SORT_ARRAY[4] },
+                { value: CommonConstants.SORT_ARRAY[5] },
+                { value: CommonConstants.SORT_ARRAY[6] },
+                { value: CommonConstants.SORT_ARRAY[7] }])
+                .font({ size: 15, weight: FontWeight.Medium })
+                .fontColor(Color.Gray)
                 .margin({ right: 18 })
-                .onChange((checked: boolean) => {
-                  this.isGridCoverBig = checked;
-                  PreferencesUtil.put(SettingPage.IS_GRID_COVERBIG, this.isGridCoverBig)
+                .selected(this.sortType)
+                .value(CommonConstants.SORT_ARRAY[this.sortType])
+                .onSelect(async (_index: number, text?: string | undefined) => {
+                  this.sortType = _index
+                  PreferencesUtil.put(SettingPage.SORT_TYPE, this.sortType)
                   this.sendChangeEvent()
                 })
-                .width(50)
-                .height(30);
             }
             .height(55)
             .clickEffect({level:ClickEffectLevel.HEAVY})

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

@@ -131,8 +131,10 @@ interface GeneratedObjectLiteralInterface_1 {
   // DRM资源，需要配置支持的DRM类型, 以chinaDRM为例。
   drmScheme: string;
 }
-const ITEM_HEIGHT: number = 58; // 列表项高度
-const ITEM_HEIGHT_BIG: number = 78; // 列表项高度
+
+const ITEM_HEIGHT_SMALL: number = 48; // 列表项小高度
+const ITEM_HEIGHT: number = 58; // 列表项中高度
+const ITEM_HEIGHT_BIG: number = 78; // 列表项大高度
 //功能强大的音乐播放器
 @Preview
 @Component
@@ -177,7 +179,7 @@ export struct LocalMusic {
   @State isShowHistory:boolean = true //是否显示最近播放
   @State isCustomizeBg: boolean = false //自定义背景界面
   @State isGridMusic: boolean = false //是否网格布局
-  @State isGridCoverBig: boolean = true //是否网格布局
+  @State twoFingerType: number = 3 //双支放大缩小的类型
   @State isScrollHide: boolean = false //是否滚动隐藏
   @State isSameTimePlay: boolean = false //是否和其他app同时播放
   @State isStartAutoPlay: boolean = false //启动后自动播放
@@ -545,7 +547,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)
+    this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
     if (this.isSavePlayMode) {
       this.playType = PreferencesUtil.getNumberSync('musicPlayType', 0)
     }
@@ -2296,8 +2298,8 @@ export struct LocalMusic {
       Row() {
         Image(this.modeType !== 0 && StrUtil.isNotEmpty(item.pixelMapPath) ? item.pixelMapPath :
         $r('app.media.music_group'))
-          .height(this.isGridCoverBig?48:35)
-          .width(this.isGridCoverBig?48:35)
+          .height(this.twoFingerType==3?48:35)
+          .width(this.twoFingerType==3?48:35)
           .fillColor(this.themeColor)
             // .fontSize(33)
           .alt($r('app.media.music_group'))
@@ -2353,7 +2355,7 @@ export struct LocalMusic {
       }
     }
     .backgroundColor(Color.Transparent)
-    .height(this.isGridCoverBig?ITEM_HEIGHT_BIG:ITEM_HEIGHT)
+    .height(this.twoFingerType==3?ITEM_HEIGHT_BIG:this.twoFingerType==2?ITEM_HEIGHT:ITEM_HEIGHT_SMALL)
     .width('100%')
     .visibility(this.isShowDir(item.name)?Visibility.Visible:Visibility.None)
     .opacity(this.opacityItem) // 绑定透明度
@@ -2388,8 +2390,8 @@ export struct LocalMusic {
 
           Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
             .fillColor(this.themeColor)
-            .height(this.isGridCoverBig?48:35)
-            .width(this.isGridCoverBig?48:35)
+            .height(this.twoFingerType==3?48:this.twoFingerType==2?35:30)
+            .width(this.twoFingerType==3?48:this.twoFingerType==2?35:30)
             .alt($r('app.media.music_red'))
             .borderRadius('100%')
             .clip(true)
@@ -2471,7 +2473,7 @@ export struct LocalMusic {
     }
     .backgroundColor(Color.Transparent)
     .width('100%')
-    .height(this.isGridCoverBig?ITEM_HEIGHT_BIG:ITEM_HEIGHT)
+    .height(this.twoFingerType==3?ITEM_HEIGHT_BIG:this.twoFingerType==2?ITEM_HEIGHT:ITEM_HEIGHT_SMALL)
   }
 
   private readonly tabs: string[] = ['文件夹', '媒体库', '艺术家', '专辑']
@@ -2983,7 +2985,9 @@ export struct LocalMusic {
 
           }
         }
-        .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
+        // .transition(TransitionEffect.scale({ x: 0.8, y: 0.8 }).animation({ duration: 500 }))
+        .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 0.8, y: 0.8 }).animation({ duration: 500 }),
+          TransitionEffect.scale({ x: 0, y: 0 })  ))
         .clickEffect({level:ClickEffectLevel.LIGHT})
         .scale({ x: this.scaleItem === index ? 1.02 : 1, y: this.scaleItem === index ? 1.02 : 1 })
         .zIndex(this.dragItem === index ? 1 : 0)
@@ -3065,13 +3069,13 @@ export struct LocalMusic {
     .supportAnimation(true)
     .cachedCount(3)
     // .columnsTemplate('1fr '.repeat(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ? 2 : 5))
-    .columnsTemplate(this.isGridCoverBig?'repeat(auto-fit, 150)':'repeat(auto-fit, 110)')
+    .columnsTemplate(this.twoFingerType==3?'repeat(auto-fit, 150)':this.twoFingerType==2?'repeat(auto-fit, 110)':'repeat(auto-fit, 80)')
     .rowsGap(12)
     .visibility(this.isGridMusic?Visibility.Visible:Visibility.None)
     .scale({x:this.scaleValue,y:this.scaleValue,z:1})
     .gesture(PinchGesture({ fingers: 2 })
       .onActionEnd((event: GestureEvent)=>{
-        this.setFingersTwo()
+        this.setGridTwoFingers()
       })
       .onActionUpdate(e=>{
         this.scaleValue = this.pinchValue*e.scale
@@ -3107,15 +3111,24 @@ export struct LocalMusic {
   }
 
 
-  setFingersTwo(){
+  setGridTwoFingers(){
     this.pinchValue = this.scaleValue;
     Logger.info('this.pinchValue = '+this.pinchValue);
-    // this.isGridCoverBig = !this.isGridCoverBig
-    // if(this.pinchValue >==1){
-    //   this.isGridCoverBig = true;
-    // }else{
-    //   this.isGridCoverBig = false;
-    // }
+    if(this.pinchValue >=1){
+      this.twoFingerType ++
+      Logger.info('this.twoFingerType1 = '+this.twoFingerType);
+      if(this.twoFingerType > 3){
+        this.twoFingerType = 3
+      }
+    }else{
+      this.twoFingerType --
+      Logger.info('this.twoFingerType2 = '+this.twoFingerType);
+      if(this.twoFingerType < 1){
+        this.twoFingerType = 3
+        this.isGridMusic = false
+      }
+    }
+
     this.pinchValue = 1;
     this.scaleValue = 1;
   }
@@ -3128,8 +3141,8 @@ export struct LocalMusic {
       Stack() {
         Column() {
           Image(StrUtil.isEmpty(item.pixelMapPath) ?Utility.getMusisBg2(index) : item.pixelMapPath)
-            .height(this.isGridCoverBig?150:100)
-            .width(this.isGridCoverBig?150:110)
+            .height(this.getGridHeight())
+            .width(this.getGridWight())
             .alt($r('app.media.ic_avatar6'))
             .clip(true)
             .borderRadius({
@@ -3214,14 +3227,14 @@ export struct LocalMusic {
 
             })
           )
-          .height(this.isGridCoverBig?50:40)
-          .width(this.isGridCoverBig?150:110)
+          .height(this.twoFingerType==3?50:40)
+          .width(this.getGridWight())
           .justifyContent(FlexAlign.Center)
           .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20 ,
             right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:20})
 
         }
-        .width(this.isGridCoverBig?150:110)
+        .width(this.getGridWight())
         .borderRadius(20)
         .backgroundImage(item.pixelMapPath)
         .backgroundImageSize({ height: '100%',width:'100%' })
@@ -3247,7 +3260,7 @@ export struct LocalMusic {
     }
     .backgroundColor(Color.Transparent)
     .width('100%')
-    .height(this.isGridCoverBig?205:150)
+    .height(this.getGridAllHeight())
     .onClick(() => {
       if(this.isMultiSelect&&item.type!==CommonConstants.TYPE_IS_DIR){
         this.handleFileSelection(item, !this.selectedFiles.some(x  => x.filePath  === item.filePath))
@@ -3258,6 +3271,53 @@ export struct LocalMusic {
     })
   }
 
+  getGridAllHeight(){
+    let heightG = 205
+    switch (this.twoFingerType){
+      case 1:
+        heightG = 120
+        break;
+      case 2:
+        heightG = 150
+        break;
+      case 3:
+        heightG = 205
+        break;
+    }
+    return heightG
+  }
+
+  getGridHeight(){
+    let heightG = 150
+    switch (this.twoFingerType){
+      case 1:
+        heightG = 80
+      break;
+      case 2:
+        heightG = 100
+      break;
+      case 3:
+        heightG = 150
+      break;
+    }
+    return heightG
+  }
+
+  getGridWight(){
+    let wightG = 150
+    switch (this.twoFingerType){
+      case 1:
+        wightG = 80
+        break;
+      case 2:
+        wightG = 110
+        break;
+      case 3:
+        wightG = 150
+        break;
+    }
+    return wightG
+  }
 
   @Builder
   MenuBuilder(item: VideoItem,index: number,filePath:string) {
@@ -3338,9 +3398,32 @@ export struct LocalMusic {
     .height(item.type === CommonConstants.TYPE_IS_DIR ?'22%':'40%')
   }
 
+
+
   private listMaxScrollOffsetY: number = 0
   @State selectedIndex: number = -1
-  @Builder
+  setlistTwoFingers() {
+    this.pinchValue = this.scaleValue;
+    Logger.info('this.pinchValue = ' + this.pinchValue);
+    if (this.pinchValue >= 1) {
+      this.twoFingerType++
+      Logger.info('this.twoFingerType1 = ' + this.twoFingerType);
+      if (this.twoFingerType > 3) {
+        this.twoFingerType = 1
+        this.isGridMusic = true
+      }
+    } else {
+      this.twoFingerType--
+      Logger.info('this.twoFingerType2 = ' + this.twoFingerType);
+      if (this.twoFingerType < 1) {
+        this.twoFingerType = 1
+
+      }
+    }
+    this.pinchValue = 1;
+    this.scaleValue = 1;
+  }
+    @Builder
   getListView() {
 
     List({ scroller: this.listScroller }) {
@@ -3397,7 +3480,9 @@ export struct LocalMusic {
           .animation({ curve: Curve.Sharp, duration: 300 })
 
         }
-        .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
+        // .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
+        .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+          TransitionEffect.scale({ x: 0, y: 0 })  ))
         .clickEffect({level:ClickEffectLevel.LIGHT})
         .swipeAction((
           (this.modeType==0||this.modeType==1 ||((this.modeType==3||this.modeType==2)&&this.isCanBack))
@@ -3514,6 +3599,17 @@ export struct LocalMusic {
 
       }, (item: VideoItem) => item.filePath)
     }
+    .scale({x:this.scaleValue,y:this.scaleValue,z:1})
+    .gesture(PinchGesture({ fingers: 2 })
+      .onActionEnd((event: GestureEvent)=>{
+        this.setlistTwoFingers()
+      })
+      .onActionUpdate(e=>{
+        this.scaleValue = this.pinchValue*e.scale
+      })
+      .onActionStart(e => {
+
+      }))
     // .divider({ strokeWidth: 1, color: this.isDarkMode? '#333333':'#ffe9f0f0' })
     .margin({ bottom: this.isCoverOpacity() ? 80 : 166 })
     .cachedCount(6)
@@ -3543,10 +3639,12 @@ export struct LocalMusic {
     )
     .onAreaChange((oldValue: Area, newValue: Area) => {
       this.listArea = newValue
-      if(this.isGridCoverBig){
+      if(this.twoFingerType==3){
         this.listMaxScrollOffsetY = this.videoLocalList.length * (ITEM_HEIGHT_BIG) - 10
-      }else{
+      }else if(this.twoFingerType==2){
         this.listMaxScrollOffsetY = this.videoLocalList.length * (ITEM_HEIGHT) - 10
+      }else if(this.twoFingerType==1){
+        this.listMaxScrollOffsetY = this.videoLocalList.length * (ITEM_HEIGHT_SMALL) - 10
       }
 
     })
@@ -5103,6 +5201,8 @@ export struct LocalMusic {
     })
     .backgroundBlurStyle(this.isPuraWP()&&this.currentSwiperIndex===0?BlurStyle.NONE:BlurStyle.BACKGROUND_ULTRA_THICK)
     .hitTestBehavior(HitTestMode.Transparent)
+    // .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+    //   TransitionEffect.scale({ x: 0, y: 0 })  ))
     .backgroundBrightness({rate:this.isPuraWP()?0.1:0,lightUpDegree:-0.1})
     .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
     .onClick( ()=>{
@@ -6097,6 +6197,8 @@ export struct LocalMusic {
           .visibility(this.isPuraWP()?Visibility.None:Visibility.Visible)
           .borderRadius(this.isCoverRectangle ? 20 : '100%')
           .clickEffect({level:ClickEffectLevel.MIDDLE})
+          // .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+          //   TransitionEffect.scale({ x: 0, y: 0 })  ))
           .align(Alignment.Center)// .opacity(this.isCoverOpacity()||this.isCoverRectangle?0:1)
           .clip(true)
           .rotate({