目录

应用在平板设备竖屏时，界面下方有留白且文字溢出界面

问题现象

平板竖屏状态打开应用，界面下方大面积留白，应用内容未铺满界面，同时文字显示有溢出界面，显示不全的问题。

背景知识

on('windowSizeChange')方法实现对窗口尺寸大小变化的监听，再根据窗口的尺寸变化，更新调整自身应用布局以实现适配。
Scroll是可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。因此在页面局部展示区域固定的情况下，可以使用Scroll组件来显示超过Scroll尺寸的子组件内容。

问题定位

应用中搜索windowSizeChange查看应用是否开启窗口尺寸变化的监听。

排查相关页面的代码，水平方向组件的宽度之和是否超出平板竖屏时的屏幕宽度，示例如下：

let displayClass: display.Display | null = null;
displayClass = display.getDefaultDisplaySync();
// 例如此页面的总宽度就是3个Row的宽度和，100vp+200vp+100vp=400vp
build() {
  Column(){
    Row(){
      Row()
        .width('100vp')
      Row()
        .width('200vp')
      Row()
        .width('100vp')
    }
    Text(this.message)
      .backgroundColor(Color.Gray)
      .height('200vp')
    Column(){
    }
    .backgroundColor(Color.Green)
    .height('500vp')
  }
}

分析结论

未监听'windowSizeChange'事件，并且动态调整布局，导致竖屏时应用页面下方留白，未铺满整个页面。
页面上组件水平方向的总宽度超过了屏幕宽度，导致水平方向页面显示不全，文字溢出了界面。

修改建议

通过监听'windowSizeChange'事件，获取窗口尺寸变化，动态调整页面布局，避免出现大面积留白。

windowStage.getMainWindow().then((windowClass) => {
  AppStorage.setOrCreate('winWidth', windowClass.getWindowProperties().windowRect.width);
  AppStorage.setOrCreate('winHeight', windowClass.getWindowProperties().windowRect.height);
  windowClass.on('windowSizeChange', (windowSize) => {
    AppStorage.setOrCreate('winWidth', windowSize.width);
    AppStorage.setOrCreate('winHeight', windowSize.height);
  });
});

在页面组件总宽度超过屏幕的总宽度时，可以在部分组件外包一层Scroll组件，通过滚动的方式在有限的区域显示更多的内容，避免出现文字溢出界面的问题。

@Entry
@Component
struct Index {
  @StorageLink('winWidth') winWidth: number = 1080;
  @StorageLink('winHeight') winHeight: number = 1960;

  aboutToAppear() {
    console.info(`Current window size. width: ${this.winWidth}, height: ${this.winHeight}`);
  }

  build() {
    Row() {
      // 此处无论Scroll子组件Text的宽度有多宽，均可通过横向滑动展示
      Scroll() {
        Row() {
          Text('hello')
            .width('150vp')
            .fontSize(50);
          Text('world')
            .width('300vp')
            .fontSize(50);
          Text('你好')
            .width('500vp')
            .fontSize(50);
          Text('世界')
            .width('1000vp')
            .fontSize(50);
        }
        .margin({ bottom: 8 });
      }
      // 设置滚动方向为水平方向
      .scrollable(ScrollDirection.Horizontal);
    }
    .size({
      width: this.getUIContext().px2vp(this.winWidth),
      height: this.getUIContext().px2vp(this.winHeight)
    });
  }
}