目录

弹窗页面文本重叠

问题现象

进入应用后，弹窗页面内文本有重叠。问题效果图：

背景知识

问题定位

  1. 检查是否有对不同的窗口尺寸设置断点。
  2. 排查文本是否设置了组件换行、宽高、裁剪显示等属性，避免互相影响。

分析结论

应用没有针对窗口尺寸设置断点，且由于Text组件设置了固定的lineHeight，在窗口尺寸和字体大小发生变化时，超出lineHeight高度，导致文本重叠。

修改建议

  1. 通过工具类BreakpointType为属性赋值。
  2. 根据窗口尺寸大小，设置不同的lineHeight。
    export class BreakpointType<T> {
  sm: T;
  md: T;
  lg: T;

  constructor(sm: T, md: T, lg: T) {
    this.sm = sm;
    this.md = md;
    this.lg = lg;
  }

  getValue(currentHeightBreakpoint: HeightBreakpoint): T {
    if (currentHeightBreakpoint === HeightBreakpoint.HEIGHT_LG) {
      return this.lg;
    } else if (currentHeightBreakpoint === HeightBreakpoint.HEIGHT_MD) {
      return this.md;
    } else {
      return this.sm;
    }
  }
}

@CustomDialog
@Component
struct CustomDialogExample {
  controller?: CustomDialogController;
  breakpoint: BreakpointType<number> = new BreakpointType(28, 36, 36);
  @Prop currentWidthBreakpoint: HeightBreakpoint;

  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column }) {
        Text() {
          Span('Customer Dialog Content. \n');
          Span('Customer Dialog Content. Customer Dialog Content. \n');
          Span('Customer Dialog Content. Customer Dialog Content. Customer Dialog Content. ');
        }
        .textAlign(TextAlign.Center)
        .fontSize('25fp')
        .lineHeight(this.breakpoint.getValue(this.currentWidthBreakpoint))
        .margin(24);
      };
    }
    .height('40%');
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State currentHeightBreakpoint: HeightBreakpoint = this.getUIContext().getWindowHeightBreakpoint();
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({ currentWidthBreakpoint: this.currentHeightBreakpoint }),
    cancel: this.exitApp,
    autoCancel: true,
    onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
      console.info('reason=' + JSON.stringify(dismissDialogAction.reason));
      console.log('dialog onWillDismiss');
      if (dismissDialogAction.reason === DismissReason.PRESS_BACK) {
        dismissDialogAction.dismiss();
      }
      if (dismissDialogAction.reason === DismissReason.TOUCH_OUTSIDE) {
        dismissDialogAction.dismiss();
      }
    },
    alignment: DialogAlignment.Center,
    gridCount: 4,
    customStyle: false,
    cornerRadius: 10
  });

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null; // 将dialogController置空
  }

  exitApp() {
    console.info('Click the callback in the blank area');
  }

  aboutToAppear(): void {
    this.dialogController?.open();
  }

  build() {
  }
}