問題
アカウント作成という非同期処理があるのだが、作成中にはユーザーの操作を無効化したい。
ただ、調べてもユーザー操作を無効にする方法はないっぽい。
そこで、ZStackを使用して、上にViewを重ねることで解決できないか検討した。
解決方法
以下のコードのように、isBusyがtrueの時にのみ、Color.whiteを重ねてみたところ、下のViewを操作できないことを確認できたので、これで良さそう。
もし、より良い方法があればコメント頂けると助かります・・・。
ZStack{
VStack{
TextField("ユーザー名", text: $vm.userName)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
TextField("メールアドレス", text: $vm.emailAddress)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
SecureField("パスワード", text: $vm.password)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
SecureField("パスワード確認", text: $vm.passwordConfirm)
.autocapitalization(.none)
.textFieldStyle(RoundedBorderTextFieldStyle())
if vm.validationText != "" {
Text(vm.validationText)
.foregroundColor(.red)
.font(.footnote)
}
Button(
action: {
vm.createAccount()
}
){
Text("アカウント作成")
.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("アカウント作成中...")
.foregroundColor(.black)
)
}
}