用途

テキスト、パスワード、数値を入力する例です。

実行時の例

テキスト入力時

image.png

小数点付きの数値入力時

image.png

「.」の入力ボタンが表示されます。

整数の入力時

image.png

「.」の入力ボタンは表示されません。

image.png

ContentView にテキスト入力を作成しました。

//
//  ContentView.swift
//  TextFieldTest01
//
//  Created by Rue on 2024/09/07.
//

import SwiftUI

struct ContentView: View {
    @State var textNone = ""
    @State var textDefault = ""
    @State var textPlain = ""
    @State var textRound = ""
    // @State var textSquare = ""
    @State var password = "ABCDEFG"
    @State var numDouble: Double = 0.0
    @State var numInt: Int = 0
    var body: some View {
        VStack {
            TextField("スタイルなしで入力", text: $textNone)
            TextField("デフォルトのスタイルで入力", text: $textDefault)
                .textFieldStyle(.automatic)
            TextField("テキストのみのスタイルで入力", text: $textPlain)
                .textFieldStyle(.plain)
            TextField("角丸の枠線のあるスタイルで入力", text: $textRound)
                .textFieldStyle(.roundedBorder)

            // SquareBorderTextFieldStyle は、iOS では、利用できないようです。
            // TextField("枠線のあるスタイルで入力", text: $textSquare)
            // .textFieldStyle(SquareBorderTextFieldStyle())

            // パスワードを入力する例
            // 入力した文字は、マスクされます。
            SecureField("パスワード形式で入力", text: $password)
                .textFieldStyle(.roundedBorder)

            // 数値入力を行う場合の例
            TextField("数字とドット(句読点)キーボード", value: $numDouble, format: .number)
                .textFieldStyle(.roundedBorder)
                .keyboardType(.decimalPad)
            TextField("数字のみキーボード", value: $numInt, format: .number)
                .textFieldStyle(.roundedBorder)
                .keyboardType(.numberPad)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}