ToggleはUIKitではUISwitchと同様のUIパーツです。

@State var isEnable = true
Toggle(isOn: $isEnable) {
            Text("Hello")
        }.padding()

onChangeでは変更を検知して変更された値を受け取ることができます。

TextFieldに入力されていた値と入力を変更した値を受け取ってみます。

    @State var text = ""
    var body: some View {
           TextField("入力", text: $text)
            .onChange(of: text) { [text] newValue in
                print("変更前:\(text)、変更後\(newValue)")
            }
    }

ボタンタップ時の処理とボタンの名称を設定します。

Button {
            print("Clicked")
        } label: {
            Text("Button")
        }

画像のボタンを追加したい場合以下のようになります。

Button {
            print("Clicked")
        } label: {
            Image("shark")
        }

TextField(title, text: Binding）のtitleはUIKitのTextFieldで設定できたplaceholderとなります。

文字が入力されていないときにtitleに設定された文字列が薄いグレーで表示されます。

Binding<String>は入力する文字列です。

@State var fullName: String = "Taro"
TextField("名前", text: $fullName).textFieldStyle(.roundedBorder)

パスワード入力時など入力した文字列をマスクして表示したい場合はSecureFieldが便利です。

@State var password: String = ""
SecureField("パスワード", text: $password).textFieldStyle(.roundedBorder)

続いてSliderの扱い方について調べてみます。

左端が0、右端を100、初期位置を50としました。

スライダーを動かしている間のイベントが取れるので、isEditingをtrueにして編集中のみ数値を赤色にしています。

 @State private var value = 50.0
 @State private var isEditing = false
    var body: some View {
        VStack {
            Slider(
                value: $value,
                in: 0...100,
                onEditingChanged: { editing in
                    isEditing = editing
                }
            )
            Text("\(value)")
                .foregroundColor(isEditing ? .red : .blue)
        }
    }

DatePickerでは日付を選択して取得することができます。

ttleにはスクリーンショットテキストが入り、selectionはDateの変数、displayedComponentsには日付だけ、日付と時刻などの設定が可能です。

DatePicker("日付を選択", selection: $date, displayedComponents:  [.hourAndMinute, .date])

日本語フォーマットに対応させるには以下のコードを追加します。

.environment(\.locale, Locale(identifier: "ja_JP"))

PickerはUISegmentedControlのような機能です。

複数ある選択肢の中からタップすることで１つを選択することができます。

選択状態を保持する変数と選択肢に表示する文字列の配列を準備して以下のように追加します。

    @State var selected = 0
    var array = ["A", "B", "C"]
    var body: some View {
        Picker("選択肢", selection: $selected) {
            ForEach(0 ..< array.count) {
                index in
                Text(self.array[index])
                    .tag(index)
            }
        }
        .pickerStyle(SegmentedPickerStyle())
    }

UIStepperと同等の機能です。

変数を保持して下限、上限を設定して追加できます。

サンプルコードでは-10から10までカウントアップ、ダウンができるようになっています。

    @State var count:Int = 0
    var body: some View {
        VStack {
            Stepper(value: $count, in: -10...10) {
                Text("Count \(count)")
            }
        }
    }

シングルタップ、ダブルタップは以下のようにonTapGestureを追加します。

var body: some View {
        VStack {
           Text("シングルタップ")
                .onTapGesture {
                    print("シングルタップを検知")
                }
            Text("ダブルタップ")
                .onTapGesture(count: 2) {
                    print("ダブルタップを検知")
                    
                }
        }
    }

ジェスチャーイベントは.gesture内で受け取ることができます。

タップ

 Text("タップ")
                .gesture(
                    TapGesture()
                        .onEnded({ _ in
                            print("タップ終了")
                        })
                )

ドラッグ

DragGestureで最小の移動距離を設定しています。

minimumDistanceを超えてドラッグが終了するとonEndedが呼ばれます。

Text("ドラッグ")
                .gesture(
                    DragGesture(minimumDistance: 50)
                        .onEnded({ _ in
                            print("ドラッグ終了")
                        })
                )

ロングプレス

LongPressGestureではminimumDurationに指定した時間長押しするとonEndedが呼ばれます。

Text("ロングプレス")
                .gesture(
                    LongPressGesture(minimumDuration: 2)
                        .onEnded({ _ in
                            print("ロングプレス終了")
                        })
                )

セクションで区切って表示したい場合、List内にSectionを追加します。

List→Section→Textの形で作ってみます。

 List {
            Section(header: Text("ヘッダー1")) {
                Text("テキスト1")
            }
            Section(header: Text("ヘッダー2")) {
                Text("テキスト2")
            }
        }.listStyle(.plain)

NavigationViewはUINavigationControllerに似た機能を持ちます。

Navigationbarにタイトルを設定する。

Navigationbarの中央にタイトルを設定する場合は.inlineを指定する必要がありました。

NavigationView {
            Text("テキスト").navigationTitle("タイトル").navigationBarTitleDisplayMode(.inline)
                    }

NavigationBarにボタンを追加するには.navigationBarItemsが必要です。

Text("テキスト").navigationTitle("タイトル").navigationBarTitleDisplayMode(.inline)
                .navigationBarItems(trailing: Button("ボタン", action: {
                    //
                }))
                    }

TabViewはUITabBarControllerに似た機能を持ちます。

FirstViewとSecondViewと言う名前でSwiftUI用のViewを作成し TabViewで切り替えをしてみます。

タブの名称と画像は.tabitemで追加します。

TabView {
            FirstView()
                .tabItem {
                    Label("First", systemImage: "trash")
                }
            SecondView()
                .tabItem {
                    Label("Second", systemImage: "pencil")
                }
        }

NavigationLinkで画面遷移をしてみます。

NavigationView内にNavigationLinkを追加しないと動作しないため注意が必要です。

NavigationLinkのdestinationには遷移先、labelには中央に表示されるボタンの名前を追加します。

[Move To First View]ボタンをタップするとFirstViewが表示されました。