1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

非同期処理中にユーザー操作を無効にする方法

Posted at

問題

アカウント作成という非同期処理があるのだが、作成中にはユーザーの操作を無効化したい。
ただ、調べてもユーザー操作を無効にする方法はないっぽい。
そこで、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)
			)
	}
}

ezgif.com-gif-maker (2).gif

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?