SwiftUI一起学之十三 -- Toggle开关的使用

一 学习目标

学习用Toggle的组件的使用

二 学习效果

系统切换语言后,app自动显示当前系统语言下的文字

image.png

一 Toggle开关的使用

image.png

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

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

Toggle("音量开关", isOn: $isSoundOn)

标签隐藏

Toggle("音量开关", isOn: $isSoundOn).labelsHidden()

默认的Toggle布局是左右布局铺满

image.png

自定义布局

image.png

VStack {
    Text("音量开关")
    Toggle("Sound", isOn: $isSoundOn).labelsHidden()
}.padding()

二 Toggle事件监听

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("------- 播报 ")
       } else {
           print("------- 不播报 ")
       }
      })

三 全部代码

//
//  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("音量开关")
            }
            
            Image(systemName: isSoundOn ? "speaker.1.fill" : "speaker.slash.fill")
                .font(.system(size: 56))
                .padding()
            
            Toggle("音量开关", isOn: $isSoundOn)
            VStack {
                Text("音量开关")
                Toggle("Sound", isOn: $isSoundOn).labelsHidden()
            }.padding()
            
            // 音量开关事件监听(1)
            Toggle("音量开关", isOn: $isSoundOn).onChange(of: isSoundOn, perform: { value in
                if value {
                    print("------- 开启音量开关 ")
                } else {
                    print("------- 关闭音量开关 ")
                }
            })
            
            // 音量开关事件监听(2)
            Toggle("音量开关", isOn: $isSoundOn.didSet { (value) in
                   if value {
                       print("------- 开启音量开关 ")
                   } else {
                       print("------- 关闭音量开关 ")
                   }
                  })
            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使用