【登録フォームなどへの活用】特定条件によるビューの有効/無効切り替え【disabledモディファイアの使い方】

この記事は約4分で読めます。

SwiftUIで.disabled(_:)モディファイアは、特定の条件下でビュー(主にボタンやフォームフィールドなどのインタラクティブな要素)の有効/無効状態を制御するために使用されます。

このモディファイアを使用すると、ユーザーのアクションに基づいて、またはアプリの状態に応じて、UI要素を無効化(操作不可)にすることが可能です。

基本的な使い方

.disabled(_:)モディファイアは、ブール値(trueまたはfalse)を引数に取ります。
この値がtrueの場合、ビューは無効化され、ユーザーによる操作ができなくなります。falseの場合は、ビューは通常どおり有効で操作可能です。

import SwiftUI

struct DisabledSmp: View {
    @State private var isButtonDisabled = false
    
    var body: some View {
        Toggle(isOn: $isButtonDisabled) {
            Text("有効/無効切り替え")
        }

        Button("クリックしてください") {
            // ボタンアクション
        }
        .disabled(isButtonDisabled) // ボタンの有効/無効を制御
    }
}

この例では、isButtonDisabledの状態に応じてボタンが有効化または無効化されます。

実用的な使用例(入力フォームのチェック)

.disabled(_:)モディファイアは、フォームの送信ボタンを無効化するためによく使用されます。
例えば、ユーザーがフォームに必要な全ての情報を入力するまで送信ボタンを無効化し、誤送信を防ぐことができます。

import SwiftUI

struct SignUpView: View {
    @State private var username = ""
    @State private var email = ""

    var isFormValid: Bool {
        !username.isEmpty && email.contains("@")
    }

    var body: some View {
        VStack {
            TextField("ユーザー名", text: $username)
                .padding()
                .frame(width: 300, height: 50, alignment: .center)
                .border(Color.black, width: 1.0)
            TextField("メールアドレス", text: $email)
                .padding()
                .frame(width: 300, height: 50, alignment: .center)
                .border(Color.black, width: 1.0)
            Button("登録") {
                // 登録処理
            }
            .disabled(!isFormValid) // フォームの条件を満たすまで無効化
        }
    }
}

この例では、ユーザー名が空でない、かつメールアドレスに@が含まれている場合にのみ、「登録」ボタンを有効化します。

まとめ

.disabled(_:)モディファイアを使用することで、SwiftUIアプリケーションにおいてフォームの文字入力の有無によって、関連するボタンの有効/無効を切り替えたりすることが可能となります。
これにより、ユーザーが誤った操作を行うことを防ぎ、アプリの使いやすさと信頼性を向上させることができます。

タイトルとURLをコピーしました