当 swiftUItoggle() 切换时如何触发操作？

Question

在我的 SwiftUI 视图中，当 Toggle() 更改其状态时，我必须触发一个操作。切换本身只需要一个绑定。因此，我尝试触发 @State 变量的 didSet 中的操作。但 didSet 永远不会被调用。

是否有任何（其他）方式来触发操作？或者有什么方法可以观察@State变量的值变化？

我的代码如下所示：

struct PWSDetailView : View {

    @ObjectBinding var station: PWS
    @State var isDisplayed: Bool = false {
        didSet {
            if isDisplayed != station.isDisplayed {
                PWSStore.shared.toggleIsDisplayed(station)
            }
        }
    }

    var body: some View {
            VStack {
                ZStack(alignment: .leading) {
                    Rectangle()
                        .frame(width: UIScreen.main.bounds.width, height: 50)
                        .foregroundColor(Color.lokalZeroBlue)
                    Text(station.displayName)
                        .font(.title)
                        .foregroundColor(Color.white)
                        .padding(.leading)
                }

                MapView(latitude: station.latitude, longitude: station.longitude, span: 0.05)
                    .frame(height: UIScreen.main.bounds.height / 3)
                    .padding(.top, -8)

                Form {
                    Toggle(isOn: $isDisplayed)
                    { Text("Wetterstation anzeigen") }
                }

                Spacer()
            }.colorScheme(.dark)
    }
}

期望的行为是当 Toggle() 更改其状态时触发操作“PWSStore.shared.toggleIsDisplayed(station)”。

Answer 1

iOS 17+

在 iOS 17

onChange

中，单个参数已被弃用 - 相反，我们应该：

使用
onChange
和两个或零参数的动作闭包来代替。

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

我们还可以设置

initial

参数来指定是否应在视图最初出现时运行操作。

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

iOS 14+

如果您使用的是 iOS 14 及更高版本，则可以使用

onChange

:

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

Answer 2

这是一个不使用tapGesture的版本。

@State private var isDisplayed = false
Toggle("", isOn: $isDisplayed)
   .onReceive([self.isDisplayed].publisher.first()) { (value) in
        print("New value is: \(value)")           
   }

Answer 3

iOS13+

这是一种更通用的方法，您可以应用于任何

Binding

，几乎所有内置

View

，例如选取器、文本字段、切换..

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

而且用法很简单；

@State var isOn: Bool = false
Toggle("Title", isOn: $isOn.didSet { (state) in
   print(state)
})

iOS14+

@State private var isOn = false

var body: some View {
    Toggle("Title", isOn: $isOn)
        .onChange(of: isOn) { _isOn in
            /// use _isOn here..
        }
}

Answer 4

我认为最干净的方法是使用自定义绑定。这样，您就可以完全控制何时实际切换开关

import SwiftUI

struct ToggleDemo: View {
    @State private var isToggled = false

    var body: some View {

        let binding = Binding(
            get: { self.isToggled },
            set: {
                potentialAsyncFunction($0)
            }
        )

        func potentialAsyncFunction(_ newState: Bool) {
            //something async
            self.isToggled = newState
        }

        return Toggle("My state", isOn: binding)
   }
}

Answer 5

我觉得还可以

struct ToggleModel {
    var isWifiOpen: Bool = true {
        willSet {
            print("wifi status will change")
        }
    }
}

struct ToggleDemo: View {
    @State var model = ToggleModel()

    var body: some View {
        Toggle(isOn: $model.isWifiOpen) {
            HStack {
                Image(systemName: "wifi")
                Text("wifi")
            }
       }.accentColor(.pink)
       .padding()
   }
}

Answer 6

这就是我的编码方式：

Toggle("Title", isOn: $isDisplayed)
.onReceive([self.isDisplayed].publisher.first()) { (value) in
    //Action code here
}

更新的代码（Xcode 12、iOS14）：

Toggle("Enabled", isOn: $isDisplayed.didSet { val in
        //Action here        
})

Answer 7

.init是Binding

的构造函数

@State var isDisplayed: Bool

Toggle("some text", isOn: .init(
    get: { isDisplayed },
    set: {
        isDisplayed = $0
        print("changed")
    }
))

Answer 8

我找到了一个更简单的解决方案，只需使用 onTapGesture:D

Toggle(isOn: $stateChange) {
  Text("...")
}
.onTapGesture {
  // Any actions here.
}

Answer 9

基于@Legolas Wang 的回答。

当您隐藏切换开关中的原始标签时，您可以仅将 TapGesture 附加到切换开关本身

HStack {
    Text("...")
    Spacer()
    Toggle("", isOn: $stateChange)
        .labelsHidden()
        .onTapGesture {
            // Any actions here.
        }
     }

Answer 10

class PWSStore : ObservableObject {
    ...
    var station: PWS
    @Published var isDisplayed = true {
        willSet {
            PWSStore.shared.toggleIsDisplayed(self.station)
        }
    }   
}

struct PWSDetailView : View {
    @ObservedObject var station = PWSStore.shared
    ...

