SwiftUI ViewModifier where content conforms to Shape, and would like to call .stroke() on content

Question

Created Jul ’20

Replies 1

Boosts 0

Views 1.5k

Participants 2

I would like to use a ViewModifier, called Cardify, where the content conforms to Shape. I use content twice within my ViewModifier ... once for those cards that require filled shapes (paths) with colors (either solid, or transparent) and a second time for shapes that require a simple outlined only to be used on the cards.

That second use of content is where things fall apart, as the compiler complains about me trying to stroke() content.

How can I tell the ViewModifier that content will also conform to Shape protocol, so that I can use:

content.stroke()

Code Block swift
struct Cardify: ViewModifier {
    let card: CardForView
    func body(content: Content)  -> some View {
        ZStack {
            VStack {
                ForEach( 0..<card.pips ) { _ in
                    ZStack {
                        content.opacity(self.card.shading)
                        content.stroke() 
                    }                
                    .foregroundColor(self.card.color)
                    .scaleEffect(self.card.isSelected ? 0.60 : 1.0 )
                }
            }
            .padding() // for shapes within RoundedRect
            RoundedRectangle(cornerRadius: 10).stroke(lineWidth: card.isSelected ? 3.0 : 1.0).foregroundColor(.orange)
            .scaleEffect(self.card.isSelected ? 0.60 : 1.0 )
        }
        .padding() // for Grid within GameBoard
        .aspectRatio(2/3, contentMode: .fit)
    }
}
extension View {
    func cardify(card: CardForView) -> some View {
        return self.modifier(Cardify(card: card))
    }
}

Boost

Answer 1

OOPer OP

Jul ’20

I cannot find any ways to constrain Content of ViewModifier till now.

Why not do it with your own View?

Code Block struct CardifiedView<ContentView: Shape>: View {
		let card: CardForView
		let content: ContentView
		var body: some View {
				ZStack {
						VStack {
								ForEach( 0..<card.pips ) { _ in
										ZStack {
												content.opacity(self.card.shading)
												content.stroke()
										}
										.foregroundColor(self.card.color)
										.scaleEffect(self.card.isSelected ? 0.60 : 1.0 )
								}
						}
						.padding() // for shapes within RoundedRect
						RoundedRectangle(cornerRadius: 10).stroke(lineWidth: card.isSelected ? 3.0 : 1.0).foregroundColor(.orange)
						.scaleEffect(self.card.isSelected ? 0.60 : 1.0 )
				}
				.padding() // for Grid within GameBoard
				.aspectRatio(2/3, contentMode: .fit)
		}
}
extension Shape {
		func cardify(card: CardForView) -> some View {
				CardifiedView(card: card, content: self)
		}
}

0