List组件的页面复写了onMeasure/onLayout生命周期，为什么数据列表不可见？

Question

问题描述

List组件的页面复写了onMeasure/onLayout生命周期，数据列表不可见复现demo:

@Entry 
@Component 
struct MainPage { 
  public arr: Array<string> = ['1', '2', '3'] 
 
  build() { 
    Row() { 
      Column() { 
        Stack() { 
          List({ space: 40 }) { 
            ForEach( 
              this.arr, 
              (item: string, index) => { 
                ListItem() { 
                  Text(item).width('100%').height(150).textAlign(TextAlign.Center).onClick(() => { 
                    console.log('点击') 
                  }) 
                }.margin(20).backgroundColor(Color.White) 
              }) 
          } 
        }.width('100%').height('100%').backgroundColor(Color.Gray) 
 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
 
  onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void { 
    console.log('cwq onMeasure') 
  } 
 
  onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void { 
    console.log('cwq onLayout') 
  } 
}

Answer 1

解决措施

调用onMeasure和onLayout相当于自己给组件设置大小和布局，不设置的话就不会渲染。

示例代码

onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) { 
  let pos = 0; 
  children.forEach((child) => { 
    child.layout({ position: { x: pos, y: pos }, constraint: constraint }) 
    pos += 100; 
  }) 
}