SwiftUI3.0的Toggle组件的使用,相当于UISwitch控件
作者:互联网
//
// ContentView.swift
// ToggleControl
//
// Created by lujun on 2021/12/19.
//
import SwiftUI
struct ContentView: View {
var body: some View {
toggleControl
}
@State private var toggleSwitchState: Bool = false
var toggleControl: some View {
VStack(spacing: 40) {
Text("Toggle's Status is \(toggleSwitchState ? " ON" : "OFF")")
Toggle("Vibrate On Ring",isOn: $toggleSwitchState)
.background(Color.orange)
Toggle("",isOn: $toggleSwitchState)
.background(Color.purple)
Toggle(isOn: $toggleSwitchState) {
VStack{
Color.blue
.frame(width: 100, height: 100)
.cornerRadius(20)
Text("Demo 123 21321")
}
}
.background(Color.red)
}
// .labelsHidden()
.toggleStyle(SwitchToggleStyle())
// .toggleStyle(DefaultToggleStyle())
// .toggleStyle(RedBorderedToggleStyle())
// .toggleStyle(SwitchToggleStyle(tint: Color.blue))
// .toggleStyle(SystemToggleStyle(tint: .orange))
// .toggleStyle(CheckboxToggleStyle())
}
struct RedBorderedToggleStyle: ToggleStyle {
func makeBody(configuration: Configuration) -> some View {
Toggle(configuration)
.border(Color.red)
}
}
struct SystemToggleStyle: ToggleStyle {
let tint: Color
func makeBody(configuration: Configuration) -> some View {
HStack {
configuration.label
Spacer()
Button{
configuration.isOn.toggle()
} label: {
ToggleContentView(isOn: configuration.isOn,tint: tint)
}
}
.padding(.horizontal,2)
}
}
struct ToggleContentView: View {
let isOn: Bool
let tint: Color
var body: some View{
RoundedRectangle(cornerRadius: 20)
.frame(width: 56, height: 30)
.foregroundColor(isOn ? tint : .secondary)
.overlay(
Circle()
.foregroundColor(Color.white)
.frame(width: 26)
.padding(2),
alignment: isOn ? .trailing : .leading
)
.animation(.linear(duration: 0.25))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
标签:控件,tint,Color,SwiftUI3.0,some,isOn,Toggle,View 来源: https://www.cnblogs.com/Johnson-Swift/p/15770625.html