List及ListItem组件的使用

@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) 
  } 
}

@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) 
  } 
}

@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[]; 
}