【安卓开发学习鸿蒙8】如何实现分组列表的吸顶/吸底效果

最新推荐文章于 2026-06-24 10:45:09 发布

原创最新推荐文章于 2026-06-24 10:45:09 发布 · 143 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#鸿蒙系统 #前端 #javascript

// xxx.ets 
@Entry 
@Component 
struct ListItemGroupExample { 
  private timeTable: TimeTable[] = [ 
    { 
      title: '星期一', 
      projects: ['语文', '数学', '英语'] 
    }, 
    { 
      title: '星期二', 
      projects: ['物理', '化学', '生物'] 
    }, 
    { 
      title: '星期三', 
      projects: ['历史', '地理', '政治'] 
    }, 
    { 
      title: '星期四', 
      projects: ['美术', '音乐', '体育'] 
    } 
  ] 
 
  @Builder 
  itemHead(text: string) { 
    Text(text) 
      .fontSize(20) 
      .backgroundColor(0xAABBCC) 
      .width("100%") 
      .padding(10) 
  } 
 
  @Builder 
  itemFoot(num: number) { 
    Text('共' + num + "节课") 
      .fontSize(16) 
      .backgroundColor(0xAABBCC) 
      .width("100%") 
      .padding(5) 
  } 
 
  build() { 
    Column() { 
      List({ space: 20 }) { 
        ForEach(this.timeTable, (item: TimeTable) => { 
          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) 
              } 
            }, (item: string) => item) 
          } 
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线 
        }) 
      } 
      .width('90%') 
      .sticky(StickyStyle.Header | StickyStyle.Footer) 
      .scrollBar(BarState.Off) 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  } 
} 
 
interface TimeTable { 
  title: string; 
  projects: string[]; 
}