[SwiftUI]TextFieldの編集中だけピッカーを表示するには？

SwiftUI

2022.02.03

どうも、ちょげ(@chogetarou)です。

TextFieldを編集している時だけピッカーを表示する方法を紹介します。

方法
使用例

方法

TextFieldを編集している時だけピッカーを表示するには、引数「onEditingChanged」を使います。

まず、編集中かどうかを判断する変数を用意します。

@State var showPicker = false

次に、TextFieldの引数「onEditingChanged」で、用意した変数が編集中にtrue、そうでない場合にfalseになるようにします。

TextField("Your Text",
    text: $editingText,
    onEditingChanged: { editing in
        self.showPicker = editing
    }
)

最後に、条件分岐を使って、編集中になったらピッカーが表示されるようにします。

if self.showPicker {
    Picker(/*引数*/)
}

使用例

以下は、使用例です。

struct ContentView: View {
    @State var editingText = ""
    @State var showPicker = false
    @State var selectDate = Date.now
    var body: some View {
        VStack {
            TextField("Your Text",
                text: $editingText,
                onEditingChanged: { editing in
                    self.showPicker = editing
                }
            )
            .padding()
            if self.showPicker {
                DatePicker(selection: $selectDate,displayedComponents: .date, label: {})
            }
        }
    }
}