niteBandit
niteBandit

Reputation: 119

Conditionally apply overlay in SwiftUI

I have an overlay button I would like to appear on the condition that we aren't on the first view!

On the first page, I would like the user to click this button to add users.Users click this

After that I would like users to navigate the form using this overlay

This button

However, I cannot get the overlay to conditionally format so it does it if 'views > 1' and so it looks like this.help

'''
//
//  ContentView.swift
//  PartyUp
//
//  Created by Aarya Chandak on 3/9/22.
//

import SwiftUI

struct PartyPage: View {
    
    @State private var viewModel = User.userList
    @State var views = 0
    @State private var cur = 0;
    private var pages = 3;
    
    var body: some View {
      
            
            if(viewModel.isEmpty) {
                
                VStack {
                    RSVPView()
                }
                
            } else {
               
     
                ZStack {
                
                    VStack{
                            Text("Lets plan something!").padding()
                            Button(action: {views += 1}, label: { Image(systemName: "person.badge.plus")
                            })
                    }
              
                    if(views == 1) {
                        InviteScreen()
                    }
                    if(views == 2) {
                        PlanningScreen()
                    }
                    if(views == 3) {
                        ReviewScreen()
                    }
                    
                }
                
                
                
                .overlay(
                    
                    Button(action: {
                    withAnimation(.easeInOut) {
                        if(views <= totalPages){
                            views += 1;
                        }
                        else {
                            views = 0
                        }
                    }
                    
                    
                }, label: {
                    
                    Image(systemName: "chevron.right")
                        .font(.system(size:20, weight: .semibold))
                        .frame(width: 33, height: 33)
                        .background(.white)
                        .clipShape(Circle())
                    
                    // Circuclar Slide
                    
                        .overlay(
                            ZStack{
                                Circle()
                                    .stroke(Color.black.opacity(0.04), lineWidth: 4)
                                    .padding(-3)
                                
                                Circle()
                                    .trim(from: 0.0, to: CGFloat(views/pages))
                                    .stroke(Color.white, lineWidth: 4)
                                    .rotationEffect(.init(degrees: -90))
                            }
                                .padding(-3)
                        
                        )
                    
                }
                    
                          ),alignment: .bottom).foregroundColor(.primary)
               
                
                
            
            }
            
    }

   
      


'''

Upvotes: 9

Views: 8503

Answers (2)

Akhilendra Singh
Akhilendra Singh

Reputation: 769

The ternary operator as in accepted answer didn't work for me. May be it has changed. I used curly braces like below. You don't need to have else statement.

.overlay {
   if user.isVerified {
      Image(systemName: "checkmark.circle.fill")
   }
}

Upvotes: 2

vadian
vadian

Reputation: 285039

Almost all modifiers accept a nil value for no change.

So basically you can write

.overlay(views > 1 ? Button(action: { ... }, label: { ... }) : nil)

It becomes more legible if you extract the button to an extra view struct.

Upvotes: 27

Related Questions