【SwiftUI】Toggleの使い方

ON/OFF状態を切り替えるToggleの使い方を解説します。

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6

基本的なイニシャライザは次の通りです。

Toggle(isOn: $flag) {

// ラベルとなるViewを記述

}

引数isOnに状態を表すBool型のプロパティを指定します。
このプロパティは値が変更できるように@State等で宣言しておきます。
頭に$が付いているのは、プロパティの参照を渡して、Toggle()が値を更新可能にする意味があります。

ラベルが文字列のみ場合は、次のようなイニシャライザも使用可能です。

Toggle("ラベル", isOn : $flag)

状態の変更に合わせてラベルの表示が変わる例です。

struct ContentView: View {

@State private var flag = true

var body: some View {

Form {

Toggle(isOn: $flag) {

Text(flag ? "ON" : "OFF")

}

Toggleの標準ラベルはレイアウトの柔軟性に乏しいので、自由にラベルを配置したい場合は、.labelsHidden()モディファイアを使って、標準ラベルを非表示にすると良いです。

こちらは、ラベルをToggleの上部に表示させる例です。

struct ContentView: View {

@State private var flag = true

var body: some View {

VStack {

Text(flag ? "ON" : "OFF")

Toggle("", isOn: $flag)

.labelsHidden()

}