使用onPlaceChildren 设置子元素定位布局问题？

Question

使用onPlaceChildren 设置子元素定位布局问题

Answer 1

interface ItemData {
  text: string
  color?: Color
  type: string，
  width?: string
  children?: ItemData[]
}

@Component
export struct ListView {
  @State list: ItemData[] = [];
  result: SizeResult = {
    width: 0，
    height: 0
  };

  onMeasureSize(selfLayoutInfo: GeometryInfo， children: Array<Measurable>， constraint: ConstraintSizeOptions) {
    let size = 100;
    children.forEach((child) => {
      let result: MeasureResult = child.measure({ minHeight: size， minWidth: size， maxWidth: size， maxHeight: size })
      // size += result.width / 2;
    })
    this.result.width = 350;
    this.result.height = 100;
    return this.result;
  }

  // 设置子元素绝对定位
  onPlaceChildren(selfLayoutInfo: GeometryInfo， children: Array<Layoutable>， constraint: ConstraintSizeOptions) {
    children.forEach((child， index) => {
      let x =0， y =0;
      if(index === 0) { // 水平居左，垂直局中
        y = (selfLayoutInfo.height - child.measureResult.height) / 2;
     
      } else if(index === 1) { // 水平、垂直局中
        x = (selfLayoutInfo.width - child.measureResult.width) / 2;
        y = (selfLayoutInfo.height - child.measureResult.height) / 2;
        console.log('xxxxx child.measureResult.width width='+child.measureResult.width);
        console.log('xxxxx selfLayoutInfo.width='+selfLayoutInfo.width);
        console.log('xxxxx selfLayoutInfo.height='+selfLayoutInfo.height);
        console.log('xxxxx index=1 x='+x);
        console.log('xxxxx index=1 y='+y);
      } else if(index === 2) { // 水平居右，垂直局中
        x = selfLayoutInfo.width - child.measureResult.width;
        y = (selfLayoutInfo.height - child.measureResult.height) / 2;
        console.log('xxxxx child.measureResult.width width='+child.measureResult.width);
        console.log('xxxxx selfLayoutInfo.width='+selfLayoutInfo.width);
        console.log('xxxxx index=2 x='+x);
        console.log('xxxxx index=2 y='+y);
      }

      child.layout({ x: x， y: y })
    })
  }

  aboutToAppear() {
    // console.log('layoutHeight==='， layoutHeight)
  }

  build() {
    // Row(){
    if(this.list.length) {
      ForEach(this.list， (item: ItemData) => {
        if(item.type === 'text') {
          Text(item.text)
        } else if(item.type === 'flex') {
          Flex() {
            ListView({
              list: item?.children
            })
          }
          .width(item.width || 'auto')
          .height('100')
          .borderWidth(1)
        }
      })
    }
    // }
  }
}

@Entry
@Component
struct Demo {
  @State message: string = 'Hello World';
  @State list: ItemData[] = [
    {
      text: '1'， color: Color.Red， type: 'flex'， width: '100%'，
      children: [
        {
          text: '1-0'， color: Color.Red， type: 'flex'， width: '100'，
          children: [
            {text: '1-0-text'， color: Color.Gray，type: 'text'}
          ]
        }，
        {
          text: '1-1'， color: Color.Red， type: 'flex'， width: '100'，
          children: [
            {text: '1-1-text'， color: Color.Gray，type: 'text'}
          ]
        }，
        {
          text: '1-2'， color: Color.Red， type: 'flex'， width: '100'，
          children: [
            {text: '1-2-text'， color: Color.Gray，type: 'text'}
          ]
        }
      ]
    }
  ]

  build() {
    List(){
      ListItem() {
        Flex({
          direction: FlexDirection.Row，
        }) {
          ListView({
            list: this.list
          })
        }
        .height('200')
        .width('100%')
        .borderWidth(1)
        .padding(5)

      }
    }

  }
}