NexIndex增加分类和歌单SegmentButton

LocalMusic的导航条改为SegmentButton有动画效果

AppScope/app.json5

@@ -2,8 +2,8 @@
   "app": {
     "bundleName": "com.xgplayer.ttmusic.hm",
     "vendor": "example",
-    "versionCode": 20251005,
-    "versionName": "1.6.3",
+    "versionCode": 20251009,
+    "versionName": "1.6.4",
     "icon": "$media:app_icon",
     "label": "$string:app_name",
     "multiAppMode": {

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

@@ -1,6 +1,6 @@
 import { AppUtil, DeviceUtil, DisplayUtil, LogUtil, PreferencesUtil, ToastUtil } from '@pura/harmony-utils';
 import TitleBar from '../view/TitleBar';
-import { curves, router } from '@kit.ArkUI';
+import { curves, LengthMetrics, router, SegmentButton, SegmentButtonOptions } from '@kit.ArkUI';
 import mainViewModel, { MainViewModel } from '../viewmodel/MainViewModel';
 import ItemData from '../viewmodel/ItemData';
 import type { sysResource } from '../viewmodel/ItemData';
@@ -53,6 +53,7 @@ const TAG = 'NewIndex'; // 日志标签
 @Entry
 @Component
 struct NewIndex {
+  @State isDarkMode: boolean = false
   /** 列表滚动器，用于抽屉菜单列表滚动 */
   private scroller: Scroller = new Scroller();
   /** 应用包名 */
@@ -87,6 +88,7 @@ struct NewIndex {
   @StorageProp('isHiCarStatus') isHiCarStatus: boolean = false;
   @StorageProp('curDisplayIsHiCar') curDisplayIsHiCar: boolean = false;
   @State idDefaultMediaKu: boolean = false
+
   /**
    * 是否显示更新日志开关
    */
@@ -138,6 +140,19 @@ struct NewIndex {
   /** 记录上一次点击返回键的时间戳，用于双击退出 */
   private backTime: number = 0;
 
+  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
+    buttons: [{ text: '分类' }, { text: '歌单' }],
+    direction: Direction.Ltr,
+    backgroundColor: $r('app.color.start_window_background'),
+    selectedBackgroundColor:$r('app.color.index_background'),
+    selectedFontColor: $r('app.color.text_color'),
+    localizedTextPadding: {
+      end: LengthMetrics.vp(10),
+      start: LengthMetrics.vp(10)
+    }
+  })
+  @State tabSelectedIndexes: number[] = [0]
+
   /**
    * 返回键处理逻辑：
    * - 如果不是根目录或有历史记录，发送广播通知更新列表
@@ -429,7 +444,6 @@ struct NewIndex {
   getLeftView() {
     Column() {
       Column() {
-
         this.getDrawerView()
       }
       .width('100%')
@@ -482,7 +496,6 @@ struct NewIndex {
   @State userAvatar: Resource = $r('app.media.icon_person2');
   @State userAvatarUrl: string = '';
   @State isVip: boolean = false;
-  @State isDarkMode: boolean = false
   @State userName: string = '未登录用户';
   @State userId: number = 0;
   @State hasActiveSubscription: boolean = false;
@@ -492,6 +505,21 @@ struct NewIndex {
   // 用户信息卡片
   @Builder
   buildUserInfoCard() {
+
+
+    Column() {
+      this.userInfoView()
+      Column({ space: 20 }) {
+        SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
+      }
+      .padding({ bottom:10 })
+      .width('80%')
+    }
+
+  }
+
+  @Builder
+  userInfoView() {
     Column() {
       Row() {
         Stack({ alignContent: Alignment.BottomEnd }){
@@ -501,8 +529,8 @@ struct NewIndex {
             .margin({ left: 12 })
             .borderRadius('50%')
             .clip(true)
-            // .fillColor(this.themeColor)
-            // .backgroundColor(this.isDarkMode ? Color.Black : Color.White)
+          // .fillColor(this.themeColor)
+          // .backgroundColor(this.isDarkMode ? Color.Black : Color.White)
           Column() {
             Text('VIP')
               .fontSize(9)
@@ -561,11 +589,11 @@ struct NewIndex {
       .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.7})
       .onClick(() => {
         // if (!this.isLogin) {
-          this.mType = 1
-          if (!this.isBigScreen()) {
-            this.getUIContext()?.animateTo({ duration: 555 }, () => {
-              this.isShowDrawer = false
-            })
+        this.mType = 1
+        if (!this.isBigScreen()) {
+          this.getUIContext()?.animateTo({ duration: 555 }, () => {
+            this.isShowDrawer = false
+          })
           // }
         }
       })
@@ -603,153 +631,16 @@ struct NewIndex {
 
     List({ space: 0, scroller: this.scroller }) {
       ListItemGroup({ header: this.buildUserInfoCard() }) {
-        ForEach(this.isHiCar()||!this.isShowTitleBar?mainViewModel.getDrawerData():mainViewModel.getDrawerData2(), (item: ItemData, index: number) => {
-          ListItem() {
-            Button({ type: ButtonType.Capsule, stateEffect: true }) {
-              Row() {
-                // 菜单图标
-                if (typeof item.img === 'object' && item.img !== null && (item.img as sysResource).type === 'symbol') {
-                  SymbolGlyph((item.img as sysResource).value as Resource)// .size({ width: 22, height: 22 })
-                    .fontSize(22)
-                    .fontColor([this.themeColor])
-                    .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
-                    .alignSelf(ItemAlign.Center)
-                    .margin({ left: 25 })
-                } else {
-                  Image(item.img as Resource)
-                    .height(22)
-                    .alignSelf(ItemAlign.Center)
-                    .fillColor(this.themeColor)
-                    .margin({ left: 25 })
-                }
-
-                // 菜单标题
-                Text(item.title)
-                  .margin({ left: 10, right: 20 })
-                  .fontSize(15)
-                  .fontColor(this.isTextSelected(index) ? this.themeColor : $r('app.color.index_tab_font_color'))
-                  .fontWeight(480)
-                Blank()
-                // 右侧箭头
-                Image($r('app.media.arrow_right'))
-                  .width(22)
-                  .height(22)
-                  .margin({ left: 20, right: 0 })
-                  .align(Alignment.Center)
-              }
-              .width('100%')
-              .height(55)
-            }
-            .backgroundColor(Color.Transparent)
-            .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
-            .onClick(async () => {
-              // 根据 item.id 跳转或切换功能
-              switch (item.id) {
-                case MainViewModel.MENU_MUSIC:
-                  this.mType = 0
-                  this.modeType = 0
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_FILE_SCAN:
-                  this.mType = 2
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_CHARTS:
-                  this.mType = 3
-                  this.modeType = 0
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_MIEDIA_KU:
-                  this.modeType = 1
-                  this.mType = 0
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_MIEDIA_ARTIST:
-                  this.modeType = 2
-                  this.mType = 0
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_MIEDIA_ALBUM:
-                  this.modeType = 3
-                  this.mType = 0
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_SETTING:
-                  this.mType = 4
-                  this.doShowDrawer()
-
-                  break
-                case MainViewModel.MENU_VIP:
-                  router.pushUrl({
-                    url: 'pages/VipPage'
-                  }, router.RouterMode.Single);
-                  break
-                case MainViewModel.MENU_USER:
-                  this.mType = 1
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_NET_CONNECT:
-                  this.mType = 1
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_SIMI:
-                  router.pushUrl({
-                    url: 'pages/VerifyPage'
-                  });
-                  break
-
-                case MainViewModel.MENU_DUTY:
-                  router.pushUrl({
-                    url: 'pages/WebIndex',
-                    params: { titleName: '用户协议', webUrl: CommonConstants.NEW_DUTY }
-                  });
-                  break
-                case MainViewModel.MENU_HAOPING:
-                  Utility.gotoMarket(getContext(this) as common.UIAbilityContext, this.bundleName)
-                  break
-
-                case MainViewModel.MENU_ABOUT:
-                  this.mType = 5
-                  this.doShowDrawer()
-                  break
-                case MainViewModel.MENU_UPDATE:
-                  AlertDialog.show({
-                    title: '版本更新',
-                    message: '当前版本为最新版本：' + this.versionName,
-                    autoCancel: true,
-                    alignment: DialogAlignment.Center,
-                    offset: { dx: 0, dy: -20 }, //在Y轴方向上的编译量
-                    confirm: {
-                      value: '确定',
-                      fontColor: Color.White,
-                      backgroundColor: $r('app.color.title_bar_bg'),
-                      action: () => {
-                      }
-                    }
-                  })
-                  break
-                case MainViewModel.MENU_YSZC:
-                  router.pushUrl({
-                    url: 'pages/WebIndex',
-                    params: { titleName: '隐私政策', webUrl: CommonConstants.NEW_YS_HW }
-                  });
-                  break
-
-                case MainViewModel.MENU_SHARE:
-                  gotoShare(this.context,this.appName,this.bundleName)
-                  break
-              }
-            })
-          }
-          .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
-            .animation({ duration: 600, curve: Curve.Ease, delay: 60 * index }))
-          .width('90%')
-          .height(55)
+        if(this.tabSelectedIndexes[0]==1){
+          // this.buildTabCate()
+        }else{
+          this.buildTabCate()
+        }
 
-        })
       }
 
     }
+    .scrollBar(BarState.Off)
     .width('86%')
     .borderRadius(20)
     .margin({
@@ -765,6 +656,155 @@ struct NewIndex {
     .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
   }
 
+
+  @Builder
+  buildTabCate() {
+    ForEach(this.isHiCar()||!this.isShowTitleBar?mainViewModel.getDrawerData():mainViewModel.getDrawerData2(), (item: ItemData, index: number) => {
+      ListItem() {
+        Button({ type: ButtonType.Capsule, stateEffect: true }) {
+          Row() {
+            // 菜单图标
+            if (typeof item.img === 'object' && item.img !== null && (item.img as sysResource).type === 'symbol') {
+              SymbolGlyph((item.img as sysResource).value as Resource)// .size({ width: 22, height: 22 })
+                .fontSize(22)
+                .fontColor([this.themeColor])
+                .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
+                .alignSelf(ItemAlign.Center)
+                .margin({ left: 25 })
+            } else {
+              Image(item.img as Resource)
+                .height(22)
+                .alignSelf(ItemAlign.Center)
+                .fillColor(this.themeColor)
+                .margin({ left: 25 })
+            }
+
+            // 菜单标题
+            Text(item.title)
+              .margin({ left: 10, right: 20 })
+              .fontSize(15)
+              .fontColor(this.isTextSelected(index) ? this.themeColor : $r('app.color.index_tab_font_color'))
+              .fontWeight(480)
+            Blank()
+            // 右侧箭头
+            Image($r('app.media.arrow_right'))
+              .width(22)
+              .height(22)
+              .margin({ left: 20, right: 0 })
+              .align(Alignment.Center)
+          }
+          .width('100%')
+          .height(55)
+        }
+        .backgroundColor(Color.Transparent)
+        .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.6 })
+        .onClick(async () => {
+          // 根据 item.id 跳转或切换功能
+          switch (item.id) {
+            case MainViewModel.MENU_MUSIC:
+              this.mType = 0
+              this.modeType = 0
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_FILE_SCAN:
+              this.mType = 2
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_CHARTS:
+              this.mType = 3
+              this.modeType = 0
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_MIEDIA_KU:
+              this.modeType = 1
+              this.mType = 0
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_MIEDIA_ARTIST:
+              this.modeType = 2
+              this.mType = 0
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_MIEDIA_ALBUM:
+              this.modeType = 3
+              this.mType = 0
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_SETTING:
+              this.mType = 4
+              this.doShowDrawer()
+
+              break
+            case MainViewModel.MENU_VIP:
+              router.pushUrl({
+                url: 'pages/VipPage'
+              }, router.RouterMode.Single);
+              break
+            case MainViewModel.MENU_USER:
+              this.mType = 1
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_NET_CONNECT:
+              this.mType = 1
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_SIMI:
+              router.pushUrl({
+                url: 'pages/VerifyPage'
+              });
+              break
+
+            case MainViewModel.MENU_DUTY:
+              router.pushUrl({
+                url: 'pages/WebIndex',
+                params: { titleName: '用户协议', webUrl: CommonConstants.NEW_DUTY }
+              });
+              break
+            case MainViewModel.MENU_HAOPING:
+              Utility.gotoMarket(getContext(this) as common.UIAbilityContext, this.bundleName)
+              break
+
+            case MainViewModel.MENU_ABOUT:
+              this.mType = 5
+              this.doShowDrawer()
+              break
+            case MainViewModel.MENU_UPDATE:
+              AlertDialog.show({
+                title: '版本更新',
+                message: '当前版本为最新版本：' + this.versionName,
+                autoCancel: true,
+                alignment: DialogAlignment.Center,
+                offset: { dx: 0, dy: -20 }, //在Y轴方向上的编译量
+                confirm: {
+                  value: '确定',
+                  fontColor: Color.White,
+                  backgroundColor: $r('app.color.title_bar_bg'),
+                  action: () => {
+                  }
+                }
+              })
+              break
+            case MainViewModel.MENU_YSZC:
+              router.pushUrl({
+                url: 'pages/WebIndex',
+                params: { titleName: '隐私政策', webUrl: CommonConstants.NEW_YS_HW }
+              });
+              break
+
+            case MainViewModel.MENU_SHARE:
+              gotoShare(this.context,this.appName,this.bundleName)
+              break
+          }
+        })
+      }
+      .transition(TransitionEffect.move(TransitionEdge.BOTTOM)
+        .animation({ duration: 600, curve: Curve.Ease, delay: 60 * index }))
+      .width('90%')
+      .height(55)
+
+    })
+  }
+
   isTextSelected(index:number):boolean{
     if(this.isShowTitleBar&&!this.isHiCar()){
         return this.mType ==index

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

@@ -1,6 +1,7 @@
 import TitleBar from './TitleBar'
 import { curves, display, PiPWindow, promptAction, router, SymbolGlyphModifier, window } from '@kit.ArkUI';
 import { VideoItem } from '../viewmodel/VideoItem';
+import {  LengthMetrics, SegmentButton,borderRadiuses, SegmentButtonOptions } from '@kit.ArkUI';
 import {
   AppUtil,
   ArrayUtil,
@@ -195,7 +196,7 @@ export struct LocalMusic {
   @State isShowAllBar: boolean = true //是否显示播放全部条
   @State isShowSingleLineLyric: boolean = false //是否显示单行歌词
   @State isShowHistory: boolean = true //是否显示最近播放
-  @State isCustomizeBg: boolean = false //自定义背景界面
+  @State @Watch('onColorModeChange') isCustomizeBg: boolean = false //自定义背景界面
   @State isGridMusic: boolean = false //是否网格布局
   @State isCircleBtn: boolean = false //是否圆形播放按钮
   @State twoFingerType: number = 3 //双支放大缩小的类型
@@ -252,17 +253,22 @@ export struct LocalMusic {
       this.titleBarModel.setTitleBarBackground(Color.Transparent)
       this.titleBarModel.setTitleBarBottomLineColor(Color.Transparent)
       this.titleBarModel.setLeftTitleStateNormalStyleColor(Color.Transparent)
+
+      this.tabOptions.selectedBackgroundColor =  Color.Transparent
     } else {
       if (!this.isDarkMode) {
         this.titleBarModel.setTitleBarBackground(this.themeColor)
         this.titleBarModel.setTitleBarBottomLineColor(this.themeColor)
         this.titleBarModel.setRightTitleStateNormalStyleColor(this.themeColor)
         this.titleBarModel.setLeftTitleStateNormalStyleColor(this.themeColor)
+        this.tabOptions.selectedBackgroundColor = this.themeColor
       } else {
         this.titleBarModel.setTitleBarBackground($r('app.color.title_bar_bg'))
         this.titleBarModel.setTitleBarBottomLineColor($r('app.color.title_bar_bg'))
         this.titleBarModel.setRightTitleStateNormalStyleColor($r('app.color.title_bar_bg'))
         this.titleBarModel.setLeftTitleStateNormalStyleColor($r('app.color.title_bar_bg'))
+        this.tabOptions.selectedBackgroundColor = $r('app.color.silvery')
+
       }
 
     }
@@ -508,6 +514,7 @@ export struct LocalMusic {
       this.appName = appName
     })
     this.packName = AppUtil.getBundleName()
+    this.tabSelectedIndexes[0] = this.modeType//SegmentButton的索引
     this.loadCacheFromStorage(); // 加载文件夹缓存
     // 在首页初始化时读取媒体库,艺术家，专辑等缓存数据
     this.initLoadCache()
@@ -2943,72 +2950,30 @@ export struct LocalMusic {
   }
 
   private readonly tabs: string[] = ['文件夹', '媒体库', '艺术家', '专辑']
+  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
+    buttons: [{ text: '文件夹' }, { text: '媒体库' },{ text: '艺术家' },{ text: '专辑' }],
+    direction: Direction.Ltr,
+    buttonPadding:{top:12,bottom:12},
+    backgroundColor: Color.Transparent,
+    fontSize:14,
+    selectedFontSize:15,
+    selectedFontColor:Color.White,
+    selectedBackgroundColor: this.themeColor,
+    localizedTextPadding: {
+      end: LengthMetrics.vp(20),
+      start: LengthMetrics.vp(20)
+    }
+  })
 
+  @State @Watch('capsuleSelectedIndexesChanged')tabSelectedIndexes: number[] = [0]
+  //当胶囊按钮的选择发生变化时调用此函数
+  capsuleSelectedIndexesChanged() {
+    this.modeType = this.tabSelectedIndexes[0]
+  }
   @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)
-
+    Column({ space: 2 }) {
+      SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
       Line()
         .width('100%')
         .height(1)
@@ -3016,9 +2981,85 @@ export struct LocalMusic {
         .opacity(this.barOpacity)
         .visibility(this.isCustomizeBg ? Visibility.Hidden : Visibility.Visible)
     }
+    .width('100%')
     .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 = '' //点击歌单，艺术家，专辑进去后的封面
   isShowCoverHeader() {