优化播放页

entry/src/main/ets/pages/AboutPage.ets

@@ -11,9 +11,11 @@ import { hilog } from '@kit.PerformanceAnalysisKit'
 import { BusinessError } from '@kit.BasicServicesKit'
 
 @Preview
-@Entry
+// @Entry
 @Component
 export struct AboutPage{
+  @Consume isShowDrawer: boolean;
+  @Consume offsetX: number;
   @State isDarkMode: boolean = false
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
@@ -114,12 +116,16 @@ export struct AboutPage{
             .align(Alignment.Center)
           // 左右按钮
           Row() {
-            Image($r('app.media.left_back_white'))
+            Image($r('app.media.menu'))
               .width(24)
               .height(24)
               .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/NewIndex.ets

@@ -33,6 +33,7 @@ import UserUtil from '../common/util/UserUtil';
 import json from '@ohos.util.json';
 import { UserCenter } from './UserCenter';
 import { ScanFilePage } from './ScanFilePage';
+import { AboutPage } from './AboutPage';
 
 
 const TAG = 'NewIndex'; // 日志标签
@@ -235,6 +236,8 @@ struct NewIndex{
             .visibility(this.mType===2?Visibility.Visible:Visibility.None)
           SettingPage()
             .visibility(this.mType===3?Visibility.Visible:Visibility.None)
+          AboutPage()
+            .visibility(this.mType===4?Visibility.Visible:Visibility.None)
         }
       }
     }
@@ -585,9 +588,15 @@ struct NewIndex{
                 });
                 break
               case MainViewModel.MENU_ABOUT:
-                router.pushUrl({
-                  url: 'pages/AboutPage'
-                }, router.RouterMode.Single);
+                this.mType=4
+                if(!this.isBigScreen()){
+                  animateTo({ duration: 555 }, () => {
+                    this.isShowDrawer = false
+                  })
+                }
+                // router.pushUrl({
+                //   url: 'pages/AboutPage'
+                // }, router.RouterMode.Single);
                 break
               case MainViewModel.MENU_UPDATE:
                 AlertDialog.show({title:'版本更新',message:'当前版本为最新版本：'+this.versionName,

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

@@ -275,7 +275,7 @@ export struct ScanFilePage{
             .margin({ left:25,right: 25 ,top:20,bottom:20 })
 
           }
-          .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'50%':'85%')
+          .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?400:300)
           .backgroundColor($r('app.color.index_background'))
           .margin({ left:25,right: 25,top:20,bottom:20  })
           .borderRadius(20)
@@ -286,7 +286,7 @@ export struct ScanFilePage{
           Column() {
             Button(this.isStart?'正在扫描':$r('app.string.start_scan'), { type: ButtonType.Capsule, stateEffect: false })
 
-              .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
+              .width(150)
               .height(55)
               .margin({ top: 20, bottom: 10 })
               .linearGradient({
@@ -301,7 +301,7 @@ export struct ScanFilePage{
               .alignSelf(ItemAlign.Center)
 
             Button(this.isStartCover?'正在扫描':$r('app.string.onekey_cover'), { type: ButtonType.Capsule, stateEffect: false })
-              .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'25%':'60%')
+              .width(150)
               .height(55)
               .margin({ top: 10, bottom: 20 })
               .linearGradient({

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

@@ -209,7 +209,7 @@ export struct SettingPage {
     this.isStartAutoPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_START_AUTO_PLAY, false)
     this.isMemoryLastPlay = PreferencesUtil.getBooleanSync(SettingPage.iS_MEMORY_LAST_PLAY, false)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
-    this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, false)
+    this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, true)
     this.isCoverTop = PreferencesUtil.getBooleanSync(SettingPage.IS_COVER_TOP, false)
     this.isShowTitleBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_TITLTBAR, true)
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)

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

@@ -518,7 +518,7 @@ export struct UserCenter {
               .fontColor(Color.White)
               .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
               .height(36)
-              .width(66)
+              .padding({ left:20,right:20,top:10,bottom:10 })
               .fontSize(13)
               .borderRadius(13)
               .margin({ left: 0 })
@@ -543,18 +543,20 @@ export struct UserCenter {
                 ToastUtil.showToast('已退出登录')
               })
           } else {
+
             Button('登录')
               .fontColor(Color.White)
               .backgroundColor(this.isDarkMode ? $r('app.color.title_bar_bg') : this.themeColor)
               .height(36)
-              .width(66)
+              .padding({ left:20,right:20,top:10,bottom:10 })
               .fontSize(13)
               .borderRadius(13)
-              .margin({ left: 0 })
+              .margin({ right: 20 })
+
           }
         }
         .alignItems(HorizontalAlign.End)
