增加listitem的点击效果

entry/src/main/ets/pages/NewIndex.ets

@@ -293,7 +293,7 @@ struct NewIndex{
   @Builder
   getDrawerView(){
     List({space: 0, scroller: this.scroller}){
-      ForEach(this.isShowSponsorship?mainViewModel.getDrawerData2():mainViewModel.getDrawerData(),(item: ItemData)=>{
+      ForEach(this.isShowSponsorship?mainViewModel.getDrawerData2():mainViewModel.getDrawerData(),(item: ItemData,index:number)=>{
         ListItem(){
           Button({ type: ButtonType.Capsule, stateEffect: true }) {
             Row() {
@@ -449,6 +449,7 @@ struct NewIndex{
             }
           })
         }
+        .transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 600, curve: Curve.Ease, delay: 60*index }))
         .width('90%')
         .height(55)
 

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

@@ -253,15 +253,17 @@ export struct SettingPage {
         }
       })
         .layoutWeight(1)
-        .padding(25)
-      Row({ space: 20 }) {
+        .padding(15)
+      Row({ space: 10 }) {
         Button('取消')
           .stateEffect(true)
+          .backgroundColor(this.themeColor)
           .onClick(() => {
             this.showColorPicker = false
           })
         Button('确定')
           .stateEffect(true)
+          .backgroundColor(this.themeColor)
           .onClick(() => {
             this.themeColor = this.customColor
             PreferencesUtil.putSync(SettingPage.THEME_COLOR_KEY, this.customColor)
@@ -439,7 +441,7 @@ export struct SettingPage {
       // 主题色自定义弹窗
 
     }
-    .padding({ top: 8, bottom: 8, left: 18, right: 18 })
+    .padding({ top: 8, bottom: 8, left: 15, right: 15 })
     .width('100%')
     .backgroundColor(Color.Transparent)
     .borderRadius(24)
@@ -497,26 +499,26 @@ 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)
-              Image($r('app.media.arrow_right'))
-                .width(22)
-                .height(22)
-                .margin({ right: 18 })
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Row() {
+                Text('主题设置')
+                  .margin({ left: 18 })
+                  .fontSize(15)
+                  .fontColor(Color.Gray)
+                  .fontWeight(480)
+                  .layoutWeight(1)
+                Image($r('app.media.arrow_right'))
+                  .width(22)
+                  .height(22)
+                  .margin({ right: 18 })
+              }
             }
+            .backgroundColor(Color.Transparent)
             .height(55)
             .onClick(() => {
               this.showColorPicker = false;
               this.isThemeSheet = true;
-              // 如果当前颜色是自定义，则同步到自定义色块
-              // if (this.isCustomThemeColor()) {
-                this.customColor = this.themeColor;
-              // }
+              this.customColor = this.themeColor;
             })
             .bindSheet($$this.isThemeSheet, this.themeSheetBuilder(), {
               height: '95%',
@@ -893,22 +895,25 @@ export struct SettingPage {
 
             Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
             // 歌词API
-            Row() {
-              Text('歌词:')
-                .margin({ left: 18, right: 6 })
-                .fontSize(15)
-                .fontColor(Color.Gray)
-              Text(this.lyricApiUrl)
-                .margin({ right: 10 })
-                .fontSize(15)
-                .fontColor(Color.Gray)
-                .layoutWeight(1)
-              Image(this.isDarkMode ? $r('app.media.rename2') : $r('app.media.rename'))
-                .width(22)
-                .height(22)
-                .margin({ right: 18 })
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Row() {
+                Text('歌词:')
+                  .margin({ left: 18, right: 6 })
+                  .fontSize(15)
+                  .fontColor(Color.Gray)
+                Text(this.lyricApiUrl)
+                  .margin({ right: 10 })
+                  .fontSize(15)
+                  .fontColor(Color.Gray)
+                  .layoutWeight(1)
+                Image(this.isDarkMode ? $r('app.media.rename2') : $r('app.media.rename'))
+                  .width(20)
+                  .height(20)
+                  .margin({ right: 18 })
 
+              }
             }
+            .backgroundColor(Color.Transparent)
             .onClick(() => {
               this.apiDialogType = 'lyric'
               this.tempApiUrl = this.lyricApiUrl
@@ -917,28 +922,30 @@ export struct SettingPage {
             .height(55)
 
             // 封面API
-            Row() {
-              Text('封面:')
-                .margin({ left: 18, right: 6 })
-                .fontSize(15)
-                .fontColor(Color.Gray)
-              Text(this.coverApiUrl)
-                .margin({ right: 10 })
-                .fontSize(15)
-                .fontColor(Color.Gray)
-                .layoutWeight(1)
-              Image(this.isDarkMode ? $r('app.media.rename2') : $r('app.media.rename'))
-                .width(20)
-                .height(20)
-                .margin({ right: 18 })
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Row() {
+                Text('封面:')
+                  .margin({ left: 18, right: 6 })
+                  .fontSize(15)
+                  .fontColor(Color.Gray)
+                Text(this.coverApiUrl)
+                  .margin({ right: 10 })
+                  .fontSize(15)
+                  .fontColor(Color.Gray)
+                  .layoutWeight(1)
+                Image(this.isDarkMode ? $r('app.media.rename2') : $r('app.media.rename'))
+                  .width(20)
+                  .height(20)
+                  .margin({ right: 18 })
 
+              }
             }
+            .backgroundColor(Color.Transparent)
             .onClick(() => {
               this.apiDialogType = 'cover'
               this.tempApiUrl = this.coverApiUrl
               this.apiDialogController.open()
             })
-            .justifyContent(FlexAlign.Center)
             .height(55)
 
 

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

@@ -2230,72 +2230,73 @@ export struct LocalMusic {
 
   @Builder
   private DirItem(item: VideoItem, index?: number) {
-    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)
-        .fillColor(this.themeColor)
-        // .fontSize(33)
-        .alt($r('app.media.music_group'))
-        .borderRadius('100%')
-        .clip(true)
-        .margin({ left: 20, top: 8, bottom: 8 })
-      Column() {
-        Text(item.name.startsWith('.') ? item.name.replace(/\./g, '') : item.name)
-          .fontSize(16)
-          .maxLines(1)// .width('88%')
-          .animation({
-            duration: 555,
-            curve: 'ease-in-out',
-          })
-          .transition({
-            type: TransitionType.Insert,
-            opacity: 0,
-            translate: { x: 160 }
-          })
-          .margin({ left: 10, right: 20 })
-          .fontColor($r('app.color.text_color'))
-        Row() {
-          Text(`${this.artistMap.get(item.name)?.length ?? 0}首`)
-            .fontSize(11)
-            .padding({ top: 8 })
-            .visibility(this.modeType === 2 ? Visibility.Visible : Visibility.None)
-            .fontColor($r('app.color.text_color'))
-            .margin({ left: 10 })
-          Text(`${this.albumMap.get(item.name)?.length ?? 0}首`)
-            .fontSize(11)
-            .padding({ top: 8 })
-            .visibility(this.modeType === 3 ? Visibility.Visible : Visibility.None)
+    Button({ type: ButtonType.Normal, stateEffect: true }) {
+      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)
+          .fillColor(this.themeColor)
+            // .fontSize(33)
+          .alt($r('app.media.music_group'))
+          .borderRadius('100%')
+          .clip(true)
+          .margin({ left: 20, top: 8, bottom: 8 })
+        Column() {
+          Text(item.name.startsWith('.') ? item.name.replace(/\./g, '') : item.name)
+            .fontSize(16)
+            .maxLines(1)// .width('88%')
+            .animation({
+              duration: 555,
+              curve: 'ease-in-out',
+            })
+            .transition({
+              type: TransitionType.Insert,
+              opacity: 0,
+              translate: { x: 160 }
+            })
+            .margin({ left: 10, right: 20 })
             .fontColor($r('app.color.text_color'))
-            .margin({ left: 10 })
-          Blank()
+          Row() {
+            Text(`${this.artistMap.get(item.name)?.length ?? 0}首`)
+              .fontSize(11)
+              .padding({ top: 8 })
+              .visibility(this.modeType === 2 ? Visibility.Visible : Visibility.None)
+              .fontColor($r('app.color.text_color'))
+              .margin({ left: 10 })
+            Text(`${this.albumMap.get(item.name)?.length ?? 0}首`)
+              .fontSize(11)
+              .padding({ top: 8 })
+              .visibility(this.modeType === 3 ? Visibility.Visible : Visibility.None)
+              .fontColor($r('app.color.text_color'))
+              .margin({ left: 10 })
+            Blank()
 
-        }
+          }
 
-      }
-      .height('100%')
-      .layoutWeight(1)
-      .justifyContent(FlexAlign.Center)
-      .alignItems(HorizontalAlign.Start)
+        }
+        .height('100%')
+        .layoutWeight(1)
+        .justifyContent(FlexAlign.Center)
+        .alignItems(HorizontalAlign.Start)
 
-      Blank()
-      Image($r('app.media.arrow_right'))
-        .height(25)
-        .margin({ right: 10 })
-        .alignSelf(ItemAlign.Center)
-        .id(item.filePath)
+        Blank()
+        Image($r('app.media.arrow_right'))
+          .height(25)
+          .margin({ right: 10 })
+          .alignSelf(ItemAlign.Center)
+          .id(item.filePath)
 
 
+      }
     }
+    .backgroundColor(Color.Transparent)
     .height(ITEM_HEIGHT)
     .width('100%')
     .visibility(this.isShowDir(item.name)?Visibility.Visible:Visibility.None)
     .opacity(this.opacityItem) // 绑定透明度
-    .stateStyles({
-      pressed: { opacity: 0.6 } // 按压反馈
-    })
+
   }
 
   isShowDir(dirName:string){
@@ -2320,98 +2321,96 @@ export struct LocalMusic {
 
   @Builder
   private MusicItem(item: VideoItem, index?: number) {
+    Button({ type: ButtonType.Normal, stateEffect: true }) {
+      Row() {
+        Stack() {
 
-    Row() {
-      Stack() {
-
-        Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
-          .fillColor(this.themeColor)
-          .height(33)
-          .width(33)
-          .alt($r('app.media.music_red'))
-          .borderRadius('100%')
-          .clip(true)
-          .opacity(this.opacityItem)// 绑定透明度
-          .margin({ left: 20 })
-      }
-      .width('15%')
+          Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
+            .fillColor(this.themeColor)
+            .height(33)
+            .width(33)
+            .alt($r('app.media.music_red'))
+            .borderRadius('100%')
+            .clip(true)
+            .opacity(this.opacityItem)// 绑定透明度
+            .margin({ left: 20 })
+        }
+        .width('15%')
 
-      Column() {
         Column() {
-          Text(item.name)
-            .fontSize(14)
-            .maxLines(1)
-            .animation({
-              duration: 555,
-              curve: 'Linear',
-            })
-            .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
-            $r('app.color.text_color'))
-            .margin({ left: 10 })
-          Row() {
-            Text(StrUtil.isEmpty(item.artist) ? item.cTime : item.artist + '  ' + item?.album)
-              .fontSize(11)
-              .padding({ top: 8 })
-              .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
-              $r('app.color.text_color'))
-              .margin({ left: 10 })
-            Blank()
-            Text(item.size)
-              .fontSize(11)
-              .padding({ top: 8 })
-              .visibility(StrUtil.isEmpty(item.artist) ? Visibility.Visible : Visibility.None)
+          Column() {
+            Text(item.name)
+              .fontSize(14)
+              .maxLines(1)
+              .animation({
+                duration: 555,
+                curve: 'Linear',
+              })
               .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
               $r('app.color.text_color'))
               .margin({ left: 10 })
+            Row() {
+              Text(StrUtil.isEmpty(item.artist) ? item.cTime : item.artist + '  ' + item?.album)
+                .fontSize(11)
+                .padding({ top: 8 })
+                .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
+                $r('app.color.text_color'))
+                .margin({ left: 10 })
+              Blank()
+              Text(item.size)
+                .fontSize(11)
+                .padding({ top: 8 })
+                .visibility(StrUtil.isEmpty(item.artist) ? Visibility.Visible : Visibility.None)
+                .fontColor(this.currentSong?.filePath === item.filePath ? this.themeColor :
+                $r('app.color.text_color'))
+                .margin({ left: 10 })
+            }
+
           }
+          .height('100%')
+          .width('100%')
+          .justifyContent(FlexAlign.Center)
+          .alignItems(HorizontalAlign.Start)
 
         }
         .height('100%')
-        .width('100%')
-        .justifyContent(FlexAlign.Center)
-        .alignItems(HorizontalAlign.Start)
-
-      }
-      .height('100%')
-      .width('65%')
-
-      Column() {
-        Checkbox({ name: 'checkbox' + index })
-          .select(this.selectedFiles.some(x => x.filePath === item.filePath))
-          .selectedColor(this.themeColor)
-          .shape(CheckBoxShape.CIRCLE)
-          .opacity(this.isMultiSelect ? 1 : 0)
-          .animation({
-            duration: 666,
-            curve: 'Smooth' // 可选动画曲线
-          })
-          .visibility(this.isMultiSelect ? Visibility.Visible : Visibility.None)
-          .onChange((checked: boolean) => this.handleFileSelection(item, checked))
-          .margin({ left: 20, top: 8, bottom: 8 })
-          .width(22)
-          .height(22)
+        .width('65%')
 
+        Column() {
+          Checkbox({ name: 'checkbox' + index })
+            .select(this.selectedFiles.some(x => x.filePath === item.filePath))
+            .selectedColor(this.themeColor)
+            .shape(CheckBoxShape.CIRCLE)
+            .opacity(this.isMultiSelect ? 1 : 0)
+            .animation({
+              duration: 666,
+              curve: 'Smooth' // 可选动画曲线
+            })
+            .visibility(this.isMultiSelect ? Visibility.Visible : Visibility.None)
+            .onChange((checked: boolean) => this.handleFileSelection(item, checked))
+            .margin({ left: 20, top: 8, bottom: 8 })
+            .width(22)
+            .height(22)
+
+
+          ImageAnimator()
+            .images(this.imagesF)// 动画数组
+            .duration(1000)// 持续
+            .state(this.animationState)// 动画状态
+            .fillMode(FillMode.Forwards)
+            .width(18)
+            .visibility(this.videoUrl === item.filePath ? this.isMultiSelect ? Visibility.None : Visibility.Visible :
+            Visibility.None)
+            .height(18)
+            .iterations(-1) // 播放次数
+        }
+        .width('18%')
 
-        ImageAnimator()
-          .images(this.imagesF)// 动画数组
-          .duration(1000)// 持续
-          .state(this.animationState)// 动画状态
-          .fillMode(FillMode.Forwards)
-          .width(18)
-          .visibility(this.videoUrl === item.filePath ? this.isMultiSelect ? Visibility.None : Visibility.Visible :
-          Visibility.None)
-          .height(18)
-          .iterations(-1) // 播放次数
       }
-      .width('18%')
-
     }
+    .backgroundColor(Color.Transparent)
     .width('100%')
     .height(ITEM_HEIGHT)
-    .justifyContent(FlexAlign.SpaceBetween)
-    .stateStyles({
-      pressed: { opacity: 0.6 } // 按压反馈
-    })
   }
 
   private readonly tabs: string[] = ['文件夹', '媒体库', '艺术家', '专辑']
@@ -3305,6 +3304,7 @@ export struct LocalMusic {
           .animation({ curve: Curve.Sharp, duration: 300 })
 
         }
+        //.transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 800, curve: Curve.Ease, delay: 100*index }))
         .swipeAction((
           (this.modeType==0||this.modeType==1 ||((this.modeType==3||this.modeType==2)&&this.isCanBack))
             && item.type !== CommonConstants.TYPE_IS_CSJAD &&
@@ -4697,75 +4697,76 @@ export struct LocalMusic {
 
   @Builder
   private MusicItemSon(item: VideoItem, index?: number) {
+    Button({ type: ButtonType.Normal, stateEffect: true }) {
+      Row() {
+        Stack() {
 
-    Row() {
-      Stack() {
-
-        Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
-          .height(33)
-          .width(33)
-          .alt($r('app.media.music_red'))
-          .fillColor(this.themeColor)
-          .borderRadius('100%')
-          .clip(true)
-          .margin({ left: 20 })
-      }
-      .width('15%')
+          Image(StrUtil.isEmpty(item.pixelMapPath) ? $r('app.media.music_red') : item.pixelMapPath)
+            .height(33)
+            .width(33)
+            .alt($r('app.media.music_red'))
+            .fillColor(this.themeColor)
+            .borderRadius('100%')
+            .clip(true)
+            .margin({ left: 20 })
+        }
+        .width('15%')
 
-      Column() {
         Column() {
+          Column() {
 
-          Text(item.name)
-            .fontSize(14)
-            .fontColor(this.curIndex === index ?  this.themeColor :
-              this.isFrontWhite ? Color.White : $r('app.color.text_color'))
-            .maxLines(1)
-            .margin({ left: 10 })
-          Row() {
-            Text(StrUtil.isEmpty(item.artist) ? item.cTime : item.artist + '  ' + item?.album)
-              .fontSize(11)
-              .padding({ top: 8 })
-              .fontColor(this.curIndex === index ? this.themeColor :
-                this.isFrontWhite ? $r('app.color.playlistText_color') : $r('app.color.text_color'))
-              .margin({ left: 10 })
-            Blank()
-            Text(item.size)
-              .fontSize(11)
-              .padding({ top: 8 })
-              .visibility(StrUtil.isEmpty(item.artist) ? Visibility.Visible : Visibility.None)
-              .fontColor(this.curIndex === index ? $r('app.color.title_bar_bg_text') :
-                this.isFrontWhite ? $r('app.color.playlistText_color') : $r('app.color.text_color'))
+            Text(item.name)
+              .fontSize(14)
+              .fontColor(this.curIndex === index ?  this.themeColor :
+                this.isFrontWhite ? Color.White : $r('app.color.text_color'))
+              .maxLines(1)
               .margin({ left: 10 })
+            Row() {
+              Text(StrUtil.isEmpty(item.artist) ? item.cTime : item.artist + '  ' + item?.album)
+                .fontSize(11)
+                .padding({ top: 8 })
+                .fontColor(this.curIndex === index ? this.themeColor :
+                  this.isFrontWhite ? $r('app.color.playlistText_color') : $r('app.color.text_color'))
+                .margin({ left: 10 })
+              Blank()
+              Text(item.size)
+                .fontSize(11)
+                .padding({ top: 8 })
+                .visibility(StrUtil.isEmpty(item.artist) ? Visibility.Visible : Visibility.None)
+                .fontColor(this.curIndex === index ? $r('app.color.title_bar_bg_text') :
+                  this.isFrontWhite ? $r('app.color.playlistText_color') : $r('app.color.text_color'))
+                .margin({ left: 10 })
+            }
+
           }
+          .height('100%')
+          .width('100%')
+          .justifyContent(FlexAlign.Center)
+          .alignItems(HorizontalAlign.Start)
 
         }
         .height('100%')
-        .width('100%')
-        .justifyContent(FlexAlign.Center)
-        .alignItems(HorizontalAlign.Start)
+        .width('65%')
 
-      }
-      .height('100%')
-      .width('65%')
+        Column() {
+          ImageAnimator()
+            .images(this.imagesF)// 动画数组
+            .duration(1000)// 持续
+            .state(this.animationState)// 动画状态
+            .fillMode(FillMode.Forwards)
+            .width(18)
+            .visibility(this.videoUrl === item.filePath ? this.isMultiSelect ? Visibility.None : Visibility.Visible :
+            Visibility.None)
+            .height(18)
+            .iterations(-1) // 播放次数
+        }
+        .width('20%')
 
-      Column() {
-        ImageAnimator()
-          .images(this.imagesF)// 动画数组
-          .duration(1000)// 持续
-          .state(this.animationState)// 动画状态
-          .fillMode(FillMode.Forwards)
-          .width(18)
-          .visibility(this.videoUrl === item.filePath ? this.isMultiSelect ? Visibility.None : Visibility.Visible :
-          Visibility.None)
-          .height(18)
-          .iterations(-1) // 播放次数
       }
-      .width('20%')
-
     }
+    .backgroundColor(Color.Transparent)
     .width('100%')
     .height(58)
-    .justifyContent(FlexAlign.SpaceBetween)
     .shadow(this.scaleItem === index ? {
       radius: 70,
       color: '#15000000',
@@ -6984,7 +6985,7 @@ export struct LocalMusic {
       Row() {
         Button('取消')
           .fontColor(Color.White)
-          .backgroundColor($r('app.color.title_bar_bg'))//.linearGradient( { direction: GradientDirection.Right, colors:[['#ff37a0fc',0.0],['#67e667',0.5],['#f5856e',1.0]]})
+          .backgroundColor(this.themeColor)
           .height(50)
           .layoutWeight(1)
           .stateEffect(true)
@@ -6993,10 +6994,10 @@ export struct LocalMusic {
             DialogHelper.closeDialog('tips'); //关闭弹框
           })
         Button('跳转')
-          .fontColor(Color.White)//.linearGradient( { direction: GradientDirection.Right, colors:[['#ff37a0fc',0.0],['#67e667',0.5],['#f5856e',1.0]]})
+          .fontColor(Color.White)//
           .layoutWeight(1)
           .height(50)
-          .backgroundColor($r('app.color.title_bar_bg'))
+          .backgroundColor(this.themeColor)
           .stateEffect(true)
           .margin({ left: 6 })
           .onClick(() => {