HomeiOS Developmentios - Creating Evenly Distributed Dotted Define for Customized Checklist Merchandise in...

ios – Creating Evenly Distributed Dotted Define for Customized Checklist Merchandise in SwiftUI


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:

enter image description here

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??

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments