实现课程安排模板鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例基于Tabs容器组件、Scroll组件、Grid组件实现了上课模块的排版、下半部分使用List组件实现了第一天、第二天的任务列表、班级群界面中使用List组件实现消息的通知。

实现课程安排模板源码链接

效果预览

使用说明

如果在运行该示例代码时，出现运行不了的情况，可尝试选择DevEco Studio菜单栏Build里面的Clean Project选项，来清理工程。

实现思路

1. 上课模块的排版

 // popup构造器定义弹框内容
@Builder popupBuilder() {
  Column() {
    ForEach(selectedList, (model: typeModel,index:number) => {
      ListItem() {
        TypeCell({ model:model,index:index,selectedBlock:(selectedIndex:number) => {
          console.log('selectedIndex = ' + selectedIndex)
          for (let i = 0; i < selectedList.length; i++) {
            let item = selectedList[i]
            item.isSelected = selectedIndex === i ? true : false
            if (selectedIndex === i) {
              this.type = item.type
              this.title = item.content
              this.study = item.study
            }
          }
          this.customPopup = false
        }})
      }
    })
  }
  .width('100%')
}

2. List组件实现了第一天、第二天的任务列表

 @Builder
  listBuilder(index:number) {
    List({scroller: this.scrollerForList }) {
      if (this.selectedIndex === 0) {
        ForEach(ItemList1, (model: itemModel,index:number) => {
          ListItem() {
            ListCell1({ model:model,type:1 })
          }
        }, (index: number) => JSON.stringify(index))
      }else if (this.selectedIndex === 1) {
        ForEach(ItemList2, (model: listModel,index:number) => {
          ListItem() {
            ListCell2({ model:model })
          }
        }, (index: number) => JSON.stringify(index))
      }else  {
        ForEach(ItemList3, (model: itemModel,index:number) => {
          ListItem() {
            ListCell1({ model:model,type:2  })
          }
        }, (index: number) => JSON.stringify(index))
      }
    }
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
    .edgeEffect(EdgeEffect.None)
    .friction(0.6)
    .height('calc(100% - 50vp)') // 滚动到scroll area还剩50时 就定格了
    .backgroundColor('#f5f5f5')
  }