增加尺寸自适应

entry/src/main/ets/entryability/EntryAbility.ets

@@ -1,10 +1,12 @@
 import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { window,display,AppStorageV2} from '@kit.ArkUI';
-
+import {MainScreenDisplayInfo,MainWindowInfo,MainWindowStageInfo} from '../pages/AppStorageV2Class'
 const DOMAIN = 0x0000;
 
 export default class EntryAbility extends UIAbility {
+  private mainWindow: window.Window | undefined;
+
   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
     try {
       this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
@@ -20,44 +22,67 @@ export default class EntryAbility extends UIAbility {
 
   onWindowStageCreate(windowStage: window.WindowStage): void {
     // Main window is created, set main page for this ability
-    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+    hilog.info(DOMAIN, 'Tag', '%{public}s', 'Ability onWindowStageCreate');
-    let window = windowStage.getMainWindowSync();
+    //Get DefaultDispplay width&&height&&id
+    const screenDisplayId:number=display.getDefaultDisplaySync().id;
+    const screenWidth:number=display.getDefaultDisplaySync().width;
+    const screenHeight:number=display.getDefaultDisplaySync().height;
+    //Set Main Window Size
+    const mainWindowWidth: number = screenWidth-100;
+    const mainWindowHeight: number = screenHeight-200;
+    //Init&&Save AppStorageV2
+    const mainDisplayInfo = AppStorageV2.connect<MainScreenDisplayInfo>(MainScreenDisplayInfo, () => new MainScreenDisplayInfo(
+      screenDisplayId,screenWidth,screenHeight
+    ))!;
+    const mainWinInfo=AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo(
+      mainWindowWidth,mainWindowHeight
+    ))!;
+    const mainWinStage=AppStorageV2.connect<MainWindowStageInfo>(MainWindowStageInfo, () => new MainWindowStageInfo(
+      windowStage
+    ))!;
+
+    //Get Main Window
+    windowStage.getMainWindow((err, data) => {
+      if (err.code) {
+        console.error(`Failed to obtain the main window. Code: ${err.code}, message: ${err.message}`);
+        return;
+      }
+      this.mainWindow=data;
+      //moveWindowTo
+      this.mainWindow.moveWindowTo(50,50)
+      //resize mainWindow Size
+      this.mainWindow.resize(mainWindowWidth, mainWindowHeight, (err) => {
+        if (err.code) {
+          console.error(`Failed to resize the window. Code: ${err.code}, message: ${err.message}`);
+          return;
+        }
+        console.info(`Succeeded in resizing the window to ${mainWindowWidth}x${mainWindowHeight}.`);
+      });
+
+      // windowSizeChangeListener to Change mainWindowWidth&&mainWindowHeight in AppStorage
+      this.mainWindow.on('windowSizeChange', (ListenerData) => {
+        // if Size Change save to AppStorage
+        mainWinInfo.mainWindowWidth=ListenerData.width;
+        mainWinInfo.mainWindowHeight=ListenerData.height;
+        console.info('Succeeded in enabling the listener for window size changes. Data: ' + JSON.stringify(data));
+      });
+    });
+
+    //Load page
     windowStage.loadContent('pages/Index', (err) => {
       if (err.code) {
         hilog.error(DOMAIN, 'Tag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
         return;
       }
-      AppStorage.setOrCreate('windowStage', windowStage);
-      let uiContext = window.getUIContext();
-
-      let screenWidth:number=display.getDefaultDisplaySync().width;
-      let screenHeight:number=display.getDefaultDisplaySync().height;
-      //定义新的宽度和高度（单位：虚拟像素）
-      const newWidth: number = screenWidth-uiContext.px2vp(200);
-      const newHeight: number = screenHeight-uiContext.px2vp(400);
-
-      //基于物理分辨率在长和高上分别缩小200vp
-      windowStage.getMainWindow((err, mainWindow) => {
-        if (err.code) {
-          console.error(`Failed to obtain the main window. Code: ${err.code}, message: ${err.message}`);
-          return;
-        }
-        mainWindow.moveWindowTo(uiContext.px2vp(100),uiContext.px2vp(100))
-        //调用resize方法修改窗口大小
-        mainWindow.resize(newWidth, newHeight, (err) => {
-          if (err.code) {
-            console.error(`Failed to resize the window. Code: ${err.code}, message: ${err.message}`);
-            return;
-          }
-          console.info(`Succeeded in resizing the window to ${newWidth}x${newHeight}.`);
-        });
-      });
       hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
     });
   }
 
   onWindowStageDestroy(): void {
-    AppStorage.delete('windowStage')
+    AppStorageV2.remove<MainWindowStageInfo>(MainWindowStageInfo);
+    if (this.mainWindow) {
+      this.mainWindow = undefined;
+    }
     // Main window is destroyed, release UI related resources
     hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
   }

entry/src/main/ets/pages/AppStorageV2Class.ets

@@ -0,0 +1,34 @@
+import { window} from '@kit.ArkUI';
+@ObservedV2
+export class MainScreenDisplayInfo {
+  @Trace public mainScreenDisplayId: number;
+  @Trace public mainScreenWidth: number;
+  @Trace public mainScreenHeight: number;
+
+  constructor(_id?: number, _width?: number,_height?: number) {
+    this.mainScreenDisplayId = _id ?? 0;
+    this.mainScreenWidth = _width ?? 0;
+    this.mainScreenHeight = _height ?? 0;
+  }
+}
+
+@ObservedV2
+export class MainWindowInfo {
+  @Trace public mainWindowWidth: number;
+  @Trace public mainWindowHeight: number;
+
+  constructor(_width?: number, _height?: number) {
+    this.mainWindowWidth = _width ?? 0;
+    this.mainWindowHeight = _height ?? 0;
+  }
+}
+
+@ObservedV2
+export class MainWindowStageInfo {
+  @Trace public ws: window.WindowStage| undefined;
+
+  constructor(_ws?: window.WindowStage) {
+    this.ws = _ws ?? undefined;
+  }
+}
+

entry/src/main/ets/pages/Index.ets

@@ -1,32 +1,37 @@
 import { hilog } from '@kit.PerformanceAnalysisKit';
-import { edgeColors,display } from '@kit.ArkUI';
+import { edgeColors, display, AppStorageV2 } from '@kit.ArkUI';
-import {TitleTab} from './TitleLayout/TitleTab'
+import { TitleTab } from './TitleLayout/TitleTab'
-import {LeftSideTab} from './LeftSideTab'
+import { LeftSideTab } from './LeftSideTab'
-import {ModelViewTab} from './modelViewTab'
+import { ModelViewTab } from './modelViewTab'
-import {TitleColumnSub} from './TitleLayout/TitleColumnSub'
+import { TitleColumnSub } from './TitleLayout/TitleColumnSub'
+import { MainWindowInfo } from './AppStorageV2Class'
+
 const DOMAIN = 0x0000;
 
 @Entry
-@Component
+@ComponentV2
 struct Index {
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
 
   build() {
     //OpenCAX主界面整体布局,采用多行布局
-    Column({space:0}) {
+    Column({ space: 0 }) {
       //头部导航功能区
       TitleTab()
-        .height('auto')
+        .height(this.mwInfo.mainWindowHeight * 0.08)
         .borderWidth(2)
         .borderRadius(5)
+
       //工具栏
       Row() {
         TitleColumnSub();
-      }.height('4%')
+      }
-       .width('100%')
+      .width('100%')
-       .borderWidth(2)
+      .height(this.mwInfo.mainWindowHeight * 0.03)
-       .borderRadius(5)
+      .borderWidth(2)
-       .align(Alignment.Start)
+      .borderRadius(5)
-       .margin({ top: -2,left:0,bottom:0,right:0})
+      .align(Alignment.Start)
+
       Row() {
         //左侧边导航区
         LeftSideTab().width("15%");
@@ -34,16 +39,24 @@ struct Index {
         Row() {
           ModelViewTab()
         }.width('90%')
-        .height('100%')
+         .borderWidth(1)
-        .borderWidth(1)
+         .align(Alignment.Center)
-        .align(Alignment.Center)
+      }.width('100%')
-      }.height('80%')
+      .height(this.mwInfo.mainWindowHeight * 0.38)
-       .borderWidth(2)
+      .borderWidth(2)
-       .borderRadius(5)
+      .borderRadius(5)
-       .margin({ top: -2,left:0,bottom:0,right:0})
+      .margin({
-      Column(){
+        top: -2,
-        Text('状态栏').height('100%').width('100%')
+        left: 0,
-      }.height('5%').borderWidth(1)
+        bottom: 0,
+        right: 0
+      })
+
+      Column() {
+        Text('状态栏')
+      }.width('100%')
+      .height(this.mwInfo.mainWindowHeight * 0.05)
+      .borderWidth(1)
     }.width('100%')
      .height('100%')
   }

entry/src/main/ets/pages/TitleLayout/TitleTab.ets

@@ -8,9 +8,13 @@ import {TitleData, TitleModel} from '../LayoutInterface/Layout/TabContent'
 import { TitleButton } from '../LayoutInterface/Interface/ButtonInterface'
 import { TitleGroup } from '../LayoutInterface/Interface/GroupInterface'
 import {TitleTabContent} from './TitleTabContent'
+import { MainWindowInfo } from '../AppStorageV2Class';
+import { AppStorageV2 } from '@kit.ArkUI';
 
+@Entry
 @ComponentV2
 export struct TitleTab {
+  @Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
   //顶部导航组件
   private titleBarTabs: TabsController = new TabsController();
   //当前的顶部导航选择页
@@ -20,13 +24,6 @@ export struct TitleTab {
   //模块Bar栏
   @Provider('curtModel') curtModel:Array<TitleModel>|undefined= TitleData.mModels.get(this.titleBarFocusIndex)
 
-  @Local indicatorColor: Color = Color.Blue;
-  @Local indicatorWidth: number = 40;
-  @Local indicatorHeight: number = 5;
-  @Local indicatorBorderRadius: number = 5;
-  @Local indicatorSpace: number = 10;
-  @Local subTabBorderRadius: number = 20;
-  @Local selectedMode: SelectedMode = SelectedMode.INDICATOR;
   @Builder
   FileMenu(menus: Array<TitleButton>) {
     Menu() {
@@ -82,9 +79,8 @@ export struct TitleTab {
       }.scrollable(false)
        .barHeight(0)
        .margin({ top: 0,left:0,bottom:0,right:0})
-       .height('auto')
        .barMode(BarMode.Fixed)
-    }.borderWidth('1')
+    }.width(this.mwInfo.mainWindowWidth)
-     .height('auto')
+     .borderWidth('1')
   }
 }