    var body: some View {
        ...
        Toggle(isOn: $isDisplayed) { Text("Wetterstation anzeigen") }
        ...
    }   
}

此处演示 https://youtu.be/N8pL7uTjEFM

Answer 11

这是我的方法。我面临着同样的问题，但决定将 UIKit 的 UISwitch 包装到一个符合 UIViewRepresentable 的新类中。

import SwiftUI

final class UIToggle: UIViewRepresentable {

    @Binding var isOn: Bool
    var changedAction: (Bool) -> Void

    init(isOn: Binding<Bool>, changedAction: @escaping (Bool) -> Void) {
        self._isOn = isOn
        self.changedAction = changedAction
    }

    func makeUIView(context: Context) -> UISwitch {
        let uiSwitch = UISwitch()
        return uiSwitch
    }

    func updateUIView(_ uiView: UISwitch, context: Context) {
        uiView.isOn = isOn
        uiView.addTarget(self, action: #selector(switchHasChanged(_:)), for: .valueChanged)

    }

    @objc func switchHasChanged(_ sender: UISwitch) {
        self.isOn = sender.isOn
        changedAction(sender.isOn)
    }
}

然后像这样使用：

struct PWSDetailView : View {
    @State var isDisplayed: Bool = false
    @ObservedObject var station: PWS
    ...

    var body: some View {
        ...

        UIToggle(isOn: $isDisplayed) { isOn in
            //Do something here with the bool if you want
            //or use "_ in" instead, e.g.
            if isOn != station.isDisplayed {
                PWSStore.shared.toggleIsDisplayed(station)
            }
        }
        ...
    }   
}

Answer 12

我使用did set来监控切换值

和

使用通用子视图

import SwiftUI
    
    
    
    class ViewModel : ObservableObject{
        
        @Published var isDarkMode = false{
            
            didSet{
                
                print("isDarkMode \(isDarkMode)")
            }
        }
        
        @Published var isShareMode = false{
            
            didSet{
                
                print("isShareMode \(isShareMode)")
            }
        }
        
        @Published var isRubberMode = false{
            
            didSet{
                
                print("isRubberMode \(isRubberMode)")
            }
        }
        
        
    }
    
    
    
    struct ToggleDemo: View {
        
        @StateObject var vm = ViewModel()
        
        
        var body: some View {
            
            VStack{
                
                VStack{
    
                    ToggleSubView(mode: $vm.isDarkMode, pictureName: "moon.circle.fill")
                  ToggleSubView(mode: $vm.isShareMode, pictureName: "square.and.arrow.up.on.square")
                   ToggleSubView(mode: $vm.isRubberMode, pictureName: "eraser.fill")
                }
            
            
                Spacer()
                
            
            }
            
            .background(vm.isDarkMode ? Color.black : Color.white)
        }
    }
    
    struct ToggleDemo_Previews: PreviewProvider {
        static var previews: some View {
            ToggleDemo()
        }
    }
    
    
    struct ToggleSubView : View{
        
        @Binding var mode : Bool
        
        var pictureName : String
        
        var body : some View{
            
            
            Toggle(isOn: $mode) {
                Image(systemName: pictureName)
            }
            .padding(.horizontal)
            .frame(height:44)
            .background(Color(.systemGroupedBackground))
            .cornerRadius(10)
        
            .padding()
            
        }
    }

Answer 13

首先，你真的知道

station.isDisplayed

的额外KVO通知是一个问题吗？您遇到性能问题吗？如果没有，那就不用担心。

如果您遇到性能问题，并且已确定这些问题是由于过多的

station.isDisplayed

KVO 通知造成的，那么接下来要尝试的就是消除不需要的 KVO 通知。您可以通过切换到手动 KVO 通知来做到这一点。

将此方法添加到

station

的类定义中：

@objc class var automaticallyNotifiesObserversOfIsDisplayed: Bool { return false }

并使用 Swift 的

willSet

和

didSet

观察者手动通知 KVO 观察者，但前提是值发生变化：

@objc dynamic var isDisplayed = false {
    willSet {
        if isDisplayed != newValue { willChangeValue(for: \.isDisplayed) }
    }
    didSet {
        if isDisplayed != oldValue { didChangeValue(for: \.isDisplayed) }
    }
}

Answer 14

你可以尝试这个（这是一个解决方法）：

@State var isChecked: Bool = true
@State var index: Int = 0
Toggle(isOn: self.$isChecked) {
        Text("This is a Switch")
        if (self.isChecked) {
            Text("\(self.toggleAction(state: "Checked", index: index))")
        } else {
            CustomAlertView()
            Text("\(self.toggleAction(state: "Unchecked", index: index))")
        }
    }

在其下方，创建一个如下所示的函数：

func toggleAction(state: String, index: Int) -> String {
    print("The switch no. \(index) is \(state)")
    return ""
}

Answer 15

这是我编写的一个方便的扩展，用于在按下切换按钮时触发回调。与许多其他解决方案不同，这实际上仅在切换切换时才会触发，而不是在初始化时触发，这对于我的用例来说很重要。这模仿了类似的 SwiftUI 初始化器，例如 onCommit 的 TextField。

用途：

Toggle("My Toggle", isOn: $isOn, onToggled: { value in
    print(value)
})

扩展：

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

extension Toggle where Label == Text {

