CODEWITHSUNDEEP
swiftswiftui
Some Name
Some Name

Reputation: 41

How do I draw a shape with multiple borders?

I am trying to draw a shape using swift, and here my code

struct ElementView: View {
    var element: Element

    var body: some View {
        let rec = RoundedRectangle(cornerRadius: 25.0)
        
        return ZStack {
            rec
                .frame(width: 300, height: 150, alignment: .center)
                .foregroundColor(.pink)
                .opacity(0.4)
                .overlay(
                    rec.stroke(
                        Color.pink,
                        style: StrokeStyle(
                            lineWidth: 5,
                            lineCap: .round,
                            lineJoin: .round
                        )
                    )
                )
            Text("Text")
        }
    }
}

There is only one border, but I want two or more

My result: https://i.sstatic.net/n26Vb.png

What is expected: https://i.sstatic.net/L23cW.png

How can I add multiple borders?

Upvotes: 3

Views: 1189

Answers (1)

swiftPunk
swiftPunk

Reputation: 1

Another approach with less code!

enter image description here

struct ElementView: View {

    var body: some View {

        Text("Text")
            .frame(width: 300, height: 150, alignment: .center)
            .background(Color.yellow.opacity(0.4))
            .cornerRadius(15.0)
            .overlay(RoundedRectangle(cornerRadius: 15.0).strokeBorder(Color.blue, lineWidth: 10.0))
            .padding(10.0)
            .overlay(RoundedRectangle(cornerRadius: 25.0).strokeBorder(Color.red, lineWidth: 10.0))

    }
}

Upvotes: 8

Related Questions