SwiftUI: Unable to update the toggle component - swiftui

Question

I have a state the decides if we need to do round up or down or nothing:
enum RoundingType: Codable {
case up
case down
}
struct ViewState {
var roundingType: RoundingType? = nil
}
Then in the toggle I simply update this flag:
#MainActor
class ViewModel: ObservableObject {
#Published var state: ViewState
func toggleRoundingType(_ roundingType: RoundingType) {
let oldRoundingType = state.roundingType
// if same rounding type, cancel it
// Otherwise, set it
let isCancel = oldRoundingType == roundingType
if isCancel {
state.roundingType = nil
} else {
state.roundingType = roundingType
}
}
}
This is my View:
struct HomeView: View {
#StateObject var viewModel: ViewModel
var body: some View {
let state = viewModel.state
HStack {
Spacer()
SUITextToggle(label: loc(.roundUp), isOn: state.roundingType == .up) { _ in
viewModel.toggleRoundingType(.up)
}
Spacer()
SUITextToggle(label: loc(.roundDown), isOn: state.roundingType == .down) { _ in
viewModel.toggleRoundingType(.down)
}
Spacer()
}
}
}
This view renders 2 toggles, and user can turn on/off the round up/down toggles.
This is my toggle implementation:
public struct SUITextToggle: View {
#State var isOn: Bool
private var binding: Binding<Bool> {
Binding<Bool> {
return isOn
} set: { newValue in
isOn = newValue
onChange(newValue)
}
}
let label: String
let onChange: (Bool) -> Void
init(label: String, isOn: Bool, onChange: #escaping (Bool) -> Void) {
self.label = label
self.isOn = isOn
self.onChange = onChange
}
public var body: some View {
Toggle(label, isOn: binding)
.toggleStyle(.button)
}
}
Now I have an issue that when I turn on "Up", then turn on "Down", the "Up" button is not automatically turned off. For some reason the "Up" button is not refreshed.
EDIT:
minimal reproducible example:
import SwiftUI
import UIKit
public struct SUITextToggle: View {
#State var isOn: Bool
private var binding: Binding<Bool> {
Binding<Bool> {
return isOn
} set: { newValue in
isOn = newValue
onChange(newValue)
}
}
let label: String
let onChange: (Bool) -> Void
init(label: String, isOn: Bool, onChange: #escaping (Bool) -> Void) {
self.label = label
self.isOn = isOn
self.onChange = onChange
}
public var body: some View {
Toggle(label, isOn: binding)
.toggleStyle(.button)
}
}
struct HomeView: View {
#State var isOn: Bool = true
var body: some View {
// Only one of these 2 toggles should be on
SUITextToggle(label: "Toggle 1", isOn: isOn) { _ in
isOn = !isOn
}
SUITextToggle(label: "Toggle 2", isOn: !isOn) { _ in
isOn = !isOn
}
}
}
class ViewController: UIViewController {
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let hostingVC = UIHostingController(rootView: HomeView())
present(hostingVC, animated: true, completion: nil)
}
}

Answer 1

The issue is that there is no two-way communication that is compatible with SwiftUI. You communicate one-way on init and then use the completion handler. That does not tell the other toggle to re-render.
I made some changes to make it more SwiftUI.
import SwiftUI
enum RoundingType: String, Codable, CaseIterable, CustomStringConvertible, Identifiable {
case up
case down
//Set the description here
var description: String{
"round\(rawValue)"
}
//Make the enum Identifiable
var id: String{
rawValue
}
}
//No changes
struct ViewState {
var roundingType: RoundingType? = nil
}
#MainActor
class HomeViewModel: ObservableObject {
//Set a default value. Missing from code
#Published var state: ViewState = .init(roundingType: .up)
//Remove func
}
#available(iOS 15.0, *)
struct ToggleHomeView: View {
#StateObject var viewModel: HomeViewModel = .init()
var body: some View {
HStack {
Spacer()
//Iterate through all the options and provide a toggle for each option
ForEach(RoundingType.allCases){ type in
SUITextToggle(selectedType: $viewModel.state.roundingType, toggleType: type, label: type.description)
Spacer()
}
}
}
}
#available(iOS 15.0, *)
struct ToggleHomeView_Previews: PreviewProvider {
static var previews: some View {
ToggleHomeView()
}
}
#available(iOS 15.0, *)
public struct SUITextToggle: View {
//Bindng is a two-way connection
#Binding var selectedType: RoundingType?
///type that toggle represents
let toggleType: RoundingType
///proxy that uses the selectedType and toggleType to set toggle to on/off if the two variables are the same
private var binding: Binding<Bool> {
Binding<Bool> {
return selectedType == toggleType
} set: { newValue in
if newValue{
selectedType = toggleType
}else{
//if you remove the nil set a default value here
selectedType = nil
}
}
}
let label: String
public var body: some View {
Toggle(label, isOn: binding)
.toggleStyle(.button)
}
}
But you can preserve most of your code if you remove the #State. This wrapper is meant to preserve its value through body's re-rendering.
#available(iOS 15.0, *)
public struct SUITextToggle: View {
var isOn: Bool
private var binding: Binding<Bool> {
Binding<Bool> {
return isOn
} set: { newValue in
onChange(newValue)
}
}
let label: String
let onChange: (Bool) -> Void
init(label: String, isOn: Bool, onChange: #escaping (Bool) -> Void) {
self.label = label
self.isOn = isOn
self.onChange = onChange
}
public var body: some View {
Toggle(label, isOn: binding)
.toggleStyle(.button)
}
}
Another "hack" that is out there is to force Views to recreate by setting the id but this causes unnecessary rendering. Efficiency issues as your app grows will become noticeable
#available(iOS 15.0, *)
struct ToggleHomeView: View {
#StateObject var viewModel: HomeViewModel = .init()
var body: some View {
let state = viewModel.state
HStack {
Spacer()
SUITextToggle(label: "roundUp", isOn: state.roundingType == .up) { _ in
viewModel.toggleRoundingType(.up)
}
Spacer()
SUITextToggle(label: "roundDown", isOn: state.roundingType == .down) { _ in
viewModel.toggleRoundingType(.down)
}
Spacer()
}.id(state.roundingType)
}
}