列表页构建（标题加图标）

列表页构建（文字加图标）

List组件实现效果如下图所示：

---

具体步骤

首先构建整个 List中的每一条 Listitem，我们的计划是 List中的每一条 Listitem由文字 Text和图标 Image组成，其中文字 Text由一个标题+一个日期组成。

因为文字 Text由一个标题+一个日期组成，所以也要填充 Text文本所需要的内容，这里是构建了一个标题+一个日期，通过构造 class来定义标题和日期这两个属性。

export default class New {
  title: string
  time: string

  constructor(title: string, time: string) {
    this.title = title
    this.time = time
  }
}

通过名为 list的数组属性来导入所需的文本，该数组用于存储 New类型的元素。

export default struct NewList {

  @State list:Array<New>=new Array

  aboutToAppear(){
    this.list.push(new New("这是标题1","07/12"))
    this.list.push(new New("这是标题2","07/19"))
    this.list.push(new New("这是标题3","07/20"))
    this.list.push(new New("这是标题4","07/21"))
    this.list.push(new New("这是标题5","07/22"))
    this.list.push(new New("这是标题6","07/23"))
  }

最后构建整体，用 ForEach来实现对每一条的构建。

  build() {
    Column() {
      List() {
        ForEach(this.list, (item: New) => {
          ListItem() {
            Row() {
              Column() {
                Text(item.title)
                  .fontSize(21)
                  .textAlign(TextAlign.Start)
                Text("  日期：" + item.time)
                  .fontSize(12)
              }
              .width('80%')
              Image($r('app.media.startIcon'))
                .width(40)
                .height(40)
                .margin(10)
            }
            .height(60)
          }
        })
      }
    }
    .width('100%')
    .height('100%')
  }