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.