HarmonyOS鸿蒙Next中List设置divider如何在list顶部和底部增加分割线

HarmonyOS鸿蒙Next中List设置divider如何在list顶部和底部增加分割线 List设置divider后，如何同时在list顶部和底部增加相同的分割线

3 回复

目前List自带的.divider属性无法设置List顶部和底部的分割线,可以通过Divider组件来自定义分隔线，示例如下：

ForEach(this.arr, (item: number, index: number) => {
  ListItem() {
    Column() {
      if (index == 0) {
        Divider().height(2)
          .margin({
            left: 20,
            right: 20,
            top: 10,
            bottom: 10
          })
          .backgroundColor(Color.Brown)
      }
      Row() {
        Text('' + item)
          .width('100%')
          .height(100)
          .fontSize(16)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .backgroundColor(0xFFFFFF)
      }

      Divider().height(2)
        .margin({
          left: 20,
          right: 20,
          top: 10,
          bottom: 10
        })
        .backgroundColor(Color.Brown)
    }
  }
}, (item: string) => item)

更多关于HarmonyOS鸿蒙Next中List设置divider如何在list顶部和底部增加分割线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，List组件默认会在每个ListItem之间添加分割线。如果需要在List的顶部和底部也添加分割线，可以通过自定义ListItem的divider属性来实现。

  1. 顶部添加分割线：可以在List的第一个ListItem之前手动添加一个分割线。可以通过在List的builder方法中，判断是否为第一个ListItem，如果是，则在该位置插入一个自定义的分割线组件。

  2. 底部添加分割线：类似地，可以在List的最后一个ListItem之后手动添加一个分割线。通过判断是否为最后一个ListItem，如果是，则在该位置插入一个自定义的分割线组件。

实现代码如下：

@Entry
@Component
struct ListWithCustomDividers {
  @State private items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  build() {
    List({ space: 10 }) {
      ForEach(this.items, (item, index) => {
        ListItem() {
          Text(item)
            .fontSize(20)
            .margin({ top: 10, bottom: 10 })
        }
        .divider({ strokeWidth: 1, color: Color.Gray })

        // 在第一个ListItem前添加顶部分割线
        if (index === 0) {
          ListItem() {
            Divider()
              .strokeWidth(1)
              .color(Color.Gray)
          }
        }

        // 在最后一个ListItem后添加底部分割线
        if (index === this.items.length - 1) {
          ListItem() {
            Divider()
              .strokeWidth(1)
              .color(Color.Gray)
          }
        }
      });
    }
    .width('100%')
    .height('100%')
  }
}

在这个示例中，Divider组件用于创建分割线，并通过条件判断在List的顶部和底部分别添加了分割线。

在HarmonyOS鸿蒙Next中，可以通过DividerItemDecoration来为List设置分割线。若要在列表顶部和底部增加分割线，可以在自定义的DividerItemDecoration中重写getItemOffsets方法，通过判断position是否为第一个或最后一个项来添加偏移量，从而实现顶部和底部的分割线效果。具体实现如下：

DividerItemDecoration decoration = new DividerItemDecoration(context, DividerItemDecoration.VERTICAL) {
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int position = parent.getChildAdapterPosition(view);
        if (position == 0) {
            outRect.top = dividerHeight; // 顶部分割线
        }
        if (position == parent.getAdapter().getItemCount() - 1) {
            outRect.bottom = dividerHeight; // 底部分割线
        }
    }
};
recyclerView.addItemDecoration(decoration);

通过这种方式，可以在列表的顶部和底部添加自定义高度的分割线。

回到顶部