トグルスイッチでSF Symbol (アイコン)の切り替えを行ってみましょう。SF Symbolの表示はこちらの記事を参照ください。完成イメージはこちら。とても簡単なコードで書けちゃいます。
Toggle サンプルコード
「通知」を許可する／しないのトグルスイッチを作りました。トグルスイッチをタップすると見た目のON／OFFが変わります。これは内部的には、Bool型の変数「isBell」(4行目)の値がTRUE/FALSEの切り替えが行われていることになります。
Toggle 定義
「Toggle(isOn: $isBell)」(8行目)で、トグルスイッチが「ON状態」のとき、Bool型変数「isBell」のTRUEが定義されます。先に「isBell」は4行目に宣言されています。
トグルスイッチをタップすることで、「isBell」のTRUE /FALSEが切り替わります
SF Symbol 切り替え if-else文
17-25行目がSF Symbol切り替えのコードです。
if isBell {}で「isBell」がTRUEの時の処理を実行します。そしてelse {}で「isBell」がFALSEの時の処理を実行します。
if-else文はボタン(Button)の切り替えでも使っていました。こちらの記事も参照してみてください。
import SwiftUI
struct ContentView: View {
@State var isBell = true //Toggleで切り替えるBool型変数を定義
var body: some View {
HStack{
// Toggle定義(Start)
Toggle(isOn: $isBell) {
Text("通知")
.font(.largeTitle)
}
.fixedSize()
.padding(10)
// Toggle定義(End)
// SF Symbol切り替えif文(Start)
if isBell {
Image(systemName: "bell")
.font(.system(size: 40))
.foregroundColor(.red)
} else {
Image(systemName: "bell.slash")
.font(.system(size: 40))
.foregroundColor(.gray)
}
// SF Symbol切り替えif文(End)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
コメント