オン・オフの切り替えスイッチを作るには Toggle(トグル) を使います。
書き方は次の通りです。
// 書き方パターン1
Toggle(isOn: $isToggleOn) {
// ラベルとなるViewを記述
Text("Toggle Switch")
}
// 書き方パターン2
Toggle("Toggle Switch", isOn: $isToggleOn)
isToggleOnの値がtrueになるとスイッチがONの状態に、falseになるとOFFの状態になります。
目次
サンプルコード
struct ContentView: View {
// トグルの状態を管理するためのプロパティ
@State private var isToggleOn = false
var body: some View {
// 垂直方向のスタック(VStack)を作成
VStack {
// トグルスイッチを表示
Toggle("Toggle Switch", isOn: $isToggleOn)
.padding() // 余白を追加
// トグルの状態に応じて表示されるテキスト
Text("\(isToggleOn ? "ON" : "OFF")")
.padding() // 余白を追加
// トグルとテキストを画面の上に寄せる
Spacer()
}
}
}
![](https://seeds-digital.com/wp-content/uploads/2023/11/6d3124334b298e6d052f79906e2da68c.png)
![](https://seeds-digital.com/wp-content/uploads/2023/11/3578d03e2690a98d23ce0d0b3dae498d.png)
テキストとトグルの間のスペースを埋めるには?
fixedSizeモディファイアをつけることで、テキストとトグルの間のスペースがなくなり真ん中に寄ります。
Toggle("Toggle Switch", isOn: $isToggleOn)
.fixedSize()
![](https://seeds-digital.com/wp-content/uploads/2023/11/3bfa63563d32126f8989165b12a3ff61.png)
Comment