一 学习目标
学习用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)
}
)
}
}
参考:
