HarmonyOS 一多适配相关问题？

Question

问题1：如图1，是一个无限长的列表，采用的是List组件，有高度不同的几种item。手机显示一列正常，平板显示3列出现了如图留白的问题，序号3、4无法上顶填满留白区域。有没有什么办法让3、4自动上顶？

问题2：如图2，采用的是栅格布局，红色区域高度比其他item的高度高，同样也造成了留白区域，有无办法让后面的黄色、粉红色等区域向上顶填满留白区域？

Answer 1

问题一：可以使用WaterFlow 瀑布流布局

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-waterflow-V5

问题二：利用媒体查询mediaquery实时获取设备大小：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-mediaquery-V5

例子如下：

BreakpointConstants.ets：

/**
 * Constants for breakpoint.
 */
export class BreakpointConstants {
  /**
   * Breakpoints that represent small device types.
   */
  static readonly BREAKPOINT_SM: string = 'sm';

  /**
   * Breakpoints that represent middle device types.
   */
  static readonly BREAKPOINT_MD: string = 'md';

  /**
   * Breakpoints that represent large device types.
   */
  static readonly BREAKPOINT_LG: string = 'lg';

  /**
   * Current breakpoints that to query the device types.
   */
  static readonly CURRENT_BREAKPOINT: string = 'currentBreakpoint';

  /**
   * Range of the small device width.
   */
  static readonly RANGE_SM: string = '(320vp<=width<520vp)';

  /**
   * Range of the middle device width.
   */
  static readonly RANGE_MD: string = '(520vp<=width<840vp)';

  /**
   * Range of the large device width.
   */
  static readonly RANGE_LG: string = '(840vp<=width)';
}

BreakpointSystem.ets：

import { mediaquery } from '@kit.ArkUI';
import { BreakpointConstants } from '../constants/BreakpointConstants';

declare interface BreakPointTypeOption<T> {
  sm: T
  md: T
  lg: T
}

export class BreakPointType<T> {
  options: BreakPointTypeOption<T>

  constructor(option: BreakPointTypeOption<T>) {
    this.options = option;
  }

  getValue(currentBreakPoint: string): T {
    if (this.options.sm !== undefined && currentBreakPoint === 'sm') {
      return this.options.sm as T;
    }
    if (this.options.md && currentBreakPoint === 'md') {
      return this.options.md as T;
    } else {
      return this.options.lg as T;
    }
  }
}

export class BreakpointSystem {
  private currentBreakpoint: string = '';
  private smListener?: mediaquery.MediaQueryListener;
  private mdListener?: mediaquery.MediaQueryListener;
  private lgListener?: mediaquery.MediaQueryListener;

  private updateCurrentBreakpoint(breakpoint: string) {
    if (this.currentBreakpoint !== breakpoint) {
      this.currentBreakpoint = breakpoint;
      AppStorage.set<string>(BreakpointConstants.CURRENT_BREAKPOINT, this.currentBreakpoint);
    }
  }

  private isBreakpointSM = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    if (mediaQueryResult.matches) {
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM);
    }
  }

  private isBreakpointMD = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    if (mediaQueryResult.matches) {
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD);
    }
  }

  private isBreakpointLG = (mediaQueryResult: mediaquery.MediaQueryResult) => {
    if (mediaQueryResult.matches) {
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG);
    }
  }

  public register() {
    this.smListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_SM);
    this.smListener.on('change', this.isBreakpointSM);
    this.mdListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_MD);
    this.mdListener.on('change', this.isBreakpointMD);
    this.lgListener = mediaquery.matchMediaSync(BreakpointConstants.RANGE_LG);
    this.lgListener.on('change', this.isBreakpointLG);
  }

  public unregister() {
    this.smListener?.off('change', this.isBreakpointSM);
    this.mdListener?.off('change', this.isBreakpointMD);
    this.lgListener?.off('change', this.isBreakpointLG);
  }
}

Index.page：

import { BreakpointSystem } from '../utils/BreakpointSystem';
import { BreakpointConstants } from '../constants/BreakpointConstants';

@Entry
@Component
struct Page8 {
  @StorageProp('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_SM;
  private breakpointSystem = new BreakpointSystem();

  aboutToAppear() {
    this.breakpointSystem.register();
  }

  aboutToDisappear() {
    this.breakpointSystem.unregister();
  }

  build() {
    Grid(){
      GridItem().rowStart(0).rowEnd(2)
        .columnStart(0).columnEnd(0)
        .backgroundColor(Color.Red)

      GridItem().rowStart(0).rowEnd(0)
        .columnStart(1).columnEnd(1)
        .backgroundColor(Color.Blue)

      GridItem().rowStart(0).rowEnd(0)
        .columnStart(2).columnEnd(2)
        .backgroundColor(Color.Brown)

      GridItem().rowStart(1).rowEnd(1)
        .columnStart(1).columnEnd(1)
        .backgroundColor(Color.Yellow)

      GridItem().rowStart(1).rowEnd(1)
        .columnStart(2).columnEnd(2)
        .backgroundColor(Color.Grey)

      GridItem().rowStart(2).rowEnd(2)
        .columnStart(1).columnEnd(1)
        .backgroundColor(Color.Orange)

      GridItem().rowStart(2).rowEnd(2)
        .columnStart(2).columnEnd(2)
        .backgroundColor(Color.Green)

      GridItem(){
        Text('改变的GridItem')
      }.rowStart(3).rowEnd(3)
        .columnStart(0).columnEnd(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? 0 : 1)
        .backgroundColor(Color.Pink)

      GridItem().rowStart(3).rowEnd(3)
        .columnStart(2).columnEnd(2)
        .backgroundColor(Color.Yellow)

      GridItem().rowStart(4).rowEnd(4)
        .columnStart(0).columnEnd(2)
        .backgroundColor(Color.Red)
    }
    .columnsGap(2)
    .rowsGap(2)
    .height(400)
    .columnsTemplate('1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
  }
}