左侧滑动在不同适配比如大屏幕可以和主页分栏显示

针对pc做了导入音乐文件格式

build-profile.json5

@@ -5,7 +5,7 @@
         "name": "default",
         "signingConfig": "default",
         "targetSdkVersion": "5.0.5(17)",
-        "compatibleSdkVersion": "5.0.5(17)",
+        "compatibleSdkVersion": "5.0.0(12)",
         "runtimeOS": "HarmonyOS",
         "buildOption": {
           "strictMode": {

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

@@ -31,6 +31,8 @@ import { hilog } from '@kit.PerformanceAnalysisKit';
 import { DialogHelper } from '@pura/harmony-dialog';
 import UserUtil from '../common/util/UserUtil';
 import json from '@ohos.util.json';
+import { UserCenter } from './UserCenter';
+import { ScanFilePage } from './ScanFilePage';
 
 
 const TAG = 'NewIndex'; // 日志标签
@@ -59,7 +61,7 @@ struct NewIndex{
   /** Y 轴偏移量（预留） */
   @State offsetY: number = 0;
   /** 主内容类型（0:本地音乐，1:网络内容） */
-  @State mType:number = 0
+  @Provide mType:number = 0
   /** 模式类型（如歌手、专辑等） */
   @Provide modeType:number = 0
   /** 是否为零状态（预留） */
@@ -223,104 +225,157 @@ struct NewIndex{
     emitter.off(888);
   }
 
-  /**
-   * 构建主页面结构，包括顶部横线、主内容区和抽屉菜单
-   */
+
   build() {
-    Stack({ alignContent: Alignment.TopStart }) {
-      // 顶部横线
-      Column(){
-        Line()
-          .width('100%')
-          .height(1)
+    SideBarContainer(SideBarContainerType.AUTO) {
+      Column() {
+        this.getLeftView()
       }
-      .backgroundColor($r('app.color.title_bar_bg'))
-      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
-      // 主内容区
+      // .backgroundColor(Color.Transparent)
+
       Column() {
         Stack(){
-          // 本地音乐内容区
+                  // 本地音乐内容区
           LocalMusic()
             .visibility(this.mType===0?Visibility.Visible:Visibility.None)
           // 网络内容区
-          StreamContent()
+          UserCenter()
             .visibility(this.mType===1?Visibility.Visible:Visibility.None)
+          ScanFilePage()
+            .visibility(this.mType===2?Visibility.Visible:Visibility.None)
+          SettingPage()
+            .visibility(this.mType===3?Visibility.Visible:Visibility.None)
         }
       }
+    }
+    .showControlButton(false)
+    .minContentWidth(0)
+    .sideBarWidth(this.isBigScreen()?300:270)
+    .autoHide(true)
+    .showSideBar($$this.isShowDrawer)
+    .onChange((value: boolean) => {
+      this.isShowDrawer= value
+    })
+
+
+  }
+
+  isBigScreen(){
+    if(this.currentWidthBreakpoint == WidthBreakpoint.WIDTH_LG){
+      return true
+    }
+    if (DeviceUtil.getDeviceType() === resourceManager.DeviceType.DEVICE_TYPE_PHONE
+      && this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM
+      &&this.currentHeightBreakpoint == HeightBreakpoint.HEIGHT_LG) {
+      return false
+    }else{
+      return true
+    }
+    return false
+  }
+
+  /**
+   * 构建主页面结构，包括顶部横线、主内容区和抽屉菜单
+   */
+  // build() {
+  //   Stack({ alignContent: Alignment.TopStart }) {
+  //     // // 顶部横线
+  //     // Column(){
+  //     //   Line()
+  //     //     .width('100%')
+  //     //     .height(1)
+  //     // }
+  //     // .backgroundColor($r('app.color.title_bar_bg'))
+  //     // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
+  //     // 主内容区
+  //     Column() {
+  //       Stack(){
+  //         // 本地音乐内容区
+  //         LocalMusic()
+  //           .visibility(this.mType===0?Visibility.Visible:Visibility.None)
+  //         // 网络内容区
+  //         StreamContent()
+  //           .visibility(this.mType===1?Visibility.Visible:Visibility.None)
+  //       }
+  //     }
+  //     .width('100%')
+  //     .height('100%')
+  //     .justifyContent(FlexAlign.Start)
+  //     .backgroundColor($r('app.color.bottom_control_background'))
+  //
+  //     // 侧边抽屉菜单
+  //     if(this.isShowDrawer){
+  //       this.getLeftView()
+  //     }
+  //   }
+  // }
+
+  @Builder
+  getLeftView(){
+    Column() {
+      Column() {
+        // 抽屉顶部背景图
+        Image($r('app.media.bg_music'))
+          .width('100%')
+          .visibility(this.isCoverOpacity()?Visibility.None:Visibility.Visible)
+          .height(180)
+          .borderRadius({
+            topLeft: 0,
+            topRight	: 20,
+            bottomLeft: 0,
+            bottomRight: 0
+          })
+        // 动态生成抽屉菜单内容
+        this.getDrawerView()
+      }
       .width('100%')
       .height('100%')
-      .justifyContent(FlexAlign.Start)
-      .backgroundColor($r('app.color.bottom_control_background'))
-
-      // 侧边抽屉菜单
-      if(this.isShowDrawer){
-        Column() {
-          Column() {
-            // 抽屉顶部背景图
-            Image($r('app.media.bg_music'))
-              .width('100%')
-              .visibility(this.isCoverOpacity()?Visibility.None:Visibility.Visible)
-              .height(180)
-              .borderRadius({
-                topLeft: 0,
-                topRight	: 20,
-                bottomLeft: 0,
-                bottomRight: 0
-              })
-            // 动态生成抽屉菜单内容
-            this.getDrawerView()
+      .onClick((event:ClickEvent)=>{
+        // 阻止事件冒泡
+      })
+    }
+    // .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'36%':'70%')
+    .height('100%')
+    .borderRadius({
+      topLeft: 0,
+      topRight	: 20,
+      bottomLeft: 0,
+      bottomRight: 20
+    })
+    // .backgroundColor($r('app.color.silvery'))
+    .backgroundColor($r('app.color.index_background'))
+    .alignItems(HorizontalAlign.Start)
+    .onClick((event:ClickEvent)=>{
+      // 点击抽屉外部关闭抽屉
+      animateTo({ duration: 555 }, () => {
+        this.isShowDrawer = false
+      })
+    })
+    .translate({ x: this.offsetX, y: 0, z: 0 })
+    .transition({ type: TransitionType.Insert, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
+    .transition({ type: TransitionType.Delete, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
+    .gesture(
+      PanGesture()
+        .onActionUpdate((event:GestureEvent)=>{
+          // 手势滑动更新抽屉偏移
+          if(event.offsetX<0){
+            this.offsetX = event.offsetX;
           }
-          .width('100%')
-          .height('100%')
-          .onClick((event:ClickEvent)=>{
-            // 阻止事件冒泡
-          })
-        }
-        .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'36%':'70%')
-        .height('100%')
-        .borderRadius({
-          topLeft: 0,
-          topRight	: 20,
-          bottomLeft: 0,
-          bottomRight: 20
         })
-        .backgroundColor($r('app.color.silvery'))
-        .alignItems(HorizontalAlign.Start)
-        .onClick((event:ClickEvent)=>{
-          // 点击抽屉外部关闭抽屉
-          animateTo({ duration: 555 }, () => {
-            this.isShowDrawer = false
-          })
-        })
-        .translate({ x: this.offsetX, y: 0, z: 0 })
-        .transition({ type: TransitionType.Insert, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
-        .transition({ type: TransitionType.Delete, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
-        .gesture(
-          PanGesture()
-            .onActionUpdate((event:GestureEvent)=>{
-              // 手势滑动更新抽屉偏移
-              if(event.offsetX<0){
-                this.offsetX = event.offsetX;
-              }
+        .onActionEnd(() => {
+          // 手势结束判断是否关闭抽屉
+          if(this.offsetX<-DisplayUtil.getWidth()/15){
+            animateTo({ duration: 555 }, () => {
+              this.isShowDrawer = false
             })
-            .onActionEnd(() => {
-              // 手势结束判断是否关闭抽屉
-              if(this.offsetX<-DisplayUtil.getWidth()/15){
-                animateTo({ duration: 555 }, () => {
-                  this.isShowDrawer = false
-                })
-              }else{
-                animateTo({ duration: 555 }, () => {
-                  this.isShowDrawer = true
-                  this.offsetX = 0
-                })
-              }
+          }else{
+            animateTo({ duration: 555 }, () => {
+              this.isShowDrawer = true
+              this.offsetX = 0
             })
-        )
-
-
-      }
-    }
+          }
+        })
+    )
   }
 
   /**
@@ -330,7 +385,7 @@ struct NewIndex{
   @Builder
   getDrawerView(){
     List({space: 0, scroller: this.scroller}){
-      ForEach(this.isShowSponsorship?mainViewModel.getDrawerData2():mainViewModel.getDrawerData(),(item: ItemData,index:number)=>{
+      ForEach(mainViewModel.getDrawerData2(),(item: ItemData,index:number)=>{
         ListItem(){
           Button({ type: ButtonType.Capsule, stateEffect: true }) {
             Row() {
@@ -341,20 +396,20 @@ struct NewIndex{
                   .fontSize(22)
                   .fontColor([this.themeColor])
                   .alignSelf(ItemAlign.Center)
-                  .margin({ left: 2 })
+                  .margin({ left: 25 })
               }else {
                 Image(item.img as Resource)
                   .height(22)
                   .alignSelf(ItemAlign.Center)
                   .fillColor(this.themeColor)
-                  .margin({ left: 2 })
+                  .margin({ left: 25 })
               }
 
               // 菜单标题
               Text(item.title)
                 .margin({ left: 10, right: 20 })
                 .fontSize(15)
-                .fontColor($r('app.color.index_tab_font_color'))
+                .fontColor(this.mType ==index?this.themeColor:$r('app.color.index_tab_font_color'))
                 .fontWeight(480)
               Blank()
               // 右侧箭头
@@ -373,22 +428,27 @@ struct NewIndex{
             switch (item.id) {
               case MainViewModel.MENU_MUSIC:
                 this.mType = 0
-                animateTo({ duration: 555 }, () => {
-                  this.isShowDrawer = false
-                })
+                if(!this.isBigScreen()){
+                  animateTo({ duration: 555 }, () => {
+                    this.isShowDrawer = false
+                  })
+                }
                 break
               case MainViewModel.MENU_FILE_SCAN:
-                router.pushUrl({
-                  url: 'pages/ScanFilePage'
-                });
-                break
-              case MainViewModel.MENU_HOME:
-                this.mType = 0
-                this.modeType = 0
-                animateTo({ duration: 555 }, () => {
-                  this.isShowDrawer = false
-                })
+                this.mType=2
+                if(!this.isBigScreen()){
+                  animateTo({ duration: 555 }, () => {
+                    this.isShowDrawer = false
+                  })
+                }
                 break
+              // case MainViewModel.MENU_HOME:
+              //   this.mType = 0
+              //   this.modeType = 0
+              //   animateTo({ duration: 555 }, () => {
+              //     this.isShowDrawer = false
+              //   })
+              //   break
               case MainViewModel.MENU_MIEDIA_KU:
                 this.modeType = 1
                 animateTo({ duration: 555 }, () => {
@@ -408,9 +468,15 @@ struct NewIndex{
                 })
                 break
               case MainViewModel.MENU_SETTING:
-                router.pushUrl({
-                  url: 'pages/SettingPage'
-                }, router.RouterMode.Single);
+                this.mType=3
+                if(!this.isBigScreen()){
+                  animateTo({ duration: 555 }, () => {
+                    this.isShowDrawer = false
+                  })
+                }
+                // router.pushUrl({
+                //   url: 'pages/SettingPage'
+                // }, router.RouterMode.Single);
                 break
               case MainViewModel.MENU_VIP:
                 router.pushUrl({
@@ -418,9 +484,15 @@ struct NewIndex{
                 }, router.RouterMode.Single);
                 break
               case MainViewModel.MENU_USER:
-                router.pushUrl({
-                  url: 'pages/UserCenter'
-                }, router.RouterMode.Single);
+                this.mType=1
+                if(!this.isBigScreen()){
+                  animateTo({ duration: 555 }, () => {
+                    this.isShowDrawer = false
+                  })
+                }
+                // router.pushUrl({
+                //   url: 'pages/UserCenter'
+                // }, router.RouterMode.Single);
                 break
               case MainViewModel.MENU_NET_CONNECT:
                 this.mType = 1
@@ -493,9 +565,12 @@ struct NewIndex{
 
       })
     }
-    .width('100%')
+    .width('86%')
+    .borderRadius(20)
+    .margin({bottom:20,left:10,right:10,top:10})
     .alignListItem(ListItemAlign.Center)
     .layoutWeight(1)
+    .backgroundColor($r('app.color.silvery'))
     .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
   }
 

entry/src/main/ets/pages/ScanFilePage.ets

@@ -19,12 +19,13 @@ import { DialogHelper } from '@pura/harmony-dialog'
 
 
 @Preview
-@Entry
+// @Entry
 @Component
 export struct ScanFilePage{
   @State rootPath:string = '' //音频根目录
   @State lockPath:string = ''
-
+  @Consume isShowDrawer: boolean;
+  @Consume offsetX: number;
   @State strText:string = ''
   @State isStart:boolean = false
   @State isStartCover:boolean = false
@@ -178,12 +179,16 @@ export struct ScanFilePage{
             .align(Alignment.Center)
           // 左右按钮
           Row() {
-            Image($r('app.media.left_back_white'))
+            Image($r('app.media.menu'))
               .width(28)
               .height(28)
               .margin({ left: 12, right: 8 })
               .onClick(() => {
-                router.back();
+                animateTo({ duration: 555 }, () => {
+                  // 动画闭包内控制Image组件的出现和消失
+                  this.isShowDrawer = !this.isShowDrawer
+                  this.offsetX = 0
+                })
               })
             Blank().flexGrow(1)
             Blank().width(32)

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

@@ -16,9 +16,12 @@ import { bundleManager } from '@kit.AbilityKit'
 import { hilog } from '@kit.PerformanceAnalysisKit'
 
 @Preview
-@Entry
+// @Entry
 @Component
 export struct SettingPage {
+  @Consume isShowDrawer: boolean;
+  @Consume offsetX: number;
+  @Consume mType: number;
   static readonly THEME_MODE: string = 'themeMode';
   static readonly SORT_TYPE: string = 'musicSortType';
   static readonly IS_BGPLAY_OPEN: string = 'isBgPlayOpen';
@@ -512,12 +515,16 @@ export struct SettingPage {
           .align(Alignment.Center)
         // 左侧返回按钮
         Row() {
-          Image($r('app.media.left_back_white'))
+          Image($r('app.media.menu'))
             .width(29)
             .height(29)
             .margin({ left: 12, right: 8 })
             .onClick(() => {
-              router.back();
+              animateTo({ duration: 555 }, () => {
+                // 动画闭包内控制Image组件的出现和消失
+                this.isShowDrawer = !this.isShowDrawer
+                this.offsetX = 0
+              })
             })
           Blank().flexGrow(1)
           Blank().width(32)
@@ -1616,9 +1623,10 @@ export struct SettingPage {
           .onClick(() => {
             this.isThemeSheet = false;
             DialogHelper.closeDialog('vip');
-            router.pushUrl({
-              url: 'pages/UserCenter'
-            }, router.RouterMode.Single);
+            this.mType = 1//跳转到用户中心
+            // router.pushUrl({
+            //   url: 'pages/UserCenter'
+            // }, router.RouterMode.Single);
           })
       }
     }

entry/src/main/ets/pages/UserCenter.ets

@@ -115,8 +115,10 @@ function themeColorWithAlpha(themeColor: string, alpha: number, isDarkMode: bool
 }
 
 @Component
-@Entry
+// @Entry
 export struct UserCenter {
+  @Consume isShowDrawer: boolean;
+  @Consume offsetX: number;
   @State userName: string = '未登录用户';
   @State userId: number = 0;
   @State userAvatar: Resource = $r('app.media.icon_person2');
@@ -407,12 +409,16 @@ export struct UserCenter {
             .align(Alignment.Center)
           // 左右按钮
           Row() {
-            Image($r('app.media.left_back_white'))
+            Image($r('app.media.menu'))
               .width(32)
               .height(32)
               .margin({ left: 12, right: 8 })
               .onClick(() => {
-                router.back();
+                animateTo({ duration: 555 }, () => {
+                  // 动画闭包内控制Image组件的出现和消失
+                  this.isShowDrawer = !this.isShowDrawer
+                  this.offsetX = 0
+                })
               })
             Blank().flexGrow(1)
             Blank().width(32)

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

@@ -128,6 +128,7 @@ const ITEM_HEIGHT_BIG: number = 78; // 列表项大高度
 @Preview
 @Component
 export struct LocalMusic {
+  @Consume mType: number;
   @StorageProp('themeColor') themeColor: string = PreferencesUtil.getStringSync('THEME_COLOR', CommonConstants.DEFAULT_THEME_COLOR);
   themeMode: number=0;
   @State titleName: string = '首页'
@@ -408,7 +409,7 @@ export struct LocalMusic {
     if (this.currentPath === this.rootPath || this.modeType !== 0) {
       animateTo({ duration: 555 }, () => {
         // 动画闭包内控制Image组件的出现和消失
-        this.isShowDrawer = true
+        this.isShowDrawer = !this.isShowDrawer
         this.offsetX = 0
       })
       return
@@ -1585,8 +1586,11 @@ export struct LocalMusic {
   async callFilePickerSelectFile(): Promise<void> {
     try {
       let DocumentSelectOptions = new picker.DocumentSelectOptions();
-      // DocumentSelectOptions.multiAuthMode = true
-      DocumentSelectOptions.fileSuffixFilters = CommonConstants.MEDIA_FORMAT
+      if(DeviceUtil.getDeviceType() === resourceManager.DeviceType.DEVICE_TYPE_PHONE){
+        DocumentSelectOptions.fileSuffixFilters = CommonConstants.MEDIA_FORMAT
+      }else{
+        DocumentSelectOptions.mergeMode = picker.MergeTypeMode.AUDIO
+      }
       let documentPicker = new picker.DocumentViewPicker();
       documentPicker.select(DocumentSelectOptions).then((DocumentSelectResult) => {
         Logger.info(TAG,
@@ -2479,7 +2483,7 @@ export struct LocalMusic {
             .opacity(this.opacityItem)// 绑定透明度
             .margin({ left: 20 })
         }
-        .width('15%')
+
 
         Column() {
           Column() {
@@ -2584,8 +2588,8 @@ export struct LocalMusic {
                 });
             }
             .layoutWeight(1)
-            .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:5,
-              right: this.currentBreakpoint !== BreakpointTypeEnum.SM?40:5, bottom: 1 });
+            .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?30:5,
+              right: this.currentBreakpoint !== BreakpointTypeEnum.SM?30:5, bottom: 1 });
           });
         }
         .width('100%')
@@ -3522,29 +3526,6 @@ export struct LocalMusic {
 
             } else if (item.type === CommonConstants.TYPE_IS_CSJAD) { //如果是穿山甲广告
 
-              //穿山甲
-              // if (this.isShowAd) {
-              //   Row() {
-              //     NodeContainer(this.bannerAd.getAdComponent())
-              //       .width('92%')
-              //       .height(this.mAdSlot.getAcceptHeight())
-              //       .alignSelf(ItemAlign.Center)
-              //       .align(Alignment.Center)
-              //     // .margin({left:10})
-              //     Image($r('app.media.close'))
-              //       .height(15)
-              //       .aspectRatio(1)
-              //       .visibility(Visibility.None)
-              //       .margin({ right: 15 })// .position({ x:20 })
-              //       .onClick(() => {
-              //         this.isShowAd = false
-              //       })
-              //     Blank()
-              //   }
-              //   .opacity(this.opacityItem) // 绑定透明度
-              //
-              // }
-
             } else {
               this.MusicItem(item, index)
 
@@ -7510,9 +7491,10 @@ export struct LocalMusic {
           .onClick(() => {
             DialogHelper.closeDialog('vip'); //关闭弹框
             this.isShowPlay = false
-            router.pushUrl({
-              url: 'pages/VipPage'
-            }, router.RouterMode.Single);
+            this.mType = 1//跳转到用户中心
+            // router.pushUrl({
+            //   url: 'pages/VipPage'
+            // }, router.RouterMode.Single);
           })
       }
 

entry/src/main/ets/viewmodel/MainViewModel.ets

@@ -69,12 +69,12 @@ export  class  MainViewModel{
       new ItemData($r('app.string.local_music'), { type: 'symbol', value: $r('sys.symbol.music') }, MainViewModel.MENU_MUSIC, false),
       new ItemData($r('app.string.user_center'), { type: 'symbol', value: $r('sys.symbol.person') }, MainViewModel.MENU_USER, false),
       new ItemData($r('app.string.file_scan'), { type: 'symbol', value: $r('sys.symbol.doc_text_badge_magnifyingglass') },MainViewModel.MENU_FILE_SCAN,false),
+      new ItemData($r('app.string.setting'),  { type: 'symbol', value: $r('sys.symbol.gearshape') },MainViewModel.MENU_SETTING,false),
       // new ItemData($r('app.string.vip'), { type: 'symbol', value: $r('sys.symbol.vip_hand') }, MainViewModel.MENU_VIP, false),
       new ItemData($r('app.string.haoping'), { type: 'symbol', value: $r('sys.symbol.flower') },MainViewModel.MENU_HAOPING,false),
       new ItemData($r('app.string.persion_duty'),{ type: 'symbol', value: $r('sys.symbol.doc_plaintext') },MainViewModel.MENU_DUTY,false),
       new ItemData($r('app.string.yszc'), { type: 'symbol', value: $r('sys.symbol.lock') },MainViewModel.MENU_YSZC,false),
       new ItemData($r('app.string.about_me'), { type: 'symbol', value: $r('sys.symbol.info_shield') },MainViewModel.MENU_ABOUT,false),
-      new ItemData($r('app.string.setting'),  { type: 'symbol', value: $r('sys.symbol.gearshape') },MainViewModel.MENU_SETTING,false),
       new ItemData($r('app.string.share_tt'),  { type: 'symbol', value: $r('sys.symbol.share') },MainViewModel.MENU_SHARE,false),
     ];
     return drawerGridData;

entry/src/main/resources/base/profile/main_pages.json

@@ -6,10 +6,9 @@
     "pages/NewIndex",
     "pages/AboutPage",
     "pages/VerifyPage",
-    "pages/SettingPage",
+
     "pages/VipPage",
-    "pages/ScanFilePage",
-    "pages/UserCenter",
+
     "pages/Demo"
   ]
 }