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