ios – Creating Evenly Distributed Dotted Outline for Custom List Item in SwiftUI

Let’s say in SwiftUI, you want to have a custom list item that has a dotted outline — to serve as a “add item hint.”

So you use a strokeBorder like this:

struct ContentView: View {
    
    let items:[String] = ["a","b","c"]
    @State var itemsEmpty = false
    
    var body: some View {
        Text("toggle").onTapGesture {
            itemsEmpty.toggle()
        }
        VStack {
            Spacer()
            if !itemsEmpty {
                List{
                    ForEach(items, id: \.self) {item in
                        Text(item)
                    }
                }
            } else {
                // The "list item hint" view
                List{
                    Text("ADD")
                        .listRowBackground(
                            RoundedRectangle(cornerSize: CGSize(width: 15, height: 15))
                                .strokeBorder(style: StrokeStyle(lineWidth: 4, dash: [10]))
                            
                        )
                }
            }
            Spacer()
        }
        .padding()
    }
}

Which results in this:

This same technique is used in this Apple sample, but it is unsatisfactory to me because the lines (understandably) are not evenly distributed and we get a nasty truncation at the wrap-around point.

The only (also unsatisfactory) ways I can think of to solve this are:

A) To create the view using two mirrored shapes instead… (but this will still result in truncation… only it will be symmetrical trunctation this time).

B) Making some kind of “sun rays” radial gradient and stack two rounded rectangles in a way that gives the illusion that we have a dotted outline… (but the “heads and tails” of these lines will not be perpendicular to the outline path because the “sun rays” all originate at a single point)

How can this be done??