如何实现分组列表的吸顶/吸底效果

如何实现分组列表的吸顶/吸底效果

HarmonyOS
2024-03-17 14:41:42
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
yu_qingbo

可通过List组件的sticky属性配合ListItemGroup组件来实现。通过给List组件设置sticky属性为StickyStyle.Header/StickyStyle.Footer。可参考如下代码:

// 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[]; 
}

效果如图所示:

分享
微博
QQ
微信
回复
2024-03-18 20:25:41
相关问题
如何实现列表单选效果
471浏览 • 0回复 待解决
如何设置分组列表圆角和间距
193浏览 • 1回复 待解决
如何实现类似keyframes效果
245浏览 • 1回复 待解决
如何实现视频滤镜效果
296浏览 • 1回复 待解决
文字动画效果如何实现
177浏览 • 0回复 待解决
如何实现全局浮窗效果
130浏览 • 1回复 待解决
如何创建OceanBase表分组
1826浏览 • 1回复 待解决
List组件如何实现多列效果
155浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
135浏览 • 1回复 待解决
应用怎么实现半模态效果
279浏览 • 1回复 待解决