HarmonyOS 水平方向List不设置高度时会充满屏幕,怎样实现wrap_content的效果呢?

水平方向List不设置高度时会充满屏幕,List的高度怎么不写成定值,实现wrap_content的效果呢?

@Entry  
@Component  
struct RowListPage {  
  build() {  
    Column() {  
      List() {  
        ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (index: number) => {  
          ListItem() {  
            Text(`tab_${index}`).padding({ left: 10, top: 8, right: 10, bottom: 8 })  
          }  
        })  
      }.listDirection(Axis.Horizontal)  
      .backgroundColor('#ff0000')  
      .margin({ top: 60 })  
  
      Stack() {  
        Text('内容')  
      }  
      .width('100%')  
  
    }.width('100%')  
    .height('100%')  
    .backgroundColor('#FF15B3B3')  
  
  }  
}
HarmonyOS
2024-09-26 10:58:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

外层套Scroll组件可以使横向滚动的list高度自适应,scroll高度无穷大,list组件不能继承scroll的高度无穷大,所以会根据子组件高度自适应,建议参考下列代码:

build() {  
  Column() {  
    Stack({ alignContent: Alignment.TopEnd }) {  
      Scroll() {  
        List({ space: 8, scroller: this.scroller }) {  
          ListItem() {  
            Row() {  
              Text('123')  
            }.backgroundColor(Color.Red).width('100%')  
  
          }.backgroundColor(Color.Red)  
        }.contentStartOffset(16)  
        .contentEndOffset(16)  
        .listDirection(Axis.Horizontal)  
      }  
    }.width('100%').margin(MTop).backgroundColor(Color.Blue)  
  }  
}
分享
微博
QQ
微信
回复
2024-09-26 16:09:12
相关问题
Panel不支持水平方向拖拉
602浏览 • 1回复 待解决
如何设置屏幕方向为横屏
1075浏览 • 1回复 待解决
HarmonyOS 如何设置屏幕亮度?
304浏览 • 1回复 待解决
http请求中能否设置Content-Type参数
1977浏览 • 1回复 待解决
获取当前设备屏幕方向
380浏览 • 1回复 待解决
怎样为TextArea组件设置最小高度
289浏览 • 1回复 待解决
window获取屏幕方向配置
313浏览 • 1回复 待解决
如何实现list折叠动画效果
399浏览 • 1回复 待解决
HarmonyOS 关于屏幕高度
38浏览 • 0回复 待解决
List组件initialIndex属性设置生效
2139浏览 • 1回复 待解决