-        .margin({ left: 30, right: 10 })
+        .margin({ left: 10, right: 10 })
       }
       .onClick(() => {
         if (!this.isLogin) {

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

@@ -573,7 +573,7 @@ export struct LocalMusic {
     this.isShowAllBar = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_ALLBAR, true)
     this.twoFingerType = PreferencesUtil.getNumberSync(SettingPage.TWO_FINGER_TYPE, 3)
     this.isCoverTop = PreferencesUtil.getBooleanSync(SettingPage.IS_COVER_TOP, false)
-    this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, false)
+    this.isCircleBtn = PreferencesUtil.getBooleanSync(SettingPage.IS_CIRCLE_BTN, true)
     this.isShowPlayPageBack = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_PLAYPAGE_BACK, false)
     this.isCoverTopBig = PreferencesUtil.getBooleanSync(SettingPage.IS_COVER_TOP_BIG, false)
     this.isShowSingleLineLyric = PreferencesUtil.getBooleanSync(SettingPage.IS_SHOW_SLLYRIC, false)
@@ -2588,8 +2588,8 @@ export struct LocalMusic {
                 });
             }
             .layoutWeight(1)
-            .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?30:5,
-              right: this.currentBreakpoint !== BreakpointTypeEnum.SM?30:5, bottom: 1 });
+            .margin({ left: this.currentBreakpoint !== BreakpointTypeEnum.SM?20:5,
+              right: this.currentBreakpoint !== BreakpointTypeEnum.SM?20:5, bottom: 1 });
           });
         }
         .width('100%')
