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

Question

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.

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.

Answer 1

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()
        }
      }
    }

Answer 2

You can remove last line with compare count.

struct Row: View {
    var manufacturer: String
    var isLast: Bool = false
    var body: some View {
        VStack {
            HStack {
                Text(manufacturer)
                    .font(.system(size: 18, weight: .regular))
                    .foregroundColor(.black)
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.secondary)
            }
            if !isLast {
                Divider()
            }
        }
        .padding()
        .buttonStyle(PlainButtonStyle())
    }
}

struct ContentView5: View {
    private var manufacturers = ["1", "2", "3"]
    
    var body: some View {
        VStack {
            ForEach (manufacturers.indices, id: \.self) { idx in
                NavigationLink(destination: Text("test")) {
                    Row(manufacturer: manufacturers[idx], isLast: idx == manufacturers.count - 1)
                }
            }
        }
        .background(Color("ListBackground"))
        .cornerRadius(12)
    }
}

Or you can remove last var from Row.

 VStack {
    ForEach (manufacturers.indices, id: \.self) { idx in
        NavigationLink(destination: Text("test")) {
            Row(manufacturer: manufacturers[idx])
        }
        if idx != manufacturers.count - 1 {
            Divider()
        }
    }
}