更新getWindowInfo示例

pages.json

@@ -967,6 +967,13 @@
 				"navigationBarTitleText": "getWindowInfo | 获取窗口信息"
 			}
 		},
+		{
+			"path": "pages/API/get-window-info/window-area",
+			"style": {
+				"navigationBarTitleText": "window area",
+				"navigationStyle": "custom"
+			}
+		},
 		// #ifndef WEB
 		{
 			"path": "pages/API/element-draw/element-draw",
@@ -1879,6 +1886,8 @@
 		"backgroundColorContent": "@backgroundColorContent",
 		"backgroundColor": "@backgroundColor",
     "backgroundTextStyle": "@backgroundTextStyle"
+		"hideStatusBar": false,
+		"hideBottomNavigationIndicator": false
 	},
 	"tabBar": {
 		"color": "@tabBarColor",

pages/API/get-current-pages/page-style.uts

@@ -70,4 +70,14 @@ export const PageStyleArray = [
     key: "navigationBarAutoBackButton",
     type: "boolean",
     value: [true, false]
+  },
+  {
+    key: "hideStatusBar",
+    type: "boolean",
+    value: [true, false]
+  },
+  {
+    key: "hideBottomNavigationIndicator",
+    type: "boolean",
+    value: [true, false]
   }] as PageStyleItem[]

pages/API/get-window-info/get-window-info.uvue

@@ -15,6 +15,13 @@
       <view class="uni-btn-v">
         <button type="primary" @tap="getWindowInfo">获取窗口信息</button>
       </view>
+      <!-- #ifdef APP-ANDROID -->
+      <view class="uni-btn-v">
+        <navigator url="/pages/API/get-window-info/window-area">
+          <button type="primary">窗口各区域示例</button>
+        </navigator>
+      </view>
+      <!-- #endif -->
     </view>
   </view>
 </template>

pages/API/get-window-info/window-area.uvue

