List及ListItem组件的使用

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

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

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

HarmonyOS

QW_MA

2024-05-26 12:01:24

浏览

回答 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

2024-05-27 15:55:58

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

List及ListItem组件的使用

订阅鸿蒙技术特刊，精选内容抢先看