鸿蒙开发组件之list

最新推荐文章于 2024-11-04 14:53:51 发布

Lu_Ca

最新推荐文章于 2024-11-04 14:53:51 发布

阅读量1.1k

点赞数 8

分类专栏：鸿蒙开发文章标签：鸿蒙

本文链接：https://blog.csdn.net/Lu_Ca/article/details/134906270

版权

1、鸿蒙中的list作为可滑动列表功能，初始化方式是

List({space: 10}){
    ForEach(arr, item => {
        ListItem() {
            //列表单个Item组件
        }
  })
    
}

其中，List中的space可以设置两个ListItem组件的间距

List中是一个ForEach，需要注意的是item要返回的是ListItem组件。

2、List滑动方向

List支持竖直方向与水平方向滚动，利用属性listDirection

.listDirection(Axis.Horizontal) //水平方向滚动的列表

.listDirection(Axis.Vertical) //竖直方向滚动的列表

3、layoutWeight实现滑动范围

如果页面的List上边有其他视图，那么滑动的时候会有部分不能滑动出来。可以利用layoutWeight属性。这个属性是用来设置比例的默认为0。如果其他的视图不设置，然后设置了List为1，那么就表示List是占用其他视图剩下的所有区域。

     List({space: 10}) {
       ForEach(
         this.items,
         (item: Item) => {
           ListItem() {
               Row({ space: 3 }) {
                 Image(item.image)
                   .width(this.imageWidth)
                   .height(80)
                   .padding({ left: 20 })