How to "do nothing" in ternary operator in SwiftUI?

Question

This is my code:

struct GameView : View {
    @State
    private var clicked1 : Bool = false
    
    var body: some View {
        HStack {
            VStack {
                Image("shape0")
                    .overlay(clicked1 ?
                        RoundedRectangle(cornerRadius:10)
                        .stroke(Color.yellow, lineWidth: 7) : pass()
                    )
                    .onTapGesure {
                        print("Image is clicked")
                    }
            }
        }
    }
}

But some errors happen around pass().

I want to do nothing when variable clicked1 is false.

How can I fix it?

Does this answer your question? [If without else ternary operator](https://stackoverflow.com/questions/20053257/if-without-else-ternary-operator) — Serge de Gosson de Varennes, Nov 14 '20 at 05:51

New Dev · Accepted Answer · 2020-11-15T03:49:50.013

.overlay expects some View type as a parameter.

If you want to use a ternary operator, it has to return the same type. For a "do nothing" view, use EmptyView(), but since it has to be the same type, one way to do this would be by wrapping each conditional view with AnyView:

Image("shape0")
   .overlay(clicked1
            ? AnyView(RoundedRectangle(cornerRadius:10)
                         .stroke(Color.yellow, lineWidth: 7))
            : AnyView(EmptyView())
           )

EDIT: Actually - Optional<Wrapped: View> also conforms to View, so this is a better approach than above - i.e. just return the view you want or nil:

Image("shape0")
   .overlay(clicked1 ? RoundedRectangle(cornerRadius:10)
                         .stroke(Color.yellow, lineWidth: 7) : nil)

Another approach would be to use computed property which returns a conditional view:

var body: some View {
   Image("shape0")
      .overlay(overlayView)
}

@ViewBuilder
var overlayView: some View {
    if clicked1 {
        RoundedRectangle(cornerRadius:10)
                         .stroke(Color.yellow, lineWidth: 7)
    }
}

thanks for the Optional conforming to View part. Now it makes sense! — Mozahler, Jan 10 '22 at 22:07

score 2 · Answer 2 · answered Nov 14 '20 at 08:35

This would also work, the trick is to use Group.

Using ternary:

Image("shape0")
   .overlay(
       Group {
           clicked1 ?
               RoundedRectangle(cornerRadius:10)
                   .stroke(Color.yellow, lineWidth: 7)
           : nil
       }
   )

Using if:

Image("shape0")
   .overlay(
       Group {
           if clicked1 { 
               RoundedRectangle(cornerRadius:10)
                   .stroke(Color.yellow, lineWidth: 7)
           }
       }
   )

This reminded me that `Optional : View` - i.e. an optional view is a view, so no need for `Group` — New Dev, Nov 14 '20 at 17:27

How to "do nothing" in ternary operator in SwiftUI?

2 Answers2