For instance in SwiftUI, you need to have a customized checklist merchandise that has a dotted define — to function a “add merchandise trace.”
So you employ a strokeBorder like this:
struct ContentView: View {
let objects:[String] = ["a","b","c"]
@State var itemsEmpty = false
var physique: some View {
Textual content("toggle").onTapGesture {
itemsEmpty.toggle()
}
VStack {
Spacer()
if !itemsEmpty {
Checklist{
ForEach(objects, id: .self) {merchandise in
Textual content(merchandise)
}
}
} else {
// The "checklist merchandise trace" view
Checklist{
Textual content("ADD")
.listRowBackground(
RoundedRectangle(cornerSize: CGSize(width: 15, top: 15))
.strokeBorder(fashion: StrokeStyle(lineWidth: 4, sprint: [10]))
)
}
}
Spacer()
}
.padding()
}
}
Which leads to this:
This identical approach is utilized in this Apple pattern, however it’s unsatisfactory to me as a result of the strains (understandably) usually are not evenly distributed and we get a nasty truncation on the wrap-around level.
The one (additionally unsatisfactory) methods I can consider to unravel this are:
A) To create the view utilizing two mirrored shapes as a substitute… (however it will nonetheless end in truncation… solely will probably be symmetrical trunctation this time).
B) Making some sort of “solar rays” radial gradient and stack two rounded rectangles in a approach that offers the phantasm that we now have a dotted define… (however the “heads and tails” of those strains is not going to be perpendicular to the define path as a result of the “solar rays” all originate at a single level)
How can this be carried out??