适配更多page自适应布局

2026-03-18 23:23:26 +08:00 · 2026-03-18 23:23:26 +08:00 · f7456ffb37
commit f7456ffb37
parent 3d61b07c7e
5 changed files with 66 additions and 53 deletions
--- a/entry/src/main/ets/pages/CustomStyle/Button.ets
+++ b/entry/src/main/ets/pages/CustomStyle/Button.ets
@ -3,19 +3,22 @@ import { ExecuteCommand } from '../EventSubWindow/ExecuteCommand';
 import { TitleButton } from "../LayoutInterface/Interface/ButtonInterface";
 import { TitleModel } from "../LayoutInterface/Interface/ModelInterface";
 import { TitleData } from '../LayoutInterface/Layout/TabContent';
+import { AppStorageV2 } from '@kit.ArkUI';
+import { MainWindowInfo } from '../AppStorageV2Class';

 //单一功能按钮
 //图片->文本
 //不能用于模块切换
@ComponentV2
 export struct EventBtn {
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
  @Param eventBtn: TitleButton | undefined = undefined;
  build() {
    Column({ space: 0 }) {
      if (this.eventBtn != undefined) {
        Button()
-          .width(35)
-          .height(35)
+          .width(this.mwInfo.mainWindowWidth*0.02)
+          .height(this.mwInfo.mainWindowWidth*0.02)
          .backgroundImage($r('app.media.' + this.eventBtn.eIcon))
          .backgroundImagePosition({ x: '5%', y: '5%' })
          .backgroundColor(Color.Transparent)
@ -27,20 +30,17 @@ export struct EventBtn {
            ExecuteCommand(this.eventBtn as TitleButton);
          })
        Text()
-          .width(50)
-          .height(7)
+          .width('auto')
+          .height(this.mwInfo.mainWindowWidth*0.005)
          .backgroundColor(Color.Transparent)
        Text(this.eventBtn.eName)
-          .fontSize(10)
-          .width(50)
-          .height(10)
+          .fontSize(16)
+          .width('auto')
+          .height(this.mwInfo.mainWindowWidth*0.005)
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Transparent)
      }
-    }
-    .height(50)
-    .width(50)
-    .padding(1)
+    }.padding(1)
  }
 }

@ -48,20 +48,21 @@ export struct EventBtn {
 //仅仅用于模块切换
@ComponentV2
 export struct SwitchModelBtn {
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
  @Param eventBtn: TitleButton | undefined = undefined;
  @Consumer('curtModel') curtModel: Array<TitleModel> | undefined = TitleData.mModels.get(0)
  build() {
    Column({ space: 2 }) {
      if (this.eventBtn != undefined) {
        Button()
-          .width('35vp')
-          .height('35vp')
+          .width(this.mwInfo.mainWindowWidth*0.02)
+          .height(this.mwInfo.mainWindowWidth*0.02)
          .backgroundImage($r('app.media.' + this.eventBtn.eIcon))
-          .backgroundImagePosition({ x: '10%', y: '10%' })
+          .backgroundImagePosition({ x: '5%', y: '5%' })
          .backgroundColor(Color.Transparent)
          .backgroundImageSize({
-            width: '80%', // 图片宽度占满按钮
-            height: '80%' // 图片高度占满按钮
+            width: '90%', // 图片宽度占满按钮
+            height: '90%' // 图片高度占满按钮
          }).onClick(() => {
          if (this.eventBtn?.eEvent == 'Switch_Model_CAD') {
            this.curtModel = TitleData.mModels.get(1)
@ -71,16 +72,17 @@ export struct SwitchModelBtn {
            this.curtModel = TitleData.mModels.get(3)
          }
        })
+        Text()
+          .width('auto')
+          .height(this.mwInfo.mainWindowWidth*0.005)
+          .backgroundColor(Color.Transparent)
        Text(this.eventBtn.eName)
-          .fontSize('10fp')
-          .width('45vp')
-          .height('10vp')
+          .fontSize(16)
+          .width('auto')
+          .height(this.mwInfo.mainWindowWidth*0.005)
          .textAlign(TextAlign.Center)
      }
-    }
-    .height('50vp')
-    .width('50vp')
-    .padding('1vp')
+    }.padding(1)
  }
 }

--- a/entry/src/main/ets/pages/CustomStyle/Menu.ets
+++ b/entry/src/main/ets/pages/CustomStyle/Menu.ets
@ -3,12 +3,15 @@ import { TitleGroup } from "../LayoutInterface/Interface/GroupInterface";
 import { TitleButton } from "../LayoutInterface/Interface/ButtonInterface";
 import { EventBtn } from "./Button";
 import { ExecuteCommand } from "../EventSubWindow/ExecuteCommand";
+import { AppStorageV2 } from "@kit.ArkUI";
+import { MainWindowInfo } from "../AppStorageV2Class";


 //菜单按钮
 //主要用于功能组操作菜单.文件下拉菜单等.
@ComponentV2
 export struct GroupTextEventMenu {
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
  @Param grpEvent: TitleGroup | undefined = undefined;

  @Builder
@ -31,18 +34,18 @@ export struct GroupTextEventMenu {
        //功能组名文本
        Blank().width('auto')
        Text(this.grpEvent.grpName)
-          .fontSize(8)
+          .fontSize(16)
          .fontColor(Color.Gray)
        Blank().width('auto')
        Button()
-          .height(15)
-          .width(15)
+          .height(this.mwInfo.mainWindowWidth*0.01)
+          .width(this.mwInfo.mainWindowWidth*0.01)
          .padding(1)
          .backgroundImage($r('app.media.base_seetings'))
-          .backgroundImagePosition({ x: '10%', y: '10%' })
+          .backgroundImagePosition({ x: '5%', y: '5%' })
          .backgroundImageSize({
-            width: '80%', // 图片宽度占满按钮
-            height: '80%' // 图片高度占满按钮
+            width: '90%', // 图片宽度占满按钮
+            height: '90%' // 图片高度占满按钮
          })
          .bindMenu(this.GroupMenu(this.grpEvent.grpMenu))
          .backgroundColor(Color.Transparent)
@ -55,6 +58,7 @@ export struct GroupTextEventMenu {
 //功能目录菜单,主要用于针对单一按钮多个功能形式
@ComponentV2
 export struct MenuBtn {
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
  @Param menuBtn: Array<TitleButton> | undefined = undefined;
  @Param iconState: boolean = false;
  @Local curtIndex:number=0;
@ -63,7 +67,6 @@ export struct MenuBtn {
    Menu() {
      ForEach(this.menuBtn, (item: TitleButton, index: number) => {
        MenuItem({ startIcon: $r('app.media.' + item.eIcon), content: item.eName })
-          .width('auto')
          .margin({
            top: 0,
            left: 0,
@ -83,8 +86,8 @@ export struct MenuBtn {
      if (this.menuBtn != undefined) {
        Button()
          .bindMenu(this.EventMenu)
-          .width(35)
-          .height(35)
+          .width(this.mwInfo.mainWindowWidth*0.02)
+          .height(this.mwInfo.mainWindowWidth*0.02)
          .backgroundImage($r('app.media.' + this.menuBtn[this.curtIndex].eIcon))
          .backgroundImagePosition({ x: '5%', y: '5%' })
          .backgroundColor(Color.Transparent)
@ -93,23 +96,22 @@ export struct MenuBtn {
            height: '90%' // 图片高度占满按钮
          })
        Button()
+          .type(ButtonType.Normal)
          .bindMenu(this.EventMenu)
-          .width(50)
-          .height(7)
+          .width(this.mwInfo.mainWindowWidth*0.02)
+          .height(this.mwInfo.mainWindowWidth*0.005)
          .backgroundImage($r('app.media.base_chevron_down'))
-          .backgroundImagePosition({ x: '35%', y: '-50%' })
+          .backgroundImagePosition({ x: '35%', y: '0%' })
          .backgroundColor(Color.Transparent)
+
        Text(this.menuBtn[this.curtIndex].eName)
-          .fontSize(10)
-          .width(50)
-          .height(10)
+          .fontSize(16)
+          .width('auto')
+          .height(this.mwInfo.mainWindowWidth*0.005)
          .textAlign(TextAlign.Center)

      }
-    }
-    .height(50)
-    .width(50)
-    .padding(1)
+    }.padding(1)
  }
 }

--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@ -18,7 +18,7 @@ struct Index {
    Column({ space: 0 }) {
      //头部导航功能区
      TitleTab()
-        .height(this.mwInfo.mainWindowHeight * 0.08)
+        .height(this.mwInfo.mainWindowHeight * 0.1)
        .borderWidth(2)
        .borderRadius(5)

@ -42,7 +42,7 @@ struct Index {
         .borderWidth(1)
         .align(Alignment.Center)
      }.width('100%')
-      .height(this.mwInfo.mainWindowHeight * 0.38)
+      .height(this.mwInfo.mainWindowHeight * 0.36)
      .borderWidth(2)
      .borderRadius(5)
      .margin({
--- a/entry/src/main/ets/pages/TitleLayout/TitleTab.ets
+++ b/entry/src/main/ets/pages/TitleLayout/TitleTab.ets
@ -29,7 +29,8 @@ export struct TitleTab {
    Menu() {
      ForEach(menus, (item: TitleButton, index: number) => {
        MenuItem({ startIcon: $r('app.media.'+item.eIcon), content: item.eName })
-          .width('150')
+          .width('auto')
+          .height('auto')
          .margin({
            top: 0,
            left: 0,
@ -44,16 +45,18 @@ export struct TitleTab {
      Scroll() {
        Row({space:0}) {
          Button(TitleData.mFileModel.cmName)
-            .height(25)
-            .width(100)
+            .fontSize(16)
+            .height(this.mwInfo.mainWindowHeight*0.025)
+            .width(this.mwInfo.mainWindowWidth*0.035)
            .bindMenu(this.FileMenu(TitleData.mFileModel.cmEvents as Array<TitleButton>))
            .type(ButtonType.Normal)
            .backgroundColor(Color.Brown)
          ForEach(this.curtModel, (item: TitleModel, index: number) => {
            Button(item.cmName)
+              .fontSize(16)
              .fontWeight(index === this.titleBarFocusIndex ? FontWeight.Bold : FontWeight.Normal)
-              .height(25)
-              .width(100)
+              .height(this.mwInfo.mainWindowHeight*0.025)
+              .width(this.mwInfo.mainWindowWidth*0.035)
              .type(ButtonType.Normal)
              .backgroundColor(index === this.titleBarFocusIndex ? Color.Blue : Color.Brown)
              .onClick(() => {
--- a/entry/src/main/ets/pages/TitleLayout/TitleTabContent.ets
+++ b/entry/src/main/ets/pages/TitleLayout/TitleTabContent.ets
@ -4,9 +4,13 @@ import { TitleGroup} from '../LayoutInterface/Interface/GroupInterface';
 import {GroupTextEventMenu,MenuBtn} from '../CustomStyle/Menu'
 import {EventBtn,SwitchModelBtn} from '../CustomStyle/Button'
 import { TitleModel } from '../LayoutInterface/Layout/TabContent';
+import { MainWindowInfo } from '../AppStorageV2Class';
+import { AppStorageV2 } from '@kit.ArkUI';

@ComponentV2
 export struct TitleTabContent {
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
+
  @Param curtLayout:TitleModel|undefined=undefined;

  build() {
@ -23,7 +27,7 @@ export struct TitleTabContent {
            }else if(row_item instanceof Array<TitleGroup>){ //Array<TitleGroup>
              //功能组,迭代多个功能组
               ForEach(row_item, (group_item: TitleGroup, index: number) =>{
-                 Column({ space: 5 }){
+                 Column({ space: 7 }){
                   Row({ space: 1 }){
                     ForEach(group_item.grpBtn, (btn_item: TitleButton|Array<TitleButton>, index: number) =>{
                       if(this.curtLayout?.cmName=='应用模块'){
@ -43,9 +47,11 @@ export struct TitleTabContent {
                   }.margin({ top: 1,left:1,bottom:1,right:1})
                   //功能组名
                   GroupTextEventMenu({grpEvent:group_item})
-                 }.borderWidth(1)
+                 }.borderWidth(2)
                  .borderRadius(5)
                  .borderColor(Color.Grey)
+                  .margin({ top: 0,left:5,bottom:0,right:0})
+                  .height(this.mwInfo.mainWindowHeight*0.073)
               })
            }else{
              //菜单按钮
@ -58,10 +64,10 @@ export struct TitleTabContent {
              }
            }
          })
-        }
-         .width('100%')
+        }.width('100%')
         .align(Alignment.BottomEnd)
         .borderColor(Color.Gray)
+
      })
    }.margin({ top: 1,left:1,bottom:1,right:1})
     //.borderWidth(1)