+<template>
+  <view style="flex:1;">
+    <view id="statusBar" class="statusBar" v-if="statusBarArea.width > 0 && statusBarArea.height > 0"
+      :style="{'width': statusBarArea.width,'height': statusBarArea.height}">
+    </view>
+    <view id="cutoutArea" class="cutoutArea" v-if="cutoutArea.length > 0" v-for="(item, _) in cutoutArea"
+      :style="{'top': item.top,'left': item.left,'width': item.width,'height': item.height}"></view>
+    <view id="safeArea" class="safeArea"
+      :style="{'top': safeArea.top,'left': safeArea.left,'width': safeArea.width,'height': safeArea.height}"></view>
+    <view id="bottomNavigationIndicator" class="bottomNavigationIndicator"
+      v-if="bottomNavigationIndicatorArea.width > 0 && bottomNavigationIndicatorArea.height > 0"
+      :style="{'width': bottomNavigationIndicatorArea.width,'height': bottomNavigationIndicatorArea.height}"></view>
+    <view style="flex: 1;justify-content: center;align-items: center;">
+      <view style="margin: 5px 0;">
+        <text style="color: red;">系统状态栏区域</text>
+      </view>
+      <view style="margin: 5px 0;">
+        <text style="color: orange;">摄像头区域</text>
+      </view>
+      <view style="margin: 5px 0;">
+        <text style="color: green;">安全区域</text>
+      </view>
+      <view style="margin: 5px 0;">
+        <text style="color: blue;">系统导航栏区域</text>
+      </view>
+      <!-- <view style="flex-direction: row;align-items: center;margin: 5px 0">
+        <text>显示系统状态栏</text>
+        <switch :checked="isStatusBarShow" @change="statusBarChange"></switch>
+      </view>
+      <view style="flex-direction: row;align-items: center;margin: 5px 0">
+        <text>显示系统导航栏</text>
+        <switch :checked="isBottomNavigationIndicatorShow" @change="bottomNavigationIndicatorChange"></switch>
+      </view> -->
+    </view>
+  </view>
+</template>
+
+<script setup>
+  type StatusBarArea = {
+    width : number,
+    height : number
+  }
+
+  type CutoutArea = {
+    top : number,
+    left : number,
+    width : number,
+    height : number
+  }
+
+  type SafeArea = {
+    top : number,
+    left : number,
+    width : number,
+    height : number
+  }
+
+  type BottomNavigationIndicatorArea = {
+    width : number,
+    height : number
+  }
+
+  const statusBarArea = ref({ width: 0, height: 0 } as StatusBarArea);
+  const cutoutArea = ref([] as CutoutArea[]);
+  const safeArea = ref({ top: 0, left: 0, width: 0, height: 0 } as SafeArea);
+  const bottomNavigationIndicatorArea = ref({ width: 0, height: 0 } as BottomNavigationIndicatorArea);
+  const isStatusBarShow = ref(false);
+  const isBottomNavigationIndicatorShow = ref(false);
+
+  const getWindowInfo = () => {
+    const info = uni.getWindowInfo();
+    statusBarArea.value.width = info.windowWidth;
+    statusBarArea.value.height = info.safeAreaInsets.top;
+    cutoutArea.value.length = 0;
+    (info.cutoutArea ?? []).forEach((item) => {
+      cutoutArea.value.push({
+        top: item.top,
+        left: item.left,
+        width: item.right - item.left,
+        height: item.bottom - item.top
+      } as CutoutArea);
+    })
+    safeArea.value.top = info.safeArea.top;
+    safeArea.value.left = info.safeArea.left;
+    safeArea.value.width = info.safeArea.width;
+    safeArea.value.height = info.safeArea.height;
+    bottomNavigationIndicatorArea.value.width = info.windowWidth;
+    bottomNavigationIndicatorArea.value.height = info.safeAreaInsets.bottom;
+  };
+
+  const statusBarChange = (e : UniSwitchChangeEvent) => {
+    const pages = getCurrentPages();
+    pages[pages.length - 1].setPageStyle({
+      'hideStatusBar': !e.detail.value,
+    });
+  };
+
+  const bottomNavigationIndicatorChange = (e : UniSwitchChangeEvent) => {
+    const pages = getCurrentPages();
+    pages[pages.length - 1].setPageStyle({
+      'hideBottomNavigationIndicator': !e.detail.value,
+    });
+  };
+
+  onReady(() => {
+    const pages = getCurrentPages();
+    isStatusBarShow.value = !(pages[pages.length - 1].getPageStyle()['hideStatusBar'] as boolean);
+    isBottomNavigationIndicatorShow.value = !(pages[pages.length - 1].getPageStyle()['hideBottomNavigationIndicator'] as boolean);
+    getWindowInfo();
+  });
+
+  onResize((_ : OnResizeOptions) => {
+    getWindowInfo();
+  });
+</script>
+
+<style>
+  .statusBar {
+    position: absolute;
+    border-style: solid;
+    border-color: red;
+    border-width: 4px;
+  }
+
+  .cutoutArea {
+    position: absolute;
+    border-style: solid;
+    border-color: orange;
+    border-width: 4px;
+  }
+
+  .safeArea {
+    position: absolute;
+    border-style: solid;
+    border-color: green;
+    border-width: 4px;
+  }
+
+  .bottomNavigationIndicator {
+    position: absolute;
+    bottom: 0;
+    border-style: solid;
+    border-color: blue;
+    border-width: 4px;
+  }
+</style>

pages/template/slider-100/slider-100.uvue

@@ -10,6 +10,7 @@
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
+  <view :style="{'height': safeAreaInsetsBottom}"></view>
 </template>
 
 <script>
@@ -17,9 +18,13 @@
     data() {
       return {
         title: 'slider 滑块 x 100',
-        sliderValue: 50
+        sliderValue: 50,
+        safeAreaInsetsBottom: 0
       }
     },
+    onReady() {
+      this.safeAreaInsetsBottom = uni.getWindowInfo().safeAreaInsets.bottom;
+    },
     methods: {
       sliderChange(e : UniSliderChangeEvent) {
         this.updateSliderValue(e.detail.value)