其他分享
首页 > 其他分享> > SwiftUI3.0的Toggle组件的使用,相当于UISwitch控件

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