添加横竖屏切换及监听

app/src/main/ets/pages/Index.ets

@@ -1,40 +1,48 @@
 import { ComponentConst, ScreenUtil, TitleBar } from '@devwiki/common_ui';
 import { TitleBarMenuType } from '@devwiki/common_ui/src/main/ets/component/TitleBar';
-import { router } from '@kit.ArkUI';
-import { PageRouter } from './PageRouter';
 import { WebPage } from './WebPage';
+import { window } from '@kit.ArkUI';
 
 @CustomDialog
 struct WebViewDialog {
 
-  aboutToAppear(): void {
+  showHeight: Length = '50%';
-    ScreenUtil.getInstance().initScreenSize();
-  }
-
   dialogController: CustomDialogController = new CustomDialogController({
     builder: WebViewDialog({})
   });
 
   build() {
-    WebPage().height('100%').width('50%')
+    WebPage({onTitleBarLeftClick: ()=> {
+      this.dialogController.close();
+    }}).height(this.showHeight).width('100%')
   }
 }
 
 @Entry
 @Component
 struct Index {
+
   @State title: string = "Home";
+  @StorageLink(ScreenUtil.isPortraitKey)isPortrait: boolean = true;
+
   dialogController: CustomDialogController = new CustomDialogController({
-    builder: WebViewDialog(),
+    builder: WebViewDialog({showHeight: this.isPortrait ? '95%' : '50%'}),
-    alignment: DialogAlignment.CenterEnd,
+    alignment: DialogAlignment.BottomEnd,
     customStyle: true
   })
 
+  aboutToAppear(): void {
+    ScreenUtil.getInstance().initScreenSize();
+  }
+
+  onPageShow(): void {
+    ScreenUtil.getInstance().setPreferredOrientation(window.Orientation.AUTO_ROTATION_PORTRAIT);
+  }
+
   onTitleBarLeftClick(_event: ClickEvent) {
     this.getUIContext().getRouter().back();
   }
 
-
   onButtonClicked() {
     this.dialogController.open();
 
@@ -72,7 +80,7 @@ struct Index {
 
           GridItem() {
             Button("WebPage").type(ButtonType.Capsule).height(32).width(80)
-              .onClick(() => { });
+              .onClick(() => { this.dialogController.open() });
           }.rowStart(0).rowEnd(0).columnStart(1).columnEnd(1)
 
           GridItem() {

app/src/main/ets/pages/WebPage.ets

@@ -11,9 +11,7 @@ export struct WebPage {
     this.webViewController = new WebPageController(this.viewModel);
   }
 
-  onTitleBarLeftClick(event: ClickEvent) {
+  onTitleBarLeftClick?: Function;
-    this.getUIContext().getRouter().back();
-  }
 
   onTitleBarRightClick(event: ClickEvent) {
     this.webViewController?.refresh();

common_ui/src/main/ets/utils/ScreenUtil.ets

@@ -1,4 +1,5 @@
 import window from '@ohos.window';
+import mediaquery from '@ohos.mediaquery';
 
 export class ScreenUtil {
   // TODO: 工具待抽离， key统一定义
@@ -14,6 +15,9 @@ export class ScreenUtil {
   public layoutHeight: number = 0
 
 
+  private landscapeListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
+  private portraitListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: portrait)');
+
   public static getInstance(): ScreenUtil {
     if (!ScreenUtil.instance) {
       ScreenUtil.instance = new ScreenUtil();
@@ -22,6 +26,12 @@ export class ScreenUtil {
   }
 
   initScreenSize(): void {
+    this.landscapeListener.on('change', ()=> {
+      AppStorage.setOrCreate(ScreenUtil.isPortraitKey, false)
+    });
+    this.portraitListener.on('change', ()=> {
+      AppStorage.setOrCreate(ScreenUtil.isPortraitKey, true)
+    })
     window.getLastWindow(getContext(this))
       .then((windowClass: window.Window) => {
         let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
@@ -43,7 +53,6 @@ export class ScreenUtil {
     window.getLastWindow(getContext(this))
       .then((windowClass: window.Window) => {
         windowClass.setPreferredOrientation(orientation);
-        AppStorage.setOrCreate(ScreenUtil.isPortraitKey, orientation == window.Orientation.PORTRAIT || orientation == window.Orientation.PORTRAIT_INVERTED);
       })
       .catch((error: Error) => {
       })