HarmonyOS 鸿蒙Next 自定义组件-FlowLayout

随着子组件内容宽度增加自动折行

@Component
export  struct FlowLayout {
  // 间距
  @State spacing:number = 0
  @Builder
  doNothingBuilder() {

  };

  @BuilderParam builder: () => void = this.doNothingBuilder;
  sizeResult: SizeResult = {
    width: 0,
    height: 0
  }

  build() {
    this.builder()
  }

  onMeasureSize(selfLayoutInfo: GeometryInfo, children: Measurable[], constraint: ConstraintSizeOptions): SizeResult {
    for (let index = 0; index < children.length; index++) {
      children[index].measure({
        minWidth: constraint.minWidth,
        minHeight: constraint.minHeight,
        maxWidth: constraint.maxWidth,
        maxHeight: constraint.maxHeight
      })
    }
    return this.sizeResult = {
      width: selfLayoutInfo.width,
      height: selfLayoutInfo.height
    }
  }

  onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Layoutable[], constraint: ConstraintSizeOptions): void {
    let pos = 0
    let y = children[0].measureResult.height
    for (let i = 0; i < children.length; i++) {
      if (pos > this.sizeResult.width - children[i].measureResult.width) {
        pos = 0
        y = y + children[i].measureResult.height + this.spacing
        children[i].layout({ x: pos, y })
      } else {
        children[i].layout({ x: pos, y })
      }
      pos = pos + this.spacing + children[i].measureResult.width
    }
  }
}