【鸿蒙应用】List、ListItem和ListItemGroup组件

List组件是一个列表组件，包含一系列相同宽度的列表，适合连续、多行呈现同类数据的，比如图片。

ListItem组件是用来展示列表具体项的 item ；ListItemGroup组件是用来展示列表 item 分组的，这两个组件必须是配合 List 组件来使用。

比如：

interface ItemType {
  title: string;
  projects: string[]
}

@Entry
@Component
struct ToDoList {
  @State title: string = '';
  private timetableListItemGroup: ItemType[] = [
    {
      title: "星期一",
      projects: ["语文", "数学"]
    }, {
    title: "星期二",
    projects: ["语文", "数学"]
  }, {
    title: "星期三",
    projects: ["语文", "数学"]
  }, {
    title: "星期四",
    projects: ["语文", "数学"]
  }, {
    title: "星期五",
    projects: ["语文", "数学"]
  },
  ];

  onPageShow() {
    console.info('Index onPageShow');
  }

  onPageHide() {
    console.info('Index onPageHide');
  }

  onBackPress() {
    console.info('Index onBackPress');
    return true // 返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
  }

  aboutToAppear() {
    console.info('MyComponent aboutToAppear');
  }

  onDidBuild() {
    console.info('MyComponent onDidBuild');
  }

  aboutToDisappear() {
    console.info('MyComponent aboutToDisappear');
  }

  build() {
    Column() {
      List({ space: 2 }) {
        ForEach(this.timetableListItemGroup, (item: ItemType) => {
          ListItemGroup() {
            ForEach(item.projects, (project: string) => {
              ListItem() {
                Text(project)
                  .width("100%")
                  .height("30")
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
              }
            }, (item:string) => item)
          }
          .borderRadius(10)
          .divider({strokeWidth:1,color:0xDCDCDC})
          .margin({
            bottom:10
          })
          .border({width:1,color:"blue"})
        })
      }
    }
    .margin({
      left: 10,
      top: 10,
      right:10
    })
  }
}

组件效果如图：