@@ -3155,7 +3155,7 @@ export struct LocalMusic {
     .cachedCount(3)
     // .columnsTemplate('1fr '.repeat(this.currentWidthBreakpoint === WidthBreakpoint.WIDTH_SM ? 2 : 5))
     .columnsTemplate(this.twoFingerType==3?'repeat(auto-fit, 160)':this.twoFingerType==2?'repeat(auto-fit, 110)':'repeat(auto-fit, 80)')
-    .rowsGap(this.twoFingerType==3?10:this.twoFingerType==2?5:1)
+    .rowsGap(this.isShowDrawer?25:(this.twoFingerType==3?10:this.twoFingerType==2?5:1))
     .visibility(this.isGridMusic?Visibility.Visible:Visibility.None)
     .scale({x:this.scaleValue,y:this.scaleValue,z:1})
     .gesture(PinchGesture({ fingers: 2 })
@@ -6070,7 +6070,7 @@ export struct LocalMusic {
           Column() {
             this.playCenterView()
           }
-          .margin({bottom:20,right:this.currentLyricAlignMode == 0?0:80})
+          .margin({bottom:20,right:this.currentLyricAlignMode == 0?0:30})
         }
       }
       .position({
@@ -6122,7 +6122,7 @@ export struct LocalMusic {
   @Builder
   playCenterView(){
     Row() {
-      Row({ space: 33 }) {
+      Row({ space: 20 }) {
 
 
         Button({type:ButtonType.Circle,stateEffect:true}){
@@ -6155,9 +6155,10 @@ export struct LocalMusic {
             })
         }
         .backgroundColor(Color.Transparent)
+        .margin({ left: 5 })
 
       }
-      // .margin({ left: 20 })
+
 
       Button({type:ButtonType.Circle,stateEffect:true}){
         Column() {
@@ -6178,10 +6179,10 @@ export struct LocalMusic {
       }
       .backgroundColor(Color.Transparent)
       .layoutWeight(1)
-      .margin({ left: 33, right: 33 })
+      .margin({ left: 38, right: 38 })
 
 
-      Row({ space: 33 }) {
+      Row({ space: 20 }) {
         Button({ type: ButtonType.Capsule, stateEffect: true }) {
           Image($r('app.media.ic_next'))
             .width(33)
@@ -6194,6 +6195,7 @@ export struct LocalMusic {
             })
         }
         .backgroundColor(Color.Transparent)
+        .margin({ right: 5 })
         .width(33)
 
         Button({type:ButtonType.Circle,stateEffect:true}){
@@ -6213,7 +6215,7 @@ export struct LocalMusic {
         .width(24)
 
       }
-      // .margin({ right: 33 })
+      // .margin({ left: 5 })
 
     }
     .width('100%')
@@ -6298,9 +6300,9 @@ export struct LocalMusic {
 
       //播放列表
       Button({type:ButtonType.Circle,stateEffect:true}){
-        Image($r('app.media.playlist'))
+        Image($r('app.media.hm_playlist'))
           .width($r('app.float.control_image_width'))
-
+          .fillColor(Color.White)
           .aspectRatio(CommonConstants.ASPECT_RATIO)
           .bindSheet($$this.isShowSheetView, this.PlayListSheet(), {
             height: '95%',
@@ -6326,7 +6328,9 @@ export struct LocalMusic {
       })
 
     }
-    .width(PlayConstants.PROGRESS_ROW_WIDTH)
+    //x5的竖屏模式需要99%
+    .width(this.isPhonePortrait()?'93.4%'
+      :this.currentHeightBreakpoint==1&&this.currentWidthBreakpoint==2?'99%':'85%')
     .height(this.isPhoneLan()?25:33)
     // .visibility(this.isPhoneLan()&&this.isAutoHide?Visibility.None:Visibility.Visible)
     .animation({
@@ -6442,6 +6446,19 @@ export struct LocalMusic {
               .onClick(() => {
                 this.getImageColor()
               })
+            if(this.isPhoneLan()){
+              Text(this.name)
+                .fontSize(18)
+                .fontWeight(FontWeight.Bold)
+                .margin({top:13})
+                .textOverflow({ overflow: TextOverflow.Ellipsis })
+                .maxLines(1)
+                .width('99%')
+                .textAlign(TextAlign.Center)
+                .fontColor(Color.White)
+
+            }
+
           }
 
 
@@ -6490,25 +6507,10 @@ export struct LocalMusic {
       }
       if(this.isPhoneLan()){
         Column(){
-          Text(this.name)
-            .fontSize(18)
-            .fontWeight(FontWeight.Bold)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .maxLines(1)
-            .width('99%')
-            .textAlign(TextAlign.Center)
-            .fontColor(Color.White)
-          Text(this.artist + '  ' + this.currentSong?.album)
-            .fontSize(15)
-            .visibility(Visibility.Hidden)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .fontColor(Color.White)
-            .textAlign(TextAlign.Center)
-            .width('99%')
-            .maxLines(1)
+
           this.playProgressView()
         }
-        .position({bottom:45})
+        .position({bottom:48})
 
       }else{
         this.BottomControl()
@@ -6584,21 +6586,7 @@ export struct LocalMusic {
       }
       .visibility(this.isHide ? Visibility.Hidden : Visibility.None)
 
-      //更多功能
-      // Image( $r('app.media.two_point') )
-      //   .width(24)
-      //   .visibility(this.isHide?Visibility.None:Visibility.Visible)
-      //   .margin({left:13})
-      //   .bindSheet($$this.isShowMoreView, this.PlayMoreSheet(), {
-      //     height:this.isCoverOpacity()?'95%':'85%',
-      //     dragBar: true,
-      //     showClose: true,
-      //     blurStyle:BlurStyle.Thin,
-      //     backgroundColor:Color.Transparent,
-      //   })
-      //   .onClick(() => {
-      //     this.isShowMoreView = !this.isShowMoreView;
-      //   })
+
     }
     .width(PlayConstants.ROW_WIDTH)
 

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

@@ -70,11 +70,11 @@ export  class  MainViewModel{
       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.about_me'), { type: 'symbol', value: $r('sys.symbol.info_shield') },MainViewModel.MENU_ABOUT,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.share_tt'),  { type: 'symbol', value: $r('sys.symbol.share') },MainViewModel.MENU_SHARE,false),
     ];
     return drawerGridData;

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

@@ -4,11 +4,8 @@
     "pages/MainIndex",
     "pages/WebIndex",
     "pages/NewIndex",
-    "pages/AboutPage",
     "pages/VerifyPage",
-
     "pages/VipPage",
-
     "pages/Demo"
   ]
 }