HarmonyOS鸿蒙Next中.divider(this.egDivider)如何在列表最后一个元素下面也加上一条分割线

可以使用自定义ListItem结合条件渲染，参考代码如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  scroller: Scroller = new Scroller()
  @State dataSource: Array<ListItemModel> = new Array()
  aboutToAppear(): void {
    let index = 0;
    while (index<50){
      this.dataSource.push({"title":index.toString(),"showLine":true})
      index++
    }
  }
  build() {
    Column() {
      List({ scroller: this.scroller }) {
        ForEach(this.dataSource, (item: ListItemModel) => {
          ListItem() {
            ListItemView({ item: item })
          }
        }, (item: ListItemModel) => item.title)
      }.scrollBar(BarState.Off)
      .onWillScroll((scrollOffset: number, scrollState: ScrollState) => {
      })
    }
    .backgroundColor('#0D182431')
    .width('100%')
    .height('100%')
  }
}
@Component
struct ListItemView {
  item: ListItemModel = new ListItemModel();
  build() {
    Column(){
      Text("item" + this.item.title)
        .fontSize(16)
        .fontColor(Color.Black)
        .height(80)
        .width("100%")
        .textAlign(TextAlign.Center).backgroundColor(Color.White)
      if (this.item.showLine){
        Divider().strokeWidth(1).color(Color.Red)
      }
    }.width("100%").height(81).borderRadius(10).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceBetween)
  }
}
class  ListItemModel {
  constructor() {
  }
  title: string = ""
  showLine: boolean = true
}

更多关于HarmonyOS鸿蒙Next中.divider(this.egDivider)如何在列表最后一个元素下面也加上一条分割线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼•7 天前

在HarmonyOS鸿蒙Next中，.divider(this.egDivider)用于为列表项之间添加分割线。默认情况下，分割线只会显示在列表项之间，而不会在最后一个元素下面显示。如果需要在最后一个元素下面也加上一条分割线，可以通过以下方式实现：

自定义ItemProvider：在自定义的ItemProvider中，可以在getCount方法中返回列表项数量加1，并在getItem方法中处理最后一个元素的分割线。
使用布局属性：在布局文件中，可以为最后一个元素手动添加一个分割线控件，并设置其可见性。
动态添加分割线：在代码中动态检查当前元素是否为最后一个，如果是，则添加一个分割线控件。

例如，使用自定义ItemProvider的方式：

class CustomItemProvider extends ItemProvider {
    private items: Array<string> = ["Item1", "Item2", "Item3"];

    getCount(): number {
        return this.items.length + 1; // 返回列表项数量加1
    }

    getItem(index: number): any {
        if (index < this.items.length) {
            return this.items[index];
        } else {
            return this.egDivider; // 返回分割线控件
        }
    }

    getItemType(index: number): number {
        return index < this.items.length ? 0 : 1; // 定义不同的Item类型
    }
}

let itemProvider = new CustomItemProvider();
listComponent.setItemProvider(itemProvider);

通过上述方法，可以在列表的最后一个元素下面也加上一条分割线。

nodeper 3楼•7 天前

在HarmonyOS鸿蒙Next中，如果你想在列表的最后一个元素下面也加上一条分割线，可以通过在布局文件中手动添加一个Divider组件来实现。具体步骤如下：

在布局文件的列表项末尾添加一个Divider组件。
设置Divider的样式和属性，确保它与列表中其他分割线一致。

例如：

<Divider
    ohos:width="match_parent"
    ohos:height="1vp"
    ohos:background_element="#CCCCCC"/>

这样，无论列表项数量如何变化，最后一项下方都会显示分割线。