鸿蒙开发中，List水平布局如何根据内容自适应高度？

Question

鸿蒙开发中，List水平布局如何根据内容自适应高度？

Answer 1

可以通过垂直 Scroll 组件嵌套水平 List 实现 List 自适应子节点高度。参考代码如下：

    @Entry
    @Component
    struct Index {
      build() {
        Column() {
          Flex() {
            // 嵌套 Scroll 组件使水平布局的 list 组件高度自适应内容
            Scroll() {
              List() {
                ListItem() {
                  Text('测试1')
                }
               .backgroundColor(Color.Red)
               .height(80)

                ListItem() {
                  Text('测试2')
                }
               .backgroundColor(Color.Gray)
               .height(80)

                ListItem() {
                  Text('测试3')
                }
               .backgroundColor(Color.Yellow)
               .height(80)

                ListItem() {
                  Text('测试4')
                }
               .backgroundColor(Color.White)
               .height(80)
              }
             .listDirection(Axis.Horizontal)
             .alignListItem(ListItemAlign.Center)
             .scroll
            }
          }
        }
      }
    }

另外，List 组件只能自动计算滚动方向的尺寸，滚动垂直方向需要手动计算，示例如下：

    @Entry
    @Component
    struct ListExample {
      private arr: number[] = [110, 121, 560, 300, 24, 75, 96, 37, 558, 309]
      private arr1: string[] = ['2222222', '2222222', '2222222', '2222222', '2222222222222222', '22222222222222', '22222222', '22222222222222222222222222', '2222222', '2222222']
      // 动态高度状态变量
      @State maxHeight: number = 0

      build() {
        Column() {
          List({ space: 20, initialIndex: 0 }) {
            ForEach(this.arr, (item: number,index:number) => {
              ListItem() {
                Text(this.arr1[index] + item)
                 .height(item)
                 .fontSize(16)
                 .textAlign(TextAlign.Center)
                 .backgroundColor(0xFFFFFF)
              }.onAppear(() =>{
                console.log('xxxx ' item)
                this.maxHeight = Math.max(item,this.maxHeight)
              })
            }, (item: string) => item)
          }
         .listDirection(Axis.Horizontal)
        }
      }
    }