How to Solve the Issue of Some Dividers Not Displaying in the List Component

Read the original article：How to Solve the Issue of Some Dividers Not Displaying in the List Component

Problem Description

When adding the divider attribute to the List component, some dividers fail to display. How can this be resolved? The problematic code is as follows:

@Entry
@Component
struct Index {
  scroller: Scroller | undefined;
  @State outBoxList: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']

  build() {
    Column() {

      List({ scroller: this.scroller }) {
        ForEach(this.outBoxList, (item: string, index) => {
          ListItem() {
            Row() {
              Column() {
               Text('Name').fontSize(15)
               Text('Number').fontSize(12).fontColor(Color.Blue).margin({ top: 6 })
              }.layoutWeight(1).margin({ left: 12, right: 12 }).alignItems(HorizontalAlign.Start)
            }
            .height(70)
            .backgroundColor(Color.White)
            .width('100%')
            .padding({ left: 12, right: 12 })
            .onClick(() => {
            })
          }
        })
      }
      // Set divider line
      .divider({
        strokeWidth: 0.4,
        color: Color.Black,
        startMargin: 0,
        endMargin: 0
      })
      .edgeEffect(EdgeEffect.None)
      .scrollBarWidth(0)
      .width('100%')
    }
  }
}

The problem is as follows:

Background Knowledge

List: A list contains a series of items with uniform width. It is suitable for presenting continuous, multi-line data of the same type, such as images and text.

divider: Sets the divider line style for ListItems. No divider line by default.

strokeWidth: The line width of the separator.

Divider: Provides divider components to separate different content blocks/elements.

Troubleshooting Process

1. Verify the basic configuration of the divider in the code: When customizing divider properties, ensure styles are explicitly defined; otherwise, it may not display.
2. Use the ArkUI Inspector in DevEco Studio to troubleshoot list item layout conflicts: Avoid list items overlapping divider lines.
3. Is it the specification of the attribute itself?
4. The behavior of the code when running on the emulator differs from that on the actual device. Could other factors be causing this discrepancy?

Analysis Conclusion

1. The basic configuration of the separator line is correct;
2. No layout conflicts;
3. The default design hides the dividers for the first and last items in the List component.
4. When the strokeWidth value of the divider attribute is set to less than 1, differences between the simulator and the actual device may occur due to issues such as resolution, making it difficult to see clearly.

Solution

The behavior of code issues differs between simulators and physical devices. When the strokeWidth value of the divider property is set below 1, simulators may display it poorly due to resolution limitations. Physical devices follow rendering logic closer to real-world conditions, so prioritize debugging on actual devices. Solutions include: - Modify the strokeWidth value in the divider to 1. - Alternatively, omit the divider property and manually add a Divider component as a separator. Refer to the following example for implementation details:

@Entry
@Component
struct demo1 {
  scroller: Scroller | undefined;
  @State outBoxList: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

  build() {
    Column() {
      List({ scroller: this.scroller }) {
        ForEach(this.outBoxList, (item: string, index) => {
          ListItem() {
            Column() {
              Row() {
                Column() {
                  Text('Name').fontSize(18);
                  Text('Number').fontSize(16).fontColor(Color.Blue).margin({ top: 6 });
                }.layoutWeight(1).margin({ left: 12, right: 12 }).alignItems(HorizontalAlign.Start);
              }
              .height(70)
              .backgroundColor(Color.White)
              .width('100%')
              .padding({ left: 12, right: 12 });

              Column() {
                // The last item does not have a dividing line; all others do.
                if (index !== (this.outBoxList.length - 1)) {
                  Divider()
                    .strokeWidth(1)
                    .color('#e5e5e5')
                    .margin({ left: 16, right: 16 }); // Consistent with the design
                }
              };
            };
          };
        });
      }
      .edgeEffect(EdgeEffect.None)
      .scrollBarWidth(0)
      .width('100%');
    };
  }
}

The running result is as follows:

Written by Fatih Turan Gundogdu