SwiftUI | Toggleの使用方法

View

2024.11.152024.05.29

SwiftUIのToggleの使用方法を説明する。

結論

Toggle(“表示させたい文字列”, isOn : $連動させたい変数)と記述する。$は参照を示す。

Toggle("表示させたい文字列", isOn : $連動させたい変数)

一例を示す。

連動させたい変数を定義する。
Toggleを配置する。
連動させたい変数を表示する。

import SwiftUI

struct ContentView: View {
    @State private var 連動させたい変数 = false                // 1
    var body: some View {
        Toggle("表示させたい文字列", isOn : $連動させたい変数)    // 2
            .padding()
        Text(String(連動させたい変数))                         // 3
        Spacer()
    }
}

使用例

ゲームで使えそうな例を示す。キャラの装備を全て外したいときに使える。

import SwiftUI

struct ContentView: View {
    @State private var そうび無し = true
    var equipment: String {
        if そうび無し {
            return ""
        } else {
            return "E"
        }
    }
    let baseWidth: CGFloat = 250
    let baseHeight: CGFloat = 300

    var body: some View {
        Spacer()
        RoundedRectangle(cornerRadius: 10)
            .frame(width:baseWidth, height: baseHeight)
            .foregroundColor(.black)
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .frame(width: baseWidth - 10, height: baseHeight - 10)
                    .foregroundColor(.white)
            )
            .overlay(
                Rectangle()
                    .frame(width: baseWidth - 20, height: 3)
                    .foregroundColor(.black)
                    .offset(y: -100)
            )
            .overlay(
                VStack(alignment: .leading) {
                    Text("いしかわ りか")
                        .padding()
                    HStack {
                        Text(equipment)
                            .frame(width: baseWidth * 0.2)
                        Text("うさみみバンド")
                            .frame(width: baseWidth * 0.6, alignment: .leading)
                    }
                    HStack {
                        Text(equipment)
                            .frame(width: baseWidth * 0.2)
                        Text("バニースーツ")
                            .frame(width: baseWidth * 0.6, alignment: .leading)
                    }
                    HStack {
                        Text(equipment)
                            .frame(width: baseWidth * 0.2)
                        Text("あみタイツ")
                            .frame(width: baseWidth * 0.6, alignment: .leading)
                    }
                    Spacer()
                }
            )
        Toggle("そうびを全て外す", isOn : $そうび無し)
            .padding()
            .frame(width:baseWidth)
        Spacer()
    }
}

リンク