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

#### 问题现象

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

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/44/v3/7Y8PphZNQF271KoXb7U2BQ/zh-cn_image_0000002658920919.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134010Z&HW-CC-Expire=86400&HW-CC-Sign=75C390D1A4EC222B20A6EBC77E54914D8700A25D4B66AD60C569EB03E2A52695 "点击放大")

#### 背景知识

[分屏](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/multi-window-intro#section656119159451)触发后可以让应用只占据一部分屏幕。

#### 解决方案

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

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

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

import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import display from '@ohos.display';

const DOMAIN \= 0x0000;

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    console.info(\`want: ${want}\`);
    console.info(\`launchParam: ${launchParam}\`);
    try {
      this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR\_MODE\_NOT\_SET);
    } catch (err) {
      hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
    }
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    let windowClass: window.Window \= windowStage.getMainWindowSync();
    let topType \= window.AvoidAreaType.TYPE\_SYSTEM;
    let bottomType \= window.AvoidAreaType.TYPE\_NAVIGATION\_INDICATOR;
    let statusBarArea \= windowClass.getWindowAvoidArea(topType);
    let bottomNavArea \= windowClass.getWindowAvoidArea(bottomType);
    let statusBarHeight \= statusBarArea.topRect.height;
    let bottomBarHeight \= bottomNavArea.bottomRect.height;
    let promise: Promise<Array<display.Display\>\> = display.getAllDisplays();
    promise.then((data: Array<display.Display\>) \=\> {
      let screenHeight: number \= data\[0\].height;
      let contentHeight: number \= screenHeight \- statusBarHeight \- bottomBarHeight;
      AppStorage.setOrCreate('contentHeight', contentHeight);
      console.info(\`Succeeded in obtaining all the display objects. Data:  ${JSON.stringify(data)}\`);
    });
   _ // Main window is created, set main page for this ability_
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) \=\> {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
   _ // Main window is destroyed, release UI related resources_
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
   _ // Ability has brought to foreground_
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
  _  // Ability has back to background_
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
  }
};

页面部分：

@Entry
@Component
struct AdaptiveScroll {
  scroller: Scroller \= new Scroller();
  private arr: number\[\] \= \[0, 1, 2, 3, 4\];
  contentHeight: number \= this.getUIContext().px2vp(AppStorage.get('contentHeight') as number);

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item: number) \=\> {
          Column() {
            Text(item.toString())
              .width('90%')
              .height((this.contentHeight / this.arr.length) \- 10)
              .backgroundColor('#F1F3F5')
              .borderRadius(16)
              .fontSize(16)
              .textAlign(TextAlign.Center);
            Blank(10);
          };
        }, (item: number) \=\> item.toString());
      }.width('100%').height(this.contentHeight);
    };
  }
}