目录

平板端页面背景与字体颜色对比度不足

问题现象

当应用在直板手机查看时，背景大小显示正常；在平板查看时，背景大小显示异常，且与字体和组件重叠。

手机查看图与平板查看图：

背景知识

问题定位

  1. 通过DevEco Testing查看页面结构，确认页面是否有使用Stack容器，图片是否为Image组件。
  2. 选择页面容器，确认backgroundImage是否有配置资源。
  3. 模拟页面结构编写demo，未针对页面尺寸大小进行监听并调整页面结构和组件尺寸，复现问题。

分析结论

由于页面容器设置backgroundImage背景图片，且未根据页面尺寸大小调整页面结构，导致背景图片随窗口大小铺满，与组件出现重叠。

修改建议

通过设置backgroundImageSize属性，限制背景图片尺寸，避免因页面尺寸变化导致背景图片显示异常。若不同的页面尺寸需要显示不同尺寸的背景图片，可以配合断点进行设置。

示例代码如下：

@Entry
@Component
struct ImageStretch {
  bgImage: Resource = $r('app.media.backgroundcolorgray'); // 背景图更换为实际图片

  build() {
    Scroll() {
      Column() {
        Column() {
          TextInput({ placeholder: 'Account' })
            .width('95%')
            .borderColor(Color.Gray)
            .borderWidth(0.5)
            .backgroundColor(Color.White)
            .margin({ bottom: 10 });

          TextInput({ placeholder: 'Password' })
            .width('95%')
            .borderColor(Color.Gray)
            .borderWidth(0.5)
            .backgroundColor(Color.White);
        }
        .height('60%')
        .justifyContent(FlexAlign.End)
        .margin({ bottom: 20 });

        Button('Login')
          .type(ButtonType.Capsule)
          .width('60%');
      }
      .height('100%')
      .justifyContent(FlexAlign.Start);
    }
    .height('100%')
    .width('100%')
    .backgroundImage(this.bgImage)
    // 设置backgroundImageSize属性，限制背景图片尺寸
    .backgroundImageSize({ height: 258, width: '100%' })
    .expandSafeArea([SafeAreaType.SYSTEM]);
  }
}