List水平布局如何根据内容自适应高度

List组件中ListItem水平布局,list高度不会根据内容自适应。

HarmonyOS
2024-07-22 12:06:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

通过垂直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) 
          .scrollBar(BarState.Off) 
          .backgroundColor(Color.Blue) 
        } 
      } 
      .backgroundColor(Color.Green) 
      .width('100%') 
      .height('200') 
    } 
 
  } 
}
分享
微博
QQ
微信
回复
2024-07-22 19:53:09