    /// Creates a toggle that generates its label from a localized string key.
    ///
    /// This initializer creates a ``Text`` view on your behalf, and treats the
    /// localized key similar to ``Text/init(_:tableName:bundle:comment:)``. See
    /// `Text` for more information about localizing strings.
    ///
    /// To initialize a toggle with a string variable, use
    /// ``Toggle/init(_:isOn:)-2qurm`` instead.
    ///
    /// - Parameters:
    ///   - titleKey: The key for the toggle's localized title, that describes
    ///     the purpose of the toggle.
    ///   - isOn: A binding to a property that indicates whether the toggle is
    ///    on or off.
    ///   - onToggled: A closure that is called whenver the toggle is switched.
    ///    Will not be called on init.
    public init(_ titleKey: LocalizedStringKey, isOn: Binding<Bool>, onToggled: @escaping (Bool) -> Void) {
        self.init(titleKey, isOn: isOn.didSet(execute: { value in onToggled(value) }))
    }

    /// Creates a toggle that generates its label from a string.
    ///
    /// This initializer creates a ``Text`` view on your behalf, and treats the
    /// title similar to ``Text/init(_:)-9d1g4``. See `Text` for more
    /// information about localizing strings.
    ///
    /// To initialize a toggle with a localized string key, use
    /// ``Toggle/init(_:isOn:)-8qx3l`` instead.
    ///
    /// - Parameters:
    ///   - title: A string that describes the purpose of the toggle.
    ///   - isOn: A binding to a property that indicates whether the toggle is
    ///    on or off.
    ///   - onToggled: A closure that is called whenver the toggle is switched.
    ///    Will not be called on init.
    public init<S>(_ title: S, isOn: Binding<Bool>, onToggled: @escaping (Bool) -> Void) where S: StringProtocol {
        self.init(title, isOn: isOn.didSet(execute: { value in onToggled(value) }))
    }
}

Answer 16

适用于 Xcode 13.4

import SwiftUI

struct ToggleBootCamp: View {
    @State var isOn: Bool = true
    @State var status: String = "ON"
    
    var body: some View {
        NavigationView {
            VStack {
                Toggle("Switch", isOn: $isOn)
                    .onChange(of: isOn, perform: {
                        _isOn in
                        // Your code here...
                        status = _isOn ? "ON" : "OFF"
                    })
                Spacer()
            }.padding()
            .navigationTitle("Toggle switch is: \(status)")
        }
    }
}

Answer 17

以防万一您不想使用额外的功能，弄乱结构 - 使用状态并在任何您想要的地方使用它。我知道这不是事件触发的 100% 答案，但是，状态将以最简单的方式保存和使用。

struct PWSDetailView : View {


@State private var isToggle1  = false
@State private var isToggle2  = false

var body: some View {

    ZStack{

        List {
            Button(action: {
                print("\(self.isToggle1)")
                print("\(self.isToggle2)")

            }){
                Text("Settings")
                    .padding(10)
            }

                HStack {

                   Toggle(isOn: $isToggle1){
                      Text("Music")
                   }
                 }

                HStack {

                   Toggle(isOn: $isToggle1){
                      Text("Music")
                   }
                 }
        }
    }
}
}

Answer 18

低于 iOS 14：

绑定扩展

with Equatable check

public extension Binding {
    func onChange(_ handler: @escaping (Value) -> Void) -> Binding<Value> where Value: Equatable {
        Binding(
            get: { self.wrappedValue },
            set: { newValue in
                if self.wrappedValue != newValue { // equal check
                    self.wrappedValue = newValue
                    handler(newValue)
                }
            }
        )
    }
}

用途：

Toggle(isOn: $pin.onChange(pinChanged(_:))) {
    Text("Equatable Value")
}

func pinChanged(_ pin: Bool) {

}

Answer 19

在顶部添加一个透明矩形，然后：

ZStack{
            
            Toggle(isOn: self.$isSelected, label: {})
            Rectangle().fill(Color.white.opacity(0.1))
            
        }
        .contentShape(Rectangle())
        .onTapGesture(perform: {
            
            self.isSelected.toggle()
            
        })

Answer 20

适用于 XCode 12

import SwiftUI

struct ToggleView: View {
    
    @State var isActive: Bool = false
    
    var body: some View {
        Toggle(isOn: $isActive) { Text(isActive ? "Active" : "InActive") }
            .padding()
            .toggleStyle(SwitchToggleStyle(tint: .accentColor))
    }
}

当 swiftUItoggle() 切换时如何触发操作？

问题描述投票：0回答：20

20个回答

iOS 17+

iOS 14+

iOS13+

iOS14+

最新问题

当 swiftUItoggle() 切换时如何触发操作？

问题描述 投票：0回答：20

20个回答

iOS 17+

iOS 14+

iOS13+

iOS14+

最新问题

问题描述投票：0回答：20