实现滚动的时候可以自动隐藏标题栏

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

@@ -75,7 +75,7 @@ struct NewIndex {
   @Provide CONTROL_PlayStatus: number = PlayStatus.INIT;
   @Provide progressValue: number = 0;
   @State isShowPrecious: boolean = false //播控条显示上一首按钮
-  @State bottomBarHeight: number = 72;
+  @State bottomBarHeight: number = 70;
   @StorageProp('bottomSafeHeight') bottomSafeHeight: number = 0;
   @Provide cover: string | undefined = '';
   // @Provide currentSong: VideoItem | undefined = undefined;
@@ -468,16 +468,16 @@ struct NewIndex {
           this.PlayController()
         }
         .width('90%')
-        .borderRadius(17)
+        .borderRadius(15)
         .margin({ bottom:DeviceUtil.getDeviceType() === resourceManager.DeviceType.DEVICE_TYPE_2IN1
           ? 30 :this.bottomSafeHeight })
         .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
         .backgroundImage( this.cover)
-        .visibility(this.isMultiSelect ? Visibility.None : Visibility.Visible)
+        .visibility(this.isMultiSelect||(this.mType>0&&this.mType<6) ? Visibility.None : Visibility.Visible)
         .backgroundImageSize( {  width: '100%' })
         .animation({
           duration: 500,
-          curve: 'ease-in-out' // 可选动画曲线
+          curve: Curve.Friction  // 可选动画曲线
         })
         .opacity(0.99)
         .clickEffect({ level: ClickEffectLevel.HEAVY })
@@ -568,13 +568,13 @@ struct NewIndex {
     Row() {
       Image( StrUtil.isNotEmpty(this.currentSong?.pixelMapPath)?
         this.currentSong?.pixelMapPath:$r('app.media.music_red'))
-        .height(45)
+        .height(48)
         .objectFit(ImageFit.Contain)
         .alt( $r('app.media.music_red'))
         .fillColor(this.themeColor)
         .borderRadius(8)
         .shadow({
-          radius: 10,
+          radius: 15,
           type: ShadowType.BLUR,
           color: 'on_primary'
         })

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

@@ -31,6 +31,7 @@ import { ServerLogUtil } from '../common/util/ServerLogUtil';
 // @Entry
 @Component
 export struct SettingPage {
+  @State autoHideTitle: boolean = true //滚动自动隐藏标题栏
   @State isNoJumpToHome: boolean = false //网盘播放不跳转首页
   @State iconCurrentID: string = 'default';//图标的id
   @State iconArray: Array<Icon> = []
@@ -255,6 +256,7 @@ export struct SettingPage {
   // 组件生命周期
   aboutToAppear() {
     // this.geIDD()
+    this.autoHideTitle = PreferencesUtil.getBooleanSync('autoHideTitle', true)
     this.isShowPrecious = PreferencesUtil.getBooleanSync('isShowPrecious', false)
     this.isBgPlayOpen = PreferencesUtil.getBooleanSync(SettingPage.IS_BGPLAY_OPEN, true)
     this.isAutoRatate = PreferencesUtil.getBooleanSync(SettingPage.IS_AUTO_RATATE, true)
@@ -2296,35 +2298,35 @@ export struct SettingPage {
       Line().width('100%').height(0.3).backgroundColor($r('app.color.index_tab_unselected_font_color'))
 
 
-      // Row() {
-      //   SymbolGlyph($r('sys.symbol.text_clipboard'))
-      //     .fontSize(20)
-      //     .fontColor([this.themeColor])
-      //     .alignSelf(ItemAlign.Center)
-      //     .margin({ left: 15 })
-      //   Text('显示分类导航')
-      //     .margin({ left: 8 })
-      //     .fontSize(15)
-      //     .fontColor(Color.Gray)
-      //     .fontWeight(480)
-      //     .layoutWeight(1)
-      //   Toggle({ type: ToggleType.Switch, isOn: this.isShowTitleBar })
-      //     .selectedColor(this.themeColor)
-      //     .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-      //     .switchPointColor(Color.White)
-      //     .margin({ right: 18 })
-      //     .onChange((checked: boolean) => {
-      //       this.isShowTitleBar = checked;
-      //       PreferencesUtil.put(SettingPage.IS_SHOW_TITLTBAR, this.isShowTitleBar)
-      //       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'))
+      Row() {
+        SymbolGlyph($r('sys.symbol.text_clipboard'))
+          .fontSize(20)
+          .fontColor([this.themeColor])
+          .alignSelf(ItemAlign.Center)
+          .margin({ left: 15 })
+        Text('滚动隐藏标题栏')
+          .margin({ left: 8 })
+          .fontSize(15)
+          .fontColor(Color.Gray)
+          .fontWeight(480)
+          .layoutWeight(1)
+        Toggle({ type: ToggleType.Switch, isOn: this.autoHideTitle })
+          .selectedColor(this.themeColor)
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .switchPointColor(Color.White)
+          .margin({ right: 18 })
+          .onChange((checked: boolean) => {
+            this.autoHideTitle = checked;
+            PreferencesUtil.put('autoHideTitle', this.autoHideTitle)
+            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'))
 
       // Row() {
       //   SymbolGlyph($r('sys.symbol.label'))

entry/src/main/ets/pages/UploadMusicPage.ets

@@ -1997,7 +1997,7 @@ export struct UploadMusicPage {
       Scroll() {
         Column({ space: 0 }) {
           // 账户选择区域
-          this.AccountSelectorSection()
+          // this.AccountSelectorSection()
 
           // 上传配置区域
           this.UploadConfigSection()

entry/src/main/ets/pages/WebDavMainPage.ets

@@ -1219,13 +1219,18 @@ export struct WebDavMainPage {
         // 序号
         // 歌曲封面
         Image(song.pixelMapPath ? song.pixelMapPath : $r('app.media.music_red'))
-          .width(48)
-          .height(48)
-          .borderRadius(10)
+          .width(52)
+          .height(52)
+          .borderRadius(9)
           .sourceSize({width:38, height:38})
           .alt($r('app.media.music_red'))
           .fillColor(this.themeColor)
           .objectFit(ImageFit.Cover)
+          .shadow({
+            radius: StrUtil.isEmpty(song.pixelMapPath) ?6:14,
+            type: ShadowType.BLUR,
+            color: 'on_primary'
+          })
           .margin({ left: 8 })
           .onClick(() => {
             this.playSong(song, index, true);

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

@@ -624,6 +624,8 @@ const ITEM_HEIGHT_BIG: number = 78; // 列表项大高度
 @Preview
 @Component
 export struct LocalMusic {
+  private prevOffsetY: number = 0; // 记录上一次的Y轴偏移量
+  @State autoHideTitle: boolean = true //滚动自动隐藏标题栏
   // 字母表
   @State alphaBet: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
     'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
@@ -729,7 +731,7 @@ export struct LocalMusic {
   @State sortType: number = 4 //默认排序方式
   @State isShowSimi: boolean = false //是否显示私密音频
   @State isShowFAV: boolean = true //是否显示我的收藏
-  @State @Watch('onTopBarhange')isShowTitleBar: boolean = true //是否显示分类导航条
+  @State isShowTitleBar: boolean = true //是否显示分类导航条
   @State isShowAllBar: boolean = true //是否显示播放全部条
   @State isShowSingleLineLyric: boolean = false //是否显示单行歌词
   @State isShowHistory: boolean = true //是否显示最近播放
@@ -791,29 +793,13 @@ export struct LocalMusic {
     this.isDarkMode = this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
   }
 
-  //bar导航条显示状态变化,不显示的话把topBarHeight=0
-  onTopBarhange(){
-    if(this.isShowTitleBar){
-      console.log('onecold 导航条显示')
-      this.topBarHeight = 50
-      this.offHeight = 75
-    }else{
-      console.log('onecold 导航条隐藏')
-      this.topBarHeight = 0
-      if(this.twoFingerType!=4){
-        this.offHeight = 30
-      }
-
-    }
 
-  }
 
   //点击某个歌单id发生变化的时候回调
   onIDChange(){
     console.log('onecold 歌单id发生变化this.currentSongListID='+this.currentSongListID)
     console.log('onecold 歌单id发生变化this.currentSongListName='+this.currentSongListName)
     if(this.modeType==4){
-      this.isShowTitleBar = false
       this.titleName = this.currentSongListName
       this.rightTopImage = $r('sys.symbol.sort')
       //获取缓存
@@ -855,7 +841,7 @@ export struct LocalMusic {
 
   onModeChange() {
     this.isFavMusic = false
-    this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, false)
+    this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     switch (this.modeType) {
       case 0:
         this.getSortedFiles(this.currentPath)
@@ -1357,6 +1343,7 @@ export struct LocalMusic {
     context.getApplicationContext().setColorMode(colorMode)
   }
   initSetting() {
+    this.autoHideTitle = PreferencesUtil.getBooleanSync('autoHideTitle', true)
     this.isShowPrecious = PreferencesUtil.getBooleanSync('isShowPrecious', false)
     this.sortType = PreferencesUtil.getNumberSync(SettingPage.SORT_TYPE, 4)
     this.isCustomizeBg = PreferencesUtil.getBooleanSync(SettingPage.IS_CUSTOMIZE_BG, false)
@@ -1369,7 +1356,7 @@ export struct LocalMusic {
     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.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, false)
+    this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 2)
     this.isCoverTop = PreferencesUtil.getBooleanSync(SettingPage.IS_COVER_TOP, true)
@@ -1397,7 +1384,7 @@ export struct LocalMusic {
     }
     //如果是hicar连接状态，这些都是false
     if(this.isHiCar()){
-      this.isShowTitleBar = false//不显示导航栏
+      this.isShowTitleBar = true//不显示导航栏
       this.columns=4
       if(!(this.windowWidth>1800&&this.windowHeight>=1200))//小屏幕不可以Grid
       {
@@ -3333,7 +3320,7 @@ export struct LocalMusic {
                   ? Visibility.Visible : Visibility.None)
                 .animation({
                   duration: 500,
-                  curve: 'ease-in-out' // 可选动画曲线
+                  curve: Curve.Friction // 可选动画曲线
                 })
                 .width('100%')
               }
@@ -3819,6 +3806,12 @@ export struct LocalMusic {
     }
     .padding({ top: this.topSafeHeight+10, left: 10, right: 10 })
     .width('100%')
+    .visibility(this.isShowTitleBar?Visibility.Visible:
+      this.autoHideTitle?Visibility.None:Visibility.Visible)
+    .animation({
+      duration: 500,
+      curve: Curve.Friction  // 可选动画曲线
+    })
   }
 
 
@@ -4761,10 +4754,13 @@ export struct LocalMusic {
           .width(this.twoFingerType == 3 ? 55 : this.twoFingerType == 2 ? 50 : 40)
           .fillColor(this.themeColor)// .fontSize(33)
           .alt($r('app.media.music_group'))
-          .borderRadius('100%')
-          // .interpolation(ImageInterpolation.High)// 用于重采样后的抗锯齿
-          // .autoResize(true) // 重采样，可减少内存占用
+          .borderRadius(this.isCoverRectangle?9:'100%')
           .clip(true)
+          .shadow({
+            radius: 8,
+            type: ShadowType.BLUR,
+            color: 'on_primary'
+          })
           .sourceSize({width:38, height:38})
           .margin({ left: 20, top: 8, bottom: 8 })
         Column() {
@@ -4855,7 +4851,7 @@ export struct LocalMusic {
             .height(this.twoFingerType == 3 ? 55 : this.twoFingerType == 2 ? 50 : 40)
             .width(this.twoFingerType == 3 ? 55 : this.twoFingerType == 2 ? 50 : 40)
             .alt($r('app.media.music_red'))
-            .borderRadius(this.isCoverRectangle?13:'100%')
+            .borderRadius(this.isCoverRectangle?9:'100%')
             .clip(true)
             .draggable(false)
             .sourceSize({width:38, height:38})
@@ -4863,6 +4859,11 @@ export struct LocalMusic {
             // .autoResize(true) // 重采样，可减少内存占用
             .opacity(this.opacityItem)// 绑定透明度
             .margin({ left: 20 })
+            .shadow({
+              radius: StrUtil.isEmpty(item.pixelMapPath) ?6:14,
+              type: ShadowType.BLUR,
+              color: 'on_primary'
+            })
             .gesture(LongPressGesture()
               .onAction(async () => {
                 //如果是专辑和艺术家的首页，不能长按
@@ -5068,96 +5069,7 @@ export struct LocalMusic {
   capsuleSelectedIndexesChanged() {
     this.modeType = this.tabSelectedIndexes[0]
   }
-  @Builder
-  tabTitle() {
-    Column({ space: 2 }) {
-      SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
-      Line()
-        .width('100%')
-        .height(1)
-        .backgroundColor($r('app.color.index_background'))
-        .opacity(this.barOpacity)
-        .visibility(this.isCustomizeBg ? Visibility.Hidden : Visibility.Visible)
-    }
-    .width('100%')
-    .height(this.topBarHeight)
-    .visibility(this.isShowTitleBar ? Visibility.Visible : Visibility.None)
-  }
-
-  // @Builder
-  // tabTitle() {
-  //   Column() {
-  //     // 使用 Stack 布局来实现绝对定位效果
-  //     Stack() {
-  //       // 背景动画容器
-  //       Row() {
-  //         ForEach(this.tabs, (i: string, index) => {
-  //           Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
-  //             Flex()
-  //               .backgroundColor(this.isDarkMode ? $r('app.color.tab_item_bg') : this.themeColor)
-  //               .borderRadius(20)
-  //               .padding(10)
-  //               .margin(6)
-  //               .width('100%')
-  //               .height('100%')
-  //               .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
-  //               .visibility(this.modeType === index ? Visibility.Visible : Visibility.None)
-  //               .opacity(this.modeType === index ? 1 : 0)
-  //               .animation({
-  //                 duration: 666,
-  //                 playMode: PlayMode.Normal,
-  //                 curve: 'ease-in-out'
-  //               });
-  //           }
-  //           .layoutWeight(1)
-  //           .margin({
-  //             left: this.currentBreakpoint !== BreakpointTypeEnum.SM ? 20 : 5,
-  //             right: this.currentBreakpoint !== BreakpointTypeEnum.SM ? 20 : 5, bottom: 1
-  //           });
-  //         });
-  //       }
-  //       .width('100%')
-  //       .height(50);
-  //
-  //       // 导航栏容器
-  //       Row() {
-  //         ForEach(this.tabs, (item: string, index) => {
-  //           Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
-  //             Text(item)
-  //               .fontSize(16)
-  //               .fontColor(this.modeType === index ? Color.White : $r('app.color.text_color'))
-  //               .padding(15)
-  //               .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.6 })
-  //               .onClick(() => {
-  //                 this.modeType = index;
-  //                 // this.onModeChange();
-  //               });
-  //           }
-  //           .layoutWeight(1)
-  //           .stateStyles({
-  //             pressed: { opacity: 0.6 } // 按压反馈
-  //           });
-  //         });
-  //       }
-  //       .width('100%')
-  //       .height(this.topBarHeight)
-  //       .opacity(this.barOpacity)
-  //       .backgroundColor(Color.Transparent);
-  //
-  //     }
-  //     .width('100%')
-  //     .height(this.topBarHeight)
-  //     .opacity(this.barOpacity)
-  //
-  //     Line()
-  //       .width('100%')
-  //       .height(1)
-  //       .backgroundColor($r('app.color.index_background'))
-  //       .opacity(this.barOpacity)
-  //       .visibility(this.isCustomizeBg ? Visibility.Hidden : Visibility.Visible)
-  //   }
-  //   .visibility(this.isShowTitleBar ? Visibility.Visible : Visibility.None)
-  // }
+
 
   @State currentTitleName: string = '' //点击歌单，艺术家，专辑进去后的标题
   @State currentTitleCover: string | ResourceStr = '' //点击歌单，艺术家，专辑进去后的封面
@@ -5450,7 +5362,22 @@ export struct LocalMusic {
               PreferencesUtil.putSync('lastColumns', this.columns);
             })
         )
-
+        .onScrollFrameBegin((offset: number) => {
+          // 获取当前滚动偏移量
+          const currentOffsetY = this.waterScroller.currentOffset().yOffset;
+          // 判断滚动方向
+          if (currentOffsetY > this.prevOffsetY) {
+            console.log("onecold 向上滚动");
+            this.isShowTitleBar = false
+          } else if (currentOffsetY < this.prevOffsetY) {
+            console.log("onecold 向下滚动");
+            this.isShowTitleBar = true
+          }
+          // 更新前一次偏移量
+          this.prevOffsetY = currentOffsetY;
+
+          return { offsetRemain: offset };
+        })
 
         //允许拖拽音乐和视频到List或Grid上自动导入视频
         .allowDrop([uniformTypeDescriptor.UniformDataType.AUDIO,uniformTypeDescriptor.UniformDataType.VIDEO])
@@ -5819,6 +5746,17 @@ export struct LocalMusic {
       this.endIndex = end
     })
     .onScrollFrameBegin((offset: number) => {
+      const currentOffsetY = this.scroller.currentOffset().yOffset;
+      // 判断滚动方向
+      if (currentOffsetY > this.prevOffsetY) {
+        console.log("onecold 向上滚动");
+        this.isShowTitleBar = false
+      } else if (currentOffsetY < this.prevOffsetY) {
+        console.log("onecold 向下滚动");
+        this.isShowTitleBar = true
+      }
+      // 更新前一次偏移量
+      this.prevOffsetY = currentOffsetY;
       if (this.currentWidthBreakpoint !== WidthBreakpoint.WIDTH_SM ||
         (this.currentHeightBreakpoint !== HeightBreakpoint.HEIGHT_MD &&
           this.currentHeightBreakpoint !== HeightBreakpoint.HEIGHT_SM)) {
@@ -6661,6 +6599,18 @@ export struct LocalMusic {
 
     })
     .onScrollFrameBegin((offset: number) => {
+      // 获取当前滚动偏移量
+      const currentOffsetY = this.listScroller.currentOffset().yOffset;
+      // 判断滚动方向
+      if (currentOffsetY > this.prevOffsetY) {
+        console.log("onecold 向上滚动");
+        this.isShowTitleBar = false
+      } else if (currentOffsetY < this.prevOffsetY) {
+        console.log("onecold 向下滚动");
+        this.isShowTitleBar = true
+      }
+      // 更新前一次偏移量
+      this.prevOffsetY = currentOffsetY;
 
       //滚动小屏幕 比如puraX外屏和手机横屏可以隐藏bottomBarHeight topBarHeight
       // if (this.isPhoneLan()) {
@@ -8914,7 +8864,7 @@ export struct LocalMusic {
           duration: 666,
           curve: 'ease-in-out' // 可选动画曲线
         })
-        .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 600 }),
+        .transition(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 0.8, y: 0.8 }).animation({ duration: 600 }),
           TransitionEffect.scale({ x: 0, y: 0 })))
         .clickEffect({ level: ClickEffectLevel.MIDDLE })
         //拖动List关键代码开始
@@ -9066,7 +9016,7 @@ export struct LocalMusic {
             .width(this.sonTwoFingerType == 3||this.sonTwoFingerType==4 ? 55 : this.sonTwoFingerType == 2 ? 48 : 40)
             .alt($r('app.media.music_red'))
             .fillColor(this.themeColor)
-            .borderRadius('100%')
+            .borderRadius(this.isCoverRectangle?11:'100%')
             .clip(true)
             .interpolation(ImageInterpolation.High)// 用于重采样后的抗锯齿
             .draggable(false)// 禁止长按手势拖动

entry/src/main/ets/view/NavidromePage.ets

@@ -974,9 +974,9 @@ export struct NavidromePage {
       Row({ space: 12 }) {
         // 歌曲封面
         Image(song.pixelMapPath ? song.pixelMapPath : $r('app.media.music_red'))
-          .width(48)
-          .height(48)
-          .borderRadius(10)
+          .width(52)
+          .height(52)
+          .borderRadius(9)
           .sourceSize({ width: 38, height: 38 })
           .draggable(false)
           .interpolation(ImageInterpolation.High)// 用于重采样后的抗锯齿
@@ -985,6 +985,11 @@ export struct NavidromePage {
           .fillColor(song.pixelMapPath ? undefined : this.themeColor)
           .objectFit(ImageFit.Cover)
           .margin({ left: 20 })
+          .shadow({
+            radius: StrUtil.isEmpty(song.pixelMapPath) ?6:14,
+            type: ShadowType.BLUR,
+            color: 'on_primary'
+          })
           .onClick(() => {
             this.playSong(song, index, true);
           })

entry/src/main/resources/base/element/color.json

@@ -137,7 +137,7 @@
     },
     {
       "name": "settings_background",
-      "value": "#FFECE7E7"
+      "value": "#F3F3F3"
     },
     {
       "name": "settings_background_main",