一 學(xué)習(xí)目標(biāo)

學(xué)習(xí)用Toggle的組件的使用

二 學(xué)習(xí)效果

系統(tǒng)切換語言后,app自動顯示當(dāng)前系統(tǒng)語言下的文字

image.png

一 Toggle開關(guān)的使用

image.png

struct ToggleUIView: View {
    @State var isSoundOn: Bool = true
        
    var body: some View {
        VStack {
            Toggle(isOn: $isSoundOn) {
                Text("音量開關(guān)")
            }
            
            Image(systemName: isSoundOn ? "speaker.1.fill" : "speaker.slash.fill")
                .font(.system(size: 56))
                .padding()
            
            Spacer()
        }.padding()
    }
}

如果Toggle只含有一個文字,可以用以下方式初始化

Toggle("音量開關(guān)", isOn: $isSoundOn)

標(biāo)簽隱藏

Toggle("音量開關(guān)", isOn: $isSoundOn).labelsHidden()

默認(rèn)的Toggle布局是左右布局鋪滿

image.png

自定義布局

image.png

VStack {
    Text("音量開關(guān)")
    Toggle("Sound", isOn: $isSoundOn).labelsHidden()
}.padding()

二 Toggle事件監(jiān)聽

ios14+ 版本

直接使用onChange事件

struct ContentView: View {
    @State private var isDisplayed = false
    
    var body: some View {
        Toggle("", isOn: $isDisplayed)
            .onChange(of: isDisplayed) { value in
                print(value)
            }
    }
}

ios13+ 版本

定義視圖didSet的事件綁定

extension Binding {
    func didSet(execute: @escaping (Value) -> Void) -> Binding {
        return Binding(
            get: { self.wrappedValue },
            set: {
                self.wrappedValue = $0
                execute($0)
            }
        )
    }
}

Toggle("", isOn: $isVoiceOpen.didSet { (value) in
       if value {
           print("------- 播報(bào) ")
       } else {
           print("------- 不播報(bào) ")
       }
      })

三 全部代碼

//
//  ToggleUIView.swift
//  SwiftUiDemo
//
//  Created by sunny on 2021/8/2.
//

import SwiftUI

struct ToggleUIView: View {
    @State var isSoundOn: Bool = true
        
    var body: some View {
        VStack {
            Toggle(isOn: $isSoundOn) {
                Text("音量開關(guān)")
            }
            
            Image(systemName: isSoundOn ? "speaker.1.fill" : "speaker.slash.fill")
                .font(.system(size: 56))
                .padding()
            
            Toggle("音量開關(guān)", isOn: $isSoundOn)
            VStack {
                Text("音量開關(guān)")
                Toggle("Sound", isOn: $isSoundOn).labelsHidden()
            }.padding()
            
            // 音量開關(guān)事件監(jiān)聽(1)
            Toggle("音量開關(guān)", isOn: $isSoundOn).onChange(of: isSoundOn, perform: { value in
                if value {
                    print("------- 開啟音量開關(guān) ")
                } else {
                    print("------- 關(guān)閉音量開關(guān) ")
                }
            })
            
            // 音量開關(guān)事件監(jiān)聽(2)
            Toggle("音量開關(guān)", isOn: $isSoundOn.didSet { (value) in
                   if value {
                       print("------- 開啟音量開關(guān) ")
                   } else {
                       print("------- 關(guān)閉音量開關(guān) ")
                   }
                  })
            Spacer()
        }.padding()
    }
}

struct ToggleUIView_Previews: PreviewProvider {
    static var previews: some View {
        ToggleUIView()
    }
}


extension Binding {
    func didSet(execute: @escaping (Value) -> Void) -> Binding {
        return Binding(
            get: { self.wrappedValue },
            set: {
                self.wrappedValue = $0
                execute($0)
            }
        )
    }
}

參考:

1. swifuui中的toggle使用