# SwiftUIメモ. コンポーネント. 入力系

# 入力系コンポーネント

# Component

  • Button
    • Button(action: { アクション }) { Text("ボタン名") }
    • Button("ボタン名") { アクション }
  • Toggle
    • On/Off ボタン
    • Toggle(isOn: $v) { Text("..") }
      • v という変数で受け取りたかったら、$v と書く
      • body { .. } の中では変数は代入できない
  • Stepper
    • +,- で数字を変えるやつ
    • Stepper(value: $v, in: 0...10) { Text("..") }
    • Stepper(onIncrement: { .. }, onDecrement: { .. }, label { Text("..") })
  • Slider
    • Slider(value: $v)
  • Picker
    • ブラウザとかでいうプルダウン
    • Picker(selection: $v, label: Text("..")) { Text("x").tag(n) }
    • x が表示、n が設定される値
    • TODO: 複数選択可?
  • SegmentedControl
    • Picker のスタイル違いであった
    • .pickerStyle(SegmentedPickerStyle())
  • DatePicker
    • DatePicker(selection: $v, label: { Text("日時") })
    • DatePicker(selection: $v, in: dateClosedRange, label: { Text("日時") })
      • dateClosedRange: ClosedRange<Date> = dStart ... dEnd
    • DatePicker(selection: $v, displayedComponents: .date, label: { Text("日付") }) : 日付だけ
    • DatePicker(selection: $v, displayedComponents: .hourAndMinute, label: { Text("時刻") }) : 時刻だけ
  • TextField
    • TextField("Placeholder", text: $v)

-Form

# Modifier

共通?

  • fixedSize() : ???
  • .opacity(1) : 0 で透明

イベント系

  • onAppear { .. }
  • onTapGesture { .. }

DatePicker で指定

  • .environment(\.locale, Locale(identifier: "ja_JP"))
  • .environment(\.calendar, Calendar(identifier: .japanese))

TextField で指定

  • .textFieldStyle(RoundedBorderTextFieldStyle())
  • .keyboardType(.numberPad)

# 変数を徐々に変更 - withAnimation

action: {
    withAnimation {
        x.toggle()
    }
}
  • withAnimation(.easInOut(duration: 2))
    • 2秒間で徐々に変化

Toggle のときに使うのは、中でどういう動きをしているんだろう

# 表示された時に初期値を設定 - onAppear

.onAppear(perform: {
    v = 'xx'
})

# 設定画面系画面を作る - Form

NavigationView {
    Form {
        Picker() ...
    }
}

こうしておくと、Picker が 高さを取らないで1行分になる

[ 📩 ご意見 ]