【從零開始學 SwiftUI 程式設計】Toggle 切換開關元件

【從零開始學 SwiftUI 程式設計】線上免費講義課程目錄

Toggle 基本用法

struct ContentView: View {
    @State private var isSwitchOn = false
    var body: some View {
        VStack(alignment: .center, spacing: nil, content: {
            Text(String(isSwitchOn))
                .font(.largeTitle)
            
            Toggle("電燈開關", isOn: $isSwitchOn)
                .labelsHidden()
                .padding()
        })
    }
}

預覽畫面

Toggle 實戰應用：單一電燈開關

struct ContentView: View {
    @State private var isSwitchOn = false
    var body: some View {
        VStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: nil, content: {
            Image(systemName: "lightbulb.fill")
                .font(.system(size: 300))
                .foregroundColor(isSwitchOn ? .yellow:.black )
            
            Text(isSwitchOn ?"電燈：開":"電燈：關")
                .font(.largeTitle)
            
            Toggle("電燈開關", isOn: $isSwitchOn)
                .labelsHidden()
                .padding()
        })
    }
}

預覽畫面

多個電燈開關

struct ContentView: View {
    @State private var isLeftSwitchOn = false
    @State private var isRightSwitchOn = false
    
    var body: some View {
        VStack{
            HStack{
                Spacer()
                VStack{
                    Image(systemName: "lightbulb.fill")
                        .font(.system(size: 100))
                        .foregroundColor(isLeftSwitchOn ? .yellow:.black )
                    
                    Text(isLeftSwitchOn ?"電燈：開":"電燈：關")
                        .font(.title)
                    
                    Toggle("電燈開關", isOn: $isLeftSwitchOn)
                        .labelsHidden()
                        .padding()
                }
                Spacer()
                VStack{
                    Image(systemName: "lightbulb.fill")
                        .font(.system(size: 100))
                        .foregroundColor(isRightSwitchOn ? .yellow:.black )
                    
                    Text(isRightSwitchOn ?"電燈：開":"電燈：關")
                        .font(.title)
                    
                    Toggle("電燈開關", isOn: $isRightSwitchOn)
                        .labelsHidden()
                        .padding()
                }
                Spacer()
            }
        }
    }
}

預覽畫面

參考資料

Apple Developer - toggle
https://developer.apple.com/documentation/swiftui/toggle

---

那這次的課程就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這套課程分享給更多人喔。

我們下次再見囉！！！掰掰～