🎃

SwiftUIのTextFiledの文字が消えないバグを力技で解決する方法

2024/02/21に公開

Swift

SwiftUI

tech

問題

送信後にテキストを消すようにしているが、テキストが消える時とテキストが消えない時がある。

TextField(
    "メッセージを入力",
    text: $message,
)

func addMessage() {
    if(message != "") {
        //追加の処理〜

        //messageを空にする
        message = ""
    }
}

解決

TextFieldを2つ設置して、送信される度に切り替えて使用する。

@State private var message = ""
@State private var textFieldType = true
@FocusState private var isTFTrueFocused: Bool
@FocusState private var isTFFalseFocused: Bool

var body: some View {
    if(textFieldType) {
        TextField(
            "メッセージを入力",
            text: $message,
        ).focused($isTFTrueFocused)
    } else {
        TextField(
            "メッセージを入力",
            text: $message,
        ).focused($isTFFalseFocused)
    }
}

func addMessage() {
    if(message != "") {
        //追加の処理〜

        //messageを空にする
        message = ""
        //TextFieldを切り替える
        textFieldType.toggle()
        //切り替えたTextFieldにフォーカスを当てる。
        focuseTextField()
    }
}

private func focuseTextField(){
    if(textFieldType) {
        isTFTrueFocused = true
    } else {
        isTFFalseFocused = true
    }
}

TextFieldが送信後に閉じないように.foucusedで管理してあげる。
TextFieldを切り替えるとフォーカスが外れてしまうため管理が必要。

宣伝

LINE感覚でメモできるし、人格を設定して一人二役で相談感覚で考えるのに最適なアプリです。
実際にTextFieldの挙動を確認する目的でも利用していただければ大変嬉しいです！

おまけ - 失敗した解決策

最初は、@Stateを2つに増やして、交互に使えば解決できると思った。
しかし、問題は解決しなかった。そのため、@Stateの中身を確認したら中身はちゃんと空にできていた。
問題はTextField側にあるみたい...

@State private var messageA = ""
@State private var messageB = ""
@State private var textFieldType = true

var body: some View {
    if(textFieldType) {
        TextField(
            "メッセージを入力",
            text: $messageA,
        )
    } else {
        TextField(
            "メッセージを入力",
            text: $messageB,
        )
    }
}

公式で解決されたら必要なくなるけど、TextFieldの文字消えない問題に遭遇したらぜひ参考にしてください！
記事を読んでいただいてありがとうございます。

問題

解決

宣伝

おまけ - 失敗した解決策

Discussion