在HarmonyOS NEXT开发中auto失效？

Question

在HarmonyOS NEXT开发中auto失效？问题描述：

List({ space: 10 }) { 
  ForEach(this.bookDetailsBean?.firstSubject?.split("\\/"), (item: string, index) => { 
    ListItem() { 
      Text(item) 
        .fontSize(14) 
        .fontColor("#8E8E93") 
        .fontWeight(FontWeight.Bold) 
        .backgroundColor("#f1f1f1") 
        .borderRadius(14) 
        .width('auto') 
        .padding({ 
          top: 2, 
          bottom: 2, 
          left: 4, 
          right: 4 
        }) 
    } 
  }, (index: number) => index + "") 
}.id('_firstSubject').listDirection(Axis.Horizontal).alignRules({ 
  left: { anchor: 'tv_book_name', align: HorizontalAlign.Start }, 
  top: { anchor: 'tv_book_name', align: VerticalAlign.Bottom } 
}).margin({ top: 15 })

发现只要这个list不设置固定的高度，list高度不会自适应Listitem的高度Harmonyos的’auto’这个属性是不是没有用？

Answer 1

若想要父组件跟随子组件的宽高进行自适应，需要在父组件上设置宽高为“auto”当前list横向滚动是无法自适应子组件高度
可参考如下demo：

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      // 外层套Scroll组件可以使横向滚动的list高度自适应，scroll高度无穷大，list组件不能继承scroll的高度无穷大，所以会根据子组件高度自适应 // 
      Scroll() { 
        List() { 
          ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (index: number) => { 
            ListItem() { 
              Text(`tab_${index}`).height(300) 
                .padding({ 
                  left: 10, 
                  top: 8, 
                  right: 10, 
                  bottom: 8 
                }) 
            } 
          }) 
        } 
        .listDirection(Axis.Horizontal) 
        .backgroundColor('#ff0000') 
        .margin({ top: 60 }) 
      } 
 
    }.width('100%') 
    .height('100%').backgroundColor('#FF15B3B3') 
  } 
}