diff --git a/AnimationDemos/entry/src/main/ets/common/utils/windowutils/WindowUtils.ets b/AnimationDemos/entry/src/main/ets/common/utils/windowutils/WindowUtils.ets index f8b8e1c76c5cc48bd4c8e63e42a5e8de2267b37e..87807d7d043142db75b8f321222a812f9a667829 100644 --- a/AnimationDemos/entry/src/main/ets/common/utils/windowutils/WindowUtils.ets +++ b/AnimationDemos/entry/src/main/ets/common/utils/windowutils/WindowUtils.ets @@ -1,13 +1,78 @@ -import { window } from '@kit.ArkUI'; +import { display, window } from '@kit.ArkUI'; + +const TAG = 'WindowUtils'; + export class WindowUtils { public static window: window.Window; - public static windowWidth_px: number; - public static windowHeight_px: number; - public static topAvoidAreaHeight_px: number; - public static navigationIndicatorHeight_px: number; + private static currentBreakPoint: string = '' + + public static init(windowStage: window.WindowStage) { + // 获取窗口宽高 + WindowUtils.window = windowStage.getMainWindowSync(); + WindowUtils.windowWidth_px = WindowUtils.window.getWindowProperties().windowRect.width; + WindowUtils.windowHeight_px = WindowUtils.window.getWindowProperties().windowRect.height; + + WindowUtils.updateBreakpoint(WindowUtils.windowWidth_px) + + // 获取上方避让区(状态栏等)高度 + let avoidArea = WindowUtils.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); + WindowUtils.topAvoidAreaHeight_px = avoidArea.topRect.height; + + // 获取导航条高度 + let navigationArea = WindowUtils.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR); + WindowUtils.navigationIndicatorHeight_px = navigationArea.bottomRect.height; + + console.log(TAG, 'the width is ' + WindowUtils.windowWidth_px + ' ' + WindowUtils.windowHeight_px + ' ' + + WindowUtils.topAvoidAreaHeight_px + ' ' + WindowUtils.navigationIndicatorHeight_px); + + // 监听窗口尺寸、状态栏高度及导航条高度的变化并更新 + try { + WindowUtils.window.on('windowSizeChange', (data) => { + console.log(TAG, 'on windowSizeChange, the width is ' + data.width + ', the height is ' + data.height); + WindowUtils.windowWidth_px = data.width; + WindowUtils.windowHeight_px = data.height; + AppStorage.setOrCreate('windowSizeChanged', Date.now()) + WindowUtils.updateBreakpoint(data.width) + }) + + WindowUtils.window.on('avoidAreaChange', (data) => { + if (data.type == window.AvoidAreaType.TYPE_SYSTEM) { + let topRectHeight = data.area.topRect.height; + console.log(TAG, 'on avoidAreaChange, the top avoid area height is ' + topRectHeight); + WindowUtils.topAvoidAreaHeight_px = topRectHeight; + } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { + let bottomRectHeight = data.area.bottomRect.height; + console.log(TAG, 'on avoidAreaChange, the navigation indicator height is ' + bottomRectHeight); + WindowUtils.navigationIndicatorHeight_px = bottomRectHeight; + AppStorage.setOrCreate('currentNavigationIndicator', bottomRectHeight) + } + }) + } catch (exception) { + console.log(TAG, 'register failed ' + JSON.stringify(exception)); + } + } + + public static updateBreakpoint(width: number) { + let windowWidthVp = width / (display.getDefaultDisplaySync().densityDPI / 160); + let newBreakPoint: string = ''; + if (windowWidthVp < 400) { + newBreakPoint = 'xs'; + } else if (windowWidthVp < 600) { + newBreakPoint = 'sm'; + } else if (windowWidthVp < 800) { + newBreakPoint = 'md'; + } else { + newBreakPoint = 'lg'; + } + if (WindowUtils.currentBreakPoint !== newBreakPoint) { + WindowUtils.currentBreakPoint = newBreakPoint; + // 使用状态变量记录当前断点值 + AppStorage.setOrCreate('currentBreakpoint', WindowUtils.currentBreakPoint); + } + } } \ No newline at end of file diff --git a/AnimationDemos/entry/src/main/ets/entryability/EntryAbility.ets b/AnimationDemos/entry/src/main/ets/entryability/EntryAbility.ets index 3219f1e1e7ed928db4b8c72d3e2d8d130eacc7b6..357fb32e6b84371edb649d1d96d21b7559d43d84 100644 --- a/AnimationDemos/entry/src/main/ets/entryability/EntryAbility.ets +++ b/AnimationDemos/entry/src/main/ets/entryability/EntryAbility.ets @@ -1,14 +1,11 @@ import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { display, window } from '@kit.ArkUI'; +import { window } from '@kit.ArkUI'; import { WindowUtils } from '../common/utils/windowutils/WindowUtils'; import { WindowUtility } from 'ets/common/utils/windowutils/WindowUtility'; -const TAG: string = 'EntryAbility'; export default class EntryAbility extends UIAbility { - private currentBreakPoint: string = ''; - onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); } @@ -21,49 +18,10 @@ export default class EntryAbility extends UIAbility { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - WindowUtility.setWindow(windowStage) - // 获取窗口宽高 - WindowUtils.window = windowStage.getMainWindowSync(); - WindowUtils.windowWidth_px = WindowUtils.window.getWindowProperties().windowRect.width; - WindowUtils.windowHeight_px = WindowUtils.window.getWindowProperties().windowRect.height; - - this.updateBreakpoint(WindowUtils.windowWidth_px); - - // 获取上方避让区(状态栏等)高度 - let avoidArea = WindowUtils.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); - WindowUtils.topAvoidAreaHeight_px = avoidArea.topRect.height; - - // 获取导航条高度 - let navigationArea = WindowUtils.window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR); - WindowUtils.navigationIndicatorHeight_px = navigationArea.bottomRect.height; + WindowUtils.init(windowStage) - console.log(TAG, 'the width is ' + WindowUtils.windowWidth_px + ' ' + WindowUtils.windowHeight_px + ' ' + - WindowUtils.topAvoidAreaHeight_px + ' ' + WindowUtils.navigationIndicatorHeight_px); - - // 监听窗口尺寸、状态栏高度及导航条高度的变化并更新 - try { - WindowUtils.window.on('windowSizeChange', (data) => { - console.log(TAG, 'on windowSizeChange, the width is ' + data.width + ', the height is ' + data.height); - WindowUtils.windowWidth_px = data.width; - WindowUtils.windowHeight_px = data.height; - this.updateBreakpoint(data.width); - AppStorage.setOrCreate('windowSizeChanged', Date.now()) - }) + WindowUtility.setWindow(windowStage) - WindowUtils.window.on('avoidAreaChange', (data) => { - if (data.type == window.AvoidAreaType.TYPE_SYSTEM) { - let topRectHeight = data.area.topRect.height; - console.log(TAG, 'on avoidAreaChange, the top avoid area height is ' + topRectHeight); - WindowUtils.topAvoidAreaHeight_px = topRectHeight; - } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { - let bottomRectHeight = data.area.bottomRect.height; - console.log(TAG, 'on avoidAreaChange, the navigation indicator height is ' + bottomRectHeight); - WindowUtils.navigationIndicatorHeight_px = bottomRectHeight; - } - }) - } catch (exception) { - console.log('register failed ' + JSON.stringify(exception)); - } windowStage.loadContent('pages/Index', (err) => { if (err.code) { @@ -74,26 +32,6 @@ export default class EntryAbility extends UIAbility { }); } - updateBreakpoint(width: number) { - let windowWidthVp = width / (display.getDefaultDisplaySync().densityDPI / 160); - let newBreakPoint: string = ''; - if (windowWidthVp < 400) { - newBreakPoint = 'xs'; - } else if (windowWidthVp < 600) { - newBreakPoint = 'sm'; - } else if (windowWidthVp < 800) { - newBreakPoint = 'md'; - } else { - newBreakPoint = 'lg'; - } - console.log('LOG--', this.currentBreakPoint, newBreakPoint) - if (this.currentBreakPoint !== newBreakPoint) { - this.currentBreakPoint = newBreakPoint; - // 使用状态变量记录当前断点值 - AppStorage.setOrCreate('currentBreakpoint', this.currentBreakPoint); - } - } - onWindowStageDestroy(): void { // Main window is destroyed, release UI related resources hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); diff --git a/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithList/Index.ets b/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithList/Index.ets index 0929259a5632fe548304f9ad40616c647ba7d95c..9ed4032bc6f1342948c66a8519bd39d7058bd3c5 100644 --- a/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithList/Index.ets +++ b/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithList/Index.ets @@ -11,11 +11,20 @@ struct TabsBlurWithList { @State currentIndex: number = 0; private tabBarTexts: string[] = ['首页', '视频', '发现', '消息', '我'] private dataSource: number[] = new Array(8).fill(0) + @State placeholderHeight: number | undefined = px2vp(WindowUtils.navigationIndicatorHeight_px) + @StorageProp('currentNavigationIndicator') @Watch('updateTabBarHeight') navigationIndicatorHeight: number = 0; + + updateTabBarHeight() { + if (this.navigationIndicatorHeight) { + this.placeholderHeight = px2vp(WindowUtils.navigationIndicatorHeight_px) + } else { + this.placeholderHeight = 0 + } + } @Builder ListBuilder() { List({ space: 10 }) { - ForEach(this.dataSource, (_: number, index: number) => { ListItem() { Image($r('app.media.img_' + index)) @@ -56,7 +65,7 @@ struct TabsBlurWithList { Column() { } - .height(px2vp(WindowUtils.navigationIndicatorHeight_px)) + .height(this.placeholderHeight) .width('100%') } .alignRules({ @@ -64,7 +73,7 @@ struct TabsBlurWithList { anchor: '__container__', align: VerticalAlign.Bottom } }) - .backgroundBlurStyle(BlurStyle.COMPONENT_THIN) + .backgroundBlurStyle(BlurStyle.COMPONENT_THICK) .backgroundColor(Color.Transparent) } @@ -77,7 +86,7 @@ struct TabsBlurWithList { .backgroundColor('#FBFAFA') } .hideTitleBar(true) - .onReady((context: NavDestinationContext) => { + .onReady(() => { WindowUtils.window.setWindowLayoutFullScreen(true) }) .onDisAppear(() => { diff --git a/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithRow/Index.ets b/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithRow/Index.ets index 004e62cc90e5005067504b2e4553414f26973420..16407c9906e633b0a736c02375208988280bd5d6 100644 --- a/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithRow/Index.ets +++ b/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/CustomTabBarWithRow/Index.ets @@ -1,3 +1,5 @@ +import { WindowUtils } from "../../../../../common/utils/windowutils/WindowUtils"; + @Builder export function TabsBlurWithRowBuilder() { TabsBlurWithRow(); @@ -9,6 +11,16 @@ struct TabsBlurWithRow { @State currentIndex: number = 0; private tabBarTexts: string[] = ['首页', '视频', '发现', '消息', '我'] private dataSource: number[] = new Array(8).fill(0) + @State tabBarHeight: number | undefined = 68 + @StorageProp('currentNavigationIndicator') @Watch('updateTabBarHeight') navigationIndicatorHeight: number = 0; + + updateTabBarHeight() { + if (this.navigationIndicatorHeight) { + this.tabBarHeight = 68 + } else { + this.tabBarHeight = undefined + } + } @Builder ListBuilder() { @@ -31,25 +43,28 @@ struct TabsBlurWithRow { TabBarBuilder() { Row() { ForEach(this.tabBarTexts, (text: string, index) => { - Stack() { - Column({ space: 4 }) { - Image($r('app.media.icon_' + index)) - .height(20) - .width(20) - Text(text) - .fontSize(12) + Column() { // 非全屏情况下不需要这层Column容器 + Stack() { + Column({ space: 4 }) { + Image($r('app.media.icon_' + index)) + .height(20) + .width(20) + Text(text) + .fontSize(12) + } } + .height(48) } - .height(48) + .height(this.tabBarHeight) }) } .width('100%') .justifyContent(FlexAlign.SpaceAround) // 设置模糊的容器不能设置具体高度，否则会形成底部导航条避让 // .height(48) - .backgroundBlurStyle(BlurStyle.COMPONENT_THIN) + .backgroundBlurStyle(BlurStyle.COMPONENT_THICK) .backgroundColor(Color.Transparent) - // 扩展安全区 + // 非全屏情况下，通过 expandSafeArea 扩展安全区 .expandSafeArea([SafeAreaType.SYSTEM]) } @@ -62,6 +77,13 @@ struct TabsBlurWithRow { .align(Alignment.BottomStart) .backgroundColor('#FBFAFA') } + .onReady(() => { + // 设置全屏 + WindowUtils.window.setWindowLayoutFullScreen(true) + }) + .onDisAppear(() => { + WindowUtils.window.setWindowLayoutFullScreen(false) + }) .hideTitleBar(true) } } \ No newline at end of file diff --git a/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/DefaultTabBar/Index.ets b/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/DefaultTabBar/Index.ets index 502fe36702a764125751c5334582564cd1675040..b01d08b109af4a92acf997dde3d9c6e86704b627 100644 --- a/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/DefaultTabBar/Index.ets +++ b/AnimationDemos/entry/src/main/ets/pages/Component/Tabs/TabsBlur/DefaultTabBar/Index.ets @@ -1,3 +1,5 @@ +import { WindowUtils } from "../../../../../common/utils/windowutils/WindowUtils"; + @Builder export function TabsBlurBuilder() { TabsBlur(); @@ -9,6 +11,16 @@ struct TabsBlur { @State currentIndex: number = 0; private controller: TabsController = new TabsController(); private dataSource: number[] = new Array(8).fill(0) + @State tabBarHeight: number | undefined = 68 + @StorageProp('currentNavigationIndicator') @Watch('updateTabBarHeight') navigationIndicatorHeight: number = 0; + + updateTabBarHeight() { + if (this.navigationIndicatorHeight) { + this.tabBarHeight = 68 + } else { + this.tabBarHeight = undefined + } + } @Builder ListBuilder() { @@ -29,11 +41,14 @@ struct TabsBlur { @Builder TabBarBuilder(title: string, targetIndex: number) { - Stack() { - Text(title).fontColor(this.currentIndex === targetIndex ? Color.Black : Color.Gray) + Column() { // 非全屏情况下不需要这层Column容器 + Stack() { + Text(title).fontColor(this.currentIndex === targetIndex ? Color.Black : Color.Gray) + } + .height(56) } - .height(48) - } // 高度根据内容自适应，但是限定最小值56vp（即使内容高48vp） + .height(this.tabBarHeight) + } build() { NavDestination() { @@ -79,21 +94,31 @@ struct TabsBlur { .tabBar(this.TabBarBuilder('我的', 4)) } - // barHeight设置为auto，Tabbar内置column高度自适应内容，但是最小值是56vp。再加上导航条28vp，模糊区域高度至少84vp。 - // 如果觉得太高了，设置marginBottom负值 + + // 如果在非全屏情况下，再加上导航条28vp，模糊区域高度至少84vp。如果觉得太高了，设置marginBottom负值 // .margin({ bottom: -16 }) - .barHeight('auto') // barHeight不能设置具体的数值，否则底部导航条不会有模糊效果 + + // barHeight设置为auto，Tabbar内置column高度自适应内容，但是最小值是56vp。 + .barHeight('auto') .barOverlap(true) // 73版本后，barOverlap(true)相当于设置了BlurStyle.COMPONENT_THICK。所以想让目标模糊材质生效，barBackgroundBlurStyle需要写在barOverlap之后，以免被覆盖效果 - .barBackgroundBlurStyle(BlurStyle.COMPONENT_THIN) + .barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK) // 73版本后，如果目标效果是COMPONENT_THICK，这一行可以省略不写 .barBackgroundColor(Color.Transparent) .barMode(BarMode.Fixed) .onChange((index: number) => { this.currentIndex = index; }) } - // 扩展安全区 - .expandSafeArea([SafeAreaType.SYSTEM]) + + // 非全屏情况下，通过 expandSafeArea 扩展安全区 + // .expandSafeArea([SafeAreaType.SYSTEM]) } + .onReady(() => { + // 设置全屏 + WindowUtils.window.setWindowLayoutFullScreen(true) + }) + .onDisAppear(() => { + WindowUtils.window.setWindowLayoutFullScreen(false) + }) .backgroundColor('#FBFAFA') .hideTitleBar(true) }