List及ListItem组件的使用

在我们常用的手机应用中,经常会见到一些数据列表,如设置页面、通讯录、商品列表等。下图中两个页面都包含列表,“首页”页面中包含两个网格布局,“商城”页面中包含一个商品列表。

List及ListItem组件的使用-鸿蒙开发者社区

透过上面的现象,我们其实可以把以上抽象为两类列表,一个是网格列表(Grid),一个是线性列表(List),具体抽象出来的图像如下图。(我们今天主要讲list)

HarmonyOS
2024-05-26 12:01:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
OwenOO

使用的核心API

List

ListItem

核心代码解释

list中接口全都是可选参数类型,space → 设置主轴ListItem之间的间隔距离(常用);

initialIndex → 默认值为 0 ,设置 List 第一次加载数据时所要显示的第一个子组件的下标,如果超过最后一个子组件的下标,则设置不生效。

scroller → 可滚动组件的控制器。用于与可滚动组件进行绑定

@Entry 
@Component 
struct ListTest { 
  private arr: string[] = ['华为', '小米', '苹果', '红米', '三星', '1', '2', '3', '5', '7'] 
 
  build() { 
    Column() { 
      List({ space: 30 }) { 
        ForEach(this.arr, (item: number) => { 
          ListItem() { 
            Text(`${item}`) 
              .width('100%') 
              .height(100) 
              .fontSize(20) 
              .fontColor(Color.White) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0x007DFF) 
          } 
        }, (item: string) => item) 
      } 
 
      // .listDirection(Axis.Horizontal)  水平 
      // .listDirection(Axis.Vertical)    (默认) 
 
      // .edgeEffect(EdgeEffect.Spring)   弹性物理动效 
      // .edgeEffect(EdgeEffect.None)     无 
      // .edgeEffect(EdgeEffect.Fade)     渐退效果 
 
      // .divider({ 
      //   strokeWidth:1, 
      //   color:Color.Pink, 
      //   startMargin:12, 
      //   endMargin:12 
      // }) 
 
    } 
    .padding(12) 
    .height('100%') 
    .backgroundColor(0xF1F3F5) 
  } 
}

List事件介绍

  • onScroll:列表滑动时触发,返回值scrollOffset为滑动偏移量,scrollState为当前滑动状态。
  • onScrollIndex:列表滑动时触发,返回值分别为滑动起始位置索引值与滑动结束位置索引值。
  • onReachStart:列表到达起始位置时触发。
  • onReachEnd:列表到底末尾位置时触发。
  • onScrollStop:列表滑动停止时触发。
@Entry 
@Component 
struct TestList2 { 
  private arr: string[] = ['华为', '小米', '苹果', '红米', '三星', '1', '2', '3', '5', '6'] 
 
  build() { 
    Column() { 
      List({ space: 20, initialIndex: -1 }) { 
        ForEach(this.arr, (item: number) => { 
          ListItem() { 
            Text(`${item}`) 
              .width('100%') 
              .height(100) 
              .fontSize(20) 
              .fontColor(Color.White) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0x007DFF) 
          } 
        }, (item: string) => item) 
      } 
      .onScrollIndex((firstIndex: number, lastIndex: number) => { 
        console.info('onScrollIndex' + 'first' + firstIndex) 
        console.info('onScrollIndex' + 'last' + lastIndex) 
      }) 
      // .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
      //   console.info('onScroll'+'scrollOffset' + scrollOffset) 
      //   console.info('onScroll'+'scrollState' + scrollState) 
      // }) 
      .onReachStart(() => { 
        console.info('滚动到顶部触发该回调onReachStart') 
      }) 
      .onReachEnd(() => { 
        console.info('滚动到底部触发该回调onReachEnd') 
      }) 
      .onScrollStop(() => { 
        console.info('列表滑动停止时触发onScrollStop') 
      }) 
      .edgeEffect(EdgeEffect.None) 
    } 
    .padding(12) 
    .height('100%') 
    .backgroundColor(0xF1F3F5) 
  } 
}

ListItem 用来展示 List 的具体 item,它的宽度默认充满 List 的宽度,它必须配合 List 使用才有效果

@Entry 
@Component 
struct ListItemGroupExample { 
  private timetable: TimeTable[] = [ 
    { 
      title: '星期一', 
      projects: ['语文', '数学', '英语'] 
    }, 
    { 
      title: '星期二', 
      projects: ['物理', '化学', '生物'] 
    }, 
    { 
      title: '星期三', 
      projects: ['历史', '地理', '政治'] 
    }, 
    { 
      title: '星期四', 
      projects: ['美术', '音乐', '体育'] 
    } 
  ] 
 
  @Builder 
  itemHead(text: string) { 
    Text(text) 
      .fontSize(20) 
      .backgroundColor(0xAABBCC) 
      .width("100%") 
      .padding(10) 
  } 
 
  @Builder 
  itemFoot(num: number) { 
    Text('共' + num + "节课") 
      .fontSize(16) 
      .backgroundColor(0xAABBCC) 
      .width("100%") 
      .padding(5) 
  } 
 
  build() { 
    Column() { 
      List({ space: 20 }) { 
        ForEach(this.timetable, (item: TimeTable) => { 
          ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) { 
            ForEach(item.projects, (project: string) => { 
              ListItem() { 
                Text(project) 
                  .width("100%") 
                  .height(100) 
                  .fontSize(20) 
                  .textAlign(TextAlign.Center) 
                  .backgroundColor(0xFFFFFF) 
              } 
            }, (item: string) => item) 
          } 
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线 
        }) 
      } 
      .width('90%') 
      .sticky(StickyStyle.Header | StickyStyle.Footer) 
      .scrollBar(BarState.On) 
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 
  } 
} 
 
interface TimeTable { 
  title: string; 
  projects: string[]; 
}

实现效果

 注明适配的版本信息

·  IDE:DevEco Studio 4.0.3.600

·  SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 15:55:58
相关问题
ListItem 组件渲染错误空白内容
387浏览 • 1回复 待解决
grid组件数据懒加载
453浏览 • 1回复 待解决
js如何把list组件设置为横向
2540浏览 • 1回复 待解决
List组件initialIndex属性设置不生效
698浏览 • 1回复 待解决
如何监听List组件总滑动距离
749浏览 • 1回复 待解决
list组件无法滚动到底部
435浏览 • 1回复 待解决
List组件如何设置两端渐变效果
798浏览 • 1回复 待解决
List组件如何设置多列
991浏览 • 1回复 待解决
List组件如何实现多列效果
735浏览 • 1回复 待解决
如何获取List组件滚动条滚动距离
976浏览 • 1回复 待解决
使用List嵌套实现表格布局
456浏览 • 1回复 待解决
List组件性能问题,有人知道吗?
717浏览 • 1回复 待解决
woekertaskpool简单实现
345浏览 • 1回复 待解决