Is there a way to make a half screen cover update a variable in another view in SwiftUI?

26 Views Asked by At

I've searched high and low for an answer to this. I have a variable called favoriteMustache in my signUp View. When a user clicks the mustache button, I want to show a half screen cover with a list of mustaches that the user can choose. Once the user clicks the preferred mustache, the @State var favoriteStache is updated and the half screen cover is closed.

Here's my MustacheView:

struct MustacheView: View {
    
    @State var showingMustaches = false
    @State var favoriteStache: String? = nil
    
    private let adaptiveColumngs = [
        GridItem(.adaptive(minimum: 100))
    ]
    
    var body: some View {
        ScrollView{
            Text("Choose your favorite mustache:")
                .font(.title)
            LazyVGrid(columns: adaptiveColumngs, spacing: 20) {
                ForEach(mustaches) { item in
                    Button {
                        
                        
                        // update the favorite mustache

                        
                    } label: {
                        VStack(alignment: .center) {
                            Image(item.mustache)
                                .resizable()
                                .scaledToFill()
                                .frame(width: 75)
                            Text(item.name)
                                .font(.caption)
                                .multilineTextAlignment(.center)
                        }
                        .padding()
                        .foregroundColor(.black)
                        .background(Color.white.opacity(0.5))
                        .cornerRadius(20)
                    }
                }
                .padding()
            }
        }
        .background(Gradient(colors: [.cyan, .blue, .gray]))
        .ignoresSafeArea()
    }
}

Here's my signUpView:

    @State var email = ""
    @State var password = ""
    @State var loginStatusMessage = ""
    @State var image: UIImage?
    @State var uid = ""
    @State var favoriteStache: String? = nil
    @State var userIsLoggedIn = false
    @State var showingMustaches = false

HStack {
                                Button {
                                    // button toggles image picker to true
                                    shouldShowImagePicker.toggle()
                                } label: {
                                    // button shows an image of a camera or the chosen slefie
                                    VStack {
                                        if let image = self.image {
                                            // shows image from photo album if is selected
                                            
                                            Image(uiImage: image)
                                                .resizable()
                                                .frame(width: 105, height: 105)
                                                .scaledToFill()
                                                .cornerRadius(105)
                                            
                                        } else {
                                            // shows the camera if no image is slected
                                            
                                            VStack {
                                                Image(systemName: "camera.circle")
                                                    .font(.system(size: 100))
                                                    .foregroundColor(.black)
                                                Text("(Optional) Click on the camera to upload a your best selfie.")
                                                    .foregroundColor(.black)
                                                    .font(.caption)
                                            }
                                        }
                                    }
                                }
                                // line in between
                                Divider()
                                // button to choose a mustache
                                Button {
                                    // button toggles mustache picker to true
                                    showingMustaches.toggle()
                                    
                                } label: {
                                    // button shows an image of a random mustache or the chosen favorite mustache
                                    VStack {
                                        Image("mustache\(randomInt)")
                                            .resizable()
                                            .frame(width: 105, height: 105)
                                            .scaledToFill()
                                            .foregroundColor(.black)
                                        Text("Click the stache to choose a No-Shave November Style.")
                                            .foregroundColor(.black)
                                            .font(.caption)

                                    }
                                }
                                
                            }
                        }
                        // enter new uesername and password
                        TextField("Choose a username", text: $uid)
                            .padding(12)
                            .background(Color.white.opacity(0.5))
                            .cornerRadius(10)
                        
                        TextField("Email", text: $email)
                            .keyboardType(.emailAddress)
                            .autocapitalization(.none)
                            .padding(12)
                            .background(Color.white.opacity(0.5))
                            .cornerRadius(10)
                        SecureField("Password", text: $password)
                            .padding(12)
                            .background(Color.white.opacity(0.5))
                            .cornerRadius(10)
                        
                        Button {
                            // call function to create an account
                            createNewAccount()
                        } label: {
                            HStack {
                                
                                
                                Text("Create Account")
                                    .font(.title)
                                    .foregroundColor(.white)
                                    .padding()
                                
                                
                            }.background(.blue)
                                .cornerRadius(15 )
                        }
                        Text(self.loginStatusMessage)
                            .foregroundColor(.red)
                            .background(Color.white)
                            .cornerRadius(10)
}
.sheet(isPresented: $showingMustaches, onDismiss: nil) {
            MustacheView()
                .presentationDetents([.fraction(0.7)])
        }

I tried making the variable into an observable object.. that didn't work.

Basically, I'm pretty dumb when it comes to coding. I've only been doing this for six months. I don't know how to ask the internet the right question to get the answer I want.

0

There are 0 best solutions below