HarmonyOS鸿蒙Next中Scroll、List等滚动组件可以在item中间添加分隔符吗？

开发者你好，针对您的问题： 1、可以在 item 中间加分隔符吗？ List：可以设置分割线，比如：

List() {
  //...
}
.divider({ color: Color.Blue, strokeWidth: 1 })

Scroll：可以加多个Divider组件。 2、不做数据分组，分隔条没有停靠效果是吗？ 是的，不分组（不用 ListItemGroup）： List：自定义分隔条随滚动走，不停靠。 Scroll：完全没有原生停靠能力，要停靠就必须分组。

您还可以参考我的这篇实战文章：

通过ListItemGroup实现列表分组展示及吸顶吸底效果

https://developer.huawei.com/consumer/cn/blog/topic/03216343276443038

divider

divider(value: ListDividerOptions | null)

设置ListItem分割线样式，默认无分割线。

List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。

多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，单列模式从List交叉轴方向起始边开始计算。

ListItem设置多态样式时，被按压的子组件上下的分割线不绘制。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

默认值：null

分组效果代码：

// xxx.ets
class TimeTableDataSource implements IDataSource {
  private list: TimeTable[] = [];
  constructor(list: TimeTable[]) {
    this.list = list;
  }
  totalCount(): number {
    return this.list.length;
  }
  getData(index: number): TimeTable {
    return this.list[index];
  }
  registerDataChangeListener(listener: DataChangeListener): void {
  }
  unregisterDataChangeListener(listener: DataChangeListener): void {
  }
}
class ProjectsDataSource implements IDataSource {
  private list: string[] = [];
  constructor(list: string[]) {
    this.list = list;
  }
  totalCount(): number {
    return this.list.length;
  }
  getData(index: number): string {
    return this.list[index];
  }
  registerDataChangeListener(listener: DataChangeListener): void {
  }
  unregisterDataChangeListener(listener: DataChangeListener): void {
  }
}
@Entry
@Component
struct ListItemGroupExample {
  private timeTable: TimeTable[] = [
  {
    title: '星期一',
    projects: ['语文', '数学', '英语']
  },
  {
    title: '星期二',
    projects: ['物理', '化学', '生物']
  },
  {
    title: '星期三',
    projects: ['历史', '地理', '政治']
  },
  {
    title: '星期四',
    projects: ['美术', '音乐', '体育']
  }
];
  private scroller: ListScroller = new ListScroller();
  @State listIndexInfo: VisibleListContentInfo = { index: -1 };
  @State mess:string = 'null';
  @State itemBackgroundColorArr: boolean[] = [false];
  @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, scroller: this.scroller}) {
        LazyForEach(new TimeTableDataSource(this.timeTable), (item: TimeTable, index: number) => {
          ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) {
            LazyForEach(new ProjectsDataSource(item.projects), (project: string, subIndex: number) => {
              ListItem() {
                Text(project)
                  .width('100%')
                  .height(100)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(this.itemBackgroundColorArr[index * 3 +subIndex] ? 0x68B4FF: 0xFFFFFF)
              }
            }, (item: string) => item)
          }
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
        },(item: string) => item)
      }
      .width('90%')
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
      .gesture(
        PanGesture()
          .onActionUpdate((event: GestureEvent) => {
            if (event.fingerList[0] != undefined && event.fingerList[0].localX != undefined && event.fingerList[0].localY != undefined) {
              try {
                this.listIndexInfo =
                  this.scroller.getVisibleListContentInfo(event.fingerList[0].localX, event.fingerList[0].localY);
              } catch (error) {
                console.info('Failed to get visible list content info:', error);
              }
              let itemIndex:string = 'undefined';
              if (this.listIndexInfo.itemIndexInGroup != undefined ) {
                itemIndex = this.listIndexInfo.itemIndexInGroup.toString();
                if (this.listIndexInfo.index != undefined && this.listIndexInfo.index >= 0 &&
                  this.listIndexInfo.itemIndexInGroup >= 0 ) {
                  this.itemBackgroundColorArr[this.listIndexInfo.index * 3 + this.listIndexInfo.itemIndexInGroup] = true;
                }
              }
              this.mess = 'index:' + this.listIndexInfo.index.toString() + ' itemIndex:' + itemIndex;
            }
          }))
      .gesture(
        TapGesture({ count: 1 })
          .onAction((event: GestureEvent) => {
            if (event) {
              this.itemBackgroundColorArr.splice(0,this.itemBackgroundColorArr.length);
            }
          })
      )
      Text('您当前位置Item索引为'+ this.mess)
        .fontColor(Color.Red)
        .height(50)
    }.width('100%').height('90%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}
interface TimeTable {
  title: string;
  projects: string[];
}

效果图：

可以的。

无论是 Scroll + ForEach 还是 List + ListItem，本质上都可以把分隔条当成一个普通组件插进去，

直接渲染：

ForEach(data, (item) => {
  if (item.type === 'divider') {
    DividerView()
  } else {
    ItemView(item)
  }
})

即可。

但你说的“不做数据分组的话，分隔条没有停靠效果是吗？”

应该是对的。

普通情况下：

Item
Item
Divider
Item
Item

这个 Divider 只是列表里的一个普通元素。

滚过去就滚过去了：

↑
Divider
↓

不会自动吸顶。

如果想实现：

2024年    ← 吸顶
Item
Item
Item

滚到：

2025年    ← 替换2024年吸顶
Item
Item

这种效果，就需要使用 List 的分组能力。

通常会用：

List() {
  ForEach(groups, (group) => {
    ListItemGroup({
      header: HeaderView(group.title)
    }) {
      ...
    }
  })
}

然后开启：

.sticky(StickyStyle.Header)

或者对应的吸顶配置。

这样 Header 才会被系统识别成分组头，实现停靠效果。

所以简单总结：

• 只想显示分隔条 → 直接插组件即可。
• 想要年月分隔并吸顶 → 用 ListItemGroup + Header。
• Scroll + ForEach 没有原生吸顶能力，需要自己监听滚动实现。
• List 做年月分组场景是官方更推荐的方案。