Merge pull request #73 from YiQingZi/main

重构我的中心标题栏: 自适应宽度、居中、编辑、菜单按钮

Author: mgz0227

entry/src/main/ets/componets/myCenter/MyCenterTitle.ets

@@ -0,0 +1,72 @@
+import { router } from '@kit.ArkUI'
+import CommonConstants from '../../common/constants/CommonConstants'
+
+@Component
+export struct MyCenterTitle{
+
+  @Prop title:string
+
+  // 是否显示编辑按钮
+  isShowEdit?:boolean = false
+  // 是否显示菜单
+  isShowMore?:boolean = false
+
+  // 编辑标题按钮事件
+  onEditClickEvent?: (event: ClickEvent) => void
+  // 更多菜单按钮
+  onMoreClickEvent?: (event: ClickEvent) => void
+
+  @StorageProp('topRectHeight') topRectHeight: number = 0
+
+  // 重构 我的中心标题栏
+  build() {
+    Column(){
+      // 如果同步状态栏高度不成功，默认40
+      Blank(this.topRectHeight == 0 ? 40 : this.topRectHeight)
+
+      Row(){
+        Image($r("app.media.return_left"))
+          .size({width:CommonConstants.TITLE_IMG_SIZE,height:CommonConstants.TITLE_IMG_SIZE})
+          .onClick(()=>{
+            router.back()
+          })
+
+        Row(){
+          Row(){
+            if (this.isShowEdit){
+              // 左占位
+              Blank(CommonConstants.TITLE_IMG_SIZE)
+                .margin({right: 8})
+            }
+
+            // 标题
+            Text(this.title).fontSize(16).fontWeight(600).lineHeight(24)
+              .textAlign(TextAlign.Center)
+
+            // 修改标题的 笔图标
+            if (this.isShowEdit){
+              Image($r("app.media.ic_public_edit"))
+                .size({width:CommonConstants.TITLE_IMG_SIZE,height:CommonConstants.TITLE_IMG_SIZE})
+                .margin({left: 8})
+                .onClick(this.onEditClickEvent)
+            }
+          }
+        }
+        .justifyContent(FlexAlign.Center)
+        .layoutWeight(1) // 占满剩余空间
+
+        // 修改标题的 菜单标
+        if (this.isShowMore){
+          Image($r("app.media.more_vertical"))
+            .size({width:CommonConstants.TITLE_IMG_SIZE,height:CommonConstants.TITLE_IMG_SIZE})
+            .onClick(this.onMoreClickEvent)
+        }else { // 占位，保持标题居中
+          Blank(CommonConstants.TITLE_IMG_SIZE)
+        }
+      }
+      // 固定高度不能适配所有设备，应该100%，主轴居中显示
+      .width("100%").justifyContent(FlexAlign.Center).padding({top:12,bottom:12})
+      //.width(320).justifyContent(FlexAlign.Start).padding({top:12,bottom:12})
+    }
+  }
+}

entry/src/main/ets/componets/myCenter/myCenterTitle.ets

@@ -1,5 +1,5 @@
 import { dataItem } from '../../../componets/dataList/dataItem'
-import { myCenterTitle } from '../../../componets/myCenter/myCenterTitle'
+import { MyCenterTitle } from '../../../componets/myCenter/MyCenterTitle'
 import { serviceDialog } from '../../../componets/webDavService/serviceDialog'
 
 @Entry
@@ -17,7 +17,7 @@ struct clearCache{
   build() {
     Column({space:12}){
       //标题栏
-      myCenterTitle({title:"清理缓存"})
+      MyCenterTitle({title:"清理缓存"})
       Column(){
         ForEach(this.clearList,(item:dataItem,index:number)=>{
           Row({space:10}){

entry/src/main/ets/pages/view/myCenter/clearCache.ets

@@ -1,6 +1,6 @@
 import { promptAction, router } from '@kit.ArkUI';
 import { dataItem } from '../../../componets/dataList/dataItem';
-import { myCenterTitle } from '../../../componets/myCenter/myCenterTitle';
+import { MyCenterTitle } from '../../../componets/myCenter/MyCenterTitle';
 import { cloudDisKBindSheetComponet } from '../../../componets/myCenter/cloudDisKBindSheetComponet';
 
 @Entry
@@ -147,7 +147,7 @@ struct CloudDisk {
       Column() {
         //标题栏
 
-        myCenterTitle({title:"云备份"})
+        MyCenterTitle({title:"云备份"})
         //备份图片及按钮
         Column(){
           Column(){

entry/src/main/ets/pages/view/myCenter/cloudDisk.ets

@@ -1,7 +1,7 @@
 import { ColumnModifier } from '../../../common/utils/ComponetModifier';
 import { dataItem } from '../../../componets/dataList/dataItem';
 
-import { myCenterTitle } from '../../../componets/myCenter/myCenterTitle';
+import { MyCenterTitle } from '../../../componets/myCenter/MyCenterTitle';
 
 import { diskComponet } from '../../../componets/myCenter/diskComponet';
 
@@ -83,7 +83,7 @@ struct DiskSet {
   build() {
     Column() {
       //标题栏
-      myCenterTitle({title:"备份设置"})
+      MyCenterTitle({title:"备份设置"})
 
       Column(){
         diskComponet({