Search code examples
iosswiftlistviewswiftuiforeach

How to add a divider between each item inside a ForEach View?


I'm trying to build a ForEach that is looping through an array of objects. Everything is working fine, but I cannot figure out how to add a Divider between the elements.

The layout for the rows is in a separate view, and I have tried adding a Divider to the row, which is causing the end of the list to look pretty bad, because of the Divider below the last item.

I cannot use a List, because it is not the only view on the page. Everything is inside a ScrollView.

For reference, here is the code as well as the UI so far.

UI reference sample

This is the code of the List view:

VStack {
        ForEach (manufacturers) { manufacturer in
          NavigationLink(destination: Text("test")) {
            Row(manufacturer: manufacturer)
          }
        }
      }
      .background(Color("ListBackground"))
      .cornerRadius(12)

This is the code of the Row view:

VStack {
      HStack {
        Text(manufacturer.name)
          .font(.system(size: 18, weight: .regular))
          .foregroundColor(.black)
        Spacer()
        Image(systemName: "chevron.right")
          .foregroundColor(.secondary)
      }
    }
    .padding()
    .buttonStyle(PlainButtonStyle())

Is there a way to add a Divider between every item in the ForEach loop, or am I able to remove the Divider from the last item?

I'm happy about every help I can get.


Solution

  • Here is a possible approach

        ForEach (manufacturers) { manufacturer in
          VStack {
            NavigationLink(destination: Text("test")) {
              Row(manufacturer: manufacturer)
            }
    
            // I don't known your manufacturer type so below condition might
            // require fix during when you adapt it, but idea should be clear
            if manufacturer.id != manufacturers.last?.id {
               Divider()
            }
          }
        }