There is an asynchronous process called account creation, but I want to disable user operations during creation. However, there seems to be no way to disable user operations even after checking. Therefore, we examined whether it could be solved by using ZStack and overlaying View on top of it.
As shown in the code below, when I tried overlaying Color.white only when isBusy was true, I was able to confirm that the View below could not be operated, so this seems to be good. If there is a better way, I would appreciate it if you could comment ...
ZStack{
VStack{
TextField("username", text: $vm.userName)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
TextField("mail address", text: $vm.emailAddress)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
SecureField("password", text: $vm.password)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
SecureField("Password confirmation", text: $vm.passwordConfirm)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
if vm.validationText != "" {
Text(vm.validationText)
.foregroundColor(.red)
.font(.footnote)
}
Button(
action: {
vm.createAccount()
}
){
Text("Account creation")
.padding(4)
.frame(maxWidth: .infinity)
.foregroundColor(Color.white)
.background(Color.gray)
.cornerRadius(8)
}
}
.padding(.horizontal)
if vm.isBusy {
Color.white
.opacity(0.7)
.edgesIgnoringSafeArea(.all)
.overlay(
ProgressView("Creating an account...")
.foregroundColor(.black)
)
}
}
Recommended Posts