HarmonyOS 鸿蒙Next List的divider使用

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next List的divider使用#HarmonyOS最强问答官#

默认情况下，第一个listitem的上方和最后一个的下方是没有分割线的 在此基础上，我是否可以设置第一个的下方和第二个的下方也没有分割线吗

Harmonyos Next教程
3 回复

想实现您想要的效果，只能使用自定义ListItem结合条件渲染，参考代码如下

[@Component](/user/Component)
struct ListDividePage {
   @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: index % 2 === 0 });
           index++;
       }
   }

   build() {
       Column() {
           List({ scroller: this.scroller }) {
               ForEach(this.dataSource, (item: ListItemModel) => {
                   ListItem() {
                       ListItemView({ item: item });
                   }
               }, (item: ListItemModel) => item.title);
           }
           .scrollBar(BarState.Off)
           .onScroll((scrollOffset: number, scrollState: ScrollState) => {
               // Scroll event handling can be added here
           });
       }
       .backgroundColor('#0D182431')
       .width('100%')
       .height('100%');
   }
}

[@Component](/user/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 = false;
}
可以根据List->ForEach中的索引值控制divider是否可见和隐藏

在HarmonyOS中，Next List（即滚动列表）的divider（分隔符）通常用于在列表项之间添加视觉分隔，以提升用户界面的可读性和美观度。Divider的使用主要依赖于列表组件的样式和布局设置。

要在HarmonyOS的Next List中使用divider，你可以通过以下方式实现：

  1. XML布局文件：在定义Next List的XML布局文件中，可以通过设置列表项的样式属性来添加divider。这通常涉及到设置ListContainer或ListItem的divider属性，或者通过自定义样式来实现。

  2. Java/Kotlin代码：在Java或Kotlin代码中，你可以通过编程方式设置Next List的divider。这通常涉及到获取列表的引用，并调用相关方法来设置divider的样式或资源。

  3. 主题和样式：在应用的主题或样式定义中，可以全局或局部地设置Next List的divider样式，以确保整个应用或特定页面具有一致的视觉分隔效果。

请注意，具体的divider设置方法可能因HarmonyOS的版本和具体组件而有所不同。建议查阅最新的HarmonyOS开发文档以获取最准确的信息。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部