文档管理中心
您当前正在浏览新版开发者文档中心,目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标,可切换文档分类。 了解新版目录
问题处理与运维开发与测试问题应用框架开发UI框架窗口管理如何在分屏下自动适应是否滑动

如何在分屏下自动适应是否滑动

问题现象

未分屏时内容可完全展示,分屏后需要滚动页面才能浏览全部内容,如何在未分屏时不赋予滑动能力,分屏时赋予滑动能力?

效果预览

背景知识

分屏触发后可以让应用只占据一部分屏幕。

解决方案

可以给容器组件设置为固定高度而非百分比高度,当设置的固定高度在窗口中可以完全展示时,不具备滑动能力,反之则具备滑动能力。

以下示例将可用区域高度(屏幕高度-状态栏高度-导航条高度)作为Scroll的高度,并均分给每个Item,使得未分屏时Scroll不可滑动,分屏后可滑动。

在EntryAbility的onWindowStageCreate方法中获取屏幕高度,状态栏高度和导航条高度:

收起
自动换行
深色代码主题
复制
  1. import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
  2. import { hilog } from '@kit.PerformanceAnalysisKit';
  3. import { window } from '@kit.ArkUI';
  4. import display from '@ohos.display';
  5. const DOMAIN = 0x0000;
  6. export default class EntryAbility extends UIAbility {
  7. onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  8. console.info(`want: ${want}`);
  9. console.info(`launchParam: ${launchParam}`);
  10. try {
  11. this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
  12. } catch (err) {
  13. hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
  14. }
  15. hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  16. }
  17. onDestroy(): void {
  18. hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
  19. }
  20. onWindowStageCreate(windowStage: window.WindowStage): void {
  21. let windowClass: window.Window = windowStage.getMainWindowSync();
  22. let topType = window.AvoidAreaType.TYPE_SYSTEM;
  23. let bottomType = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;
  24. let statusBarArea = windowClass.getWindowAvoidArea(topType);
  25. let bottomNavArea = windowClass.getWindowAvoidArea(bottomType);
  26. let statusBarHeight = statusBarArea.topRect.height;
  27. let bottomBarHeight = bottomNavArea.bottomRect.height;
  28. let promise: Promise<Array<display.Display>> = display.getAllDisplays();
  29. promise.then((data: Array<display.Display>) => {
  30. let screenHeight: number = data[0].height;
  31. let contentHeight: number = screenHeight - statusBarHeight - bottomBarHeight;
  32. AppStorage.setOrCreate('contentHeight', contentHeight);
  33. console.info(`Succeeded in obtaining all the display objects. Data: ${JSON.stringify(data)}`);
  34. });
  35. // Main window is created, set main page for this ability
  36. hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  37. windowStage.loadContent('pages/Index', (err) => {
  38. if (err.code) {
  39. hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
  40. return;
  41. }
  42. hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
  43. });
  44. }
  45. onWindowStageDestroy(): void {
  46. // Main window is destroyed, release UI related resources
  47. hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  48. }
  49. onForeground(): void {
  50. // Ability has brought to foreground
  51. hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
  52. }
  53. onBackground(): void {
  54. // Ability has back to background
  55. hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
  56. }
  57. };

页面部分:

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct AdaptiveScroll {
  4. scroller: Scroller = new Scroller();
  5. private arr: number[] = [0, 1, 2, 3, 4];
  6. contentHeight: number = this.getUIContext().px2vp(AppStorage.get('contentHeight') as number);
  7. build() {
  8. Scroll(this.scroller) {
  9. Column() {
  10. ForEach(this.arr, (item: number) => {
  11. Column() {
  12. Text(item.toString())
  13. .width('90%')
  14. .height((this.contentHeight / this.arr.length) - 10)
  15. .backgroundColor('#F1F3F5')
  16. .borderRadius(16)
  17. .fontSize(16)
  18. .textAlign(TextAlign.Center);
  19. Blank(10);
  20. };
  21. }, (item: number) => item.toString());
  22. }.width('100%').height(this.contentHeight);
  23. };
  24. }
  25. }