SwiftUI gap left margin and change color of List item's bottom border

847 Views Asked by At

I'm new to SwiftUI and trying to create a UI component like UITableView. I'm using List and there's a couple of things I'd like to customize.

  1. There's a margin on the left. I managed to gap the margin for components inside the item but not the bottom border.
  2. I'd like to change the color of the List item's bottom border.

Here is how my code looks:

List {
   ForEach(someArray) { _ in
   Text("Item")
       .listRowInsets(EdgeInsets()) // To gap the left margin
    }
}

To be specific about the List item's bottom border, I will attach this image.

enter image description here

The line pointed by the red arrow is the List item's bottom border I mean. Not just the last border but each item's border.

I would appreciate any insight. Thank you!

1

There are 1 best solutions below

1
On BEST ANSWER

SwiftUI is still missing some features known from UIKit. This will certainly change in the course of time, but for now I would recommend a slightly different approach. You could achieve the desired result by using a ScrollView in combination with a LazyVStack (iOS14)

ScrollView {
     LazyVStack(alignment: .leading) {
         ForEach(someArray, id: \.self) { _ in
             Text("Item")
                 .padding(.leading)
             Divider()
                 .background(Color.red)
         }
     }
 }