HarmonyOS 鸿蒙Next UI刷新

可以参考如下demo:

// xxx.ets
[@Observed](/user/Observed)
class temp {
public title: string;
public projects: string[]

constructor(title: string, projects: string[]) {
this.title = title
this.projects = projects
}
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct ListItemGroupExample {
[@State](/user/State) timeTable: temp[] = [
new temp('星期一', ['语文', '数学', '英语']),
new temp('星期二', ['物理', '化学', '生物']),
new temp('星期三', ['历史', '地理', '政治']),
new temp('星期四', ['美术', '音乐', '体育']),
new temp('星期五', ['历史', '化学', '语文'])
]

[@Builder](/user/Builder)
itemHead(text: string) {
Text(text)
.fontSize(20)
.backgroundColor(0xAABBCC)
.width("100%")
.padding(10)
}

[@Builder](/user/Builder)
itemFoot(num: number) {
Text('共' + num + "节课")
.fontSize(16)
.backgroundColor(0xAABBCC)
.width("100%")
.padding(5)
}

build() {
Column() {
List({ space: 20 }) {
ForEach(this.timeTable, (item: temp) => {
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)
}
})
}
.divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
})

}
.width('90%')
.sticky(StickyStyle.Header | StickyStyle.Footer)
.scrollBar(BarState.Off)

Button("修改周三的课程").onClick((event: ClickEvent) => {
console.log(JSON.stringify(this.timeTable))
this.timeTable.splice(2,1)
this.timeTable.splice(2,0,new temp('星期三', ['化学', '化学', '化学']))
console.log(JSON.stringify(this.timeTable))
})
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}