【鸿蒙应用】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})}
}

组件效果如图：