Button handling in SwiftUI

Question

In a SwiftUI app I have a few buttons (let us say 3 as an example). One of them is highlighted.

When I tap on a non-highlighted button, the previously highlighted button toggles to non-highlighted and the tapped button becomes highlighted. If I tap the already highlighted button, nothing happens.

This scenario is simple and I have a highlighBtn variable, when a button is tapped highlighBtn takes the value of the tapped button. This variable is then used when the next tap happens to toggle off the previously highlighted button.

This cycle is OK, but the problem is when I do the first tap. For some reasons, things don't work.

This is how I handle the creation of the highlighBtn variable:

class ActiveButton: ObservableObject {
    @Published var highlighBtn = Button(....)
}

@StateObject var box = ActiveButton()

Here is the relevant code, when the button is tapped:

@EnvironmentObject var box: ActiveButton
....
Button(action: {
    // Toggle off the previously highlighted button.
    box.highlighBtn.highLight = false
    .... some useful processing ....
    box.highlighBtn = self
})

One detail I should give: if I tap the highlighted button to start, then all works as it should.

I have tried various method to solve this apparently simple problem but failed.

The first method was to try to initialize the highlighBtn variable. The second was to try to simulate a tap on the highlighted button.

I must be missing something simple. Any tip would be welcome.

After further investigation .....

I have created a demo app to expose my problem. Since I lack practice using GitHub, it took me some time, but it is now available here.

For that I created a SwiftUI app in Xcode.

In SceneDelegate.swift, the four lines of code right after this one have been customized for the needs of this app:

// Create the SwiftUI view that provides the window contents.

Beside that all I did resides inside the file ContentView.swift.

To save some time to anyone who is going to take a look; here is the way to get to the point (i.e. the issue I am facing).

1. Run the app (I did it on an iPhone 7). You will see seven buttons appear. One of them (at random) will be highlighted. Starting with the highlighted button, tap on a few buttons one after another as many times as you want. You will see how the app is supposed to work.

2. (After switching it off) Run the app a second time. This time you will also tap on a few buttons one after another as many times as you want; but start by tapping one of the non-highlighted button. You will see the problem appear at this point.

Answer 1

Here is a solution for the first part of your question: Three buttons where the last one tapped gets highlighted with a background:

import SwiftUI

struct ContentView: View {

    enum HighlightTag {
        case none, first, second, third
    }

    @State private var highlighted = HighlightTag.none

    var body: some View {
        VStack {
            Button("First") {
                highlighted = .first
            }.background(
                Color.accentColor.opacity(
                    highlighted == .first ? 0.2 : 0.0
                )
            )
            Button("Second") {
                highlighted = .second
            }.background(
                Color.accentColor.opacity(
                    highlighted == .second ? 0.2 : 0.0
                )
            )
            Button("Third") {
                highlighted = .third
            }.background(
                Color.accentColor.opacity(
                    highlighted == .third ? 0.2 : 0.0
                )
            )
        }
    }
}

Update: After reviewing your sample code on GitHub, I tried to understand your code, I tried to make some simplifications and tried to find a working solution.

Here are some opinions:

• The Attribute "@State" in front of "var butnsPool" is not needed and confusing.
• The Attribute "@State" in front of "var initialHilight" is not needed and confusing.
• Your ActiveButton stores a copy of the selected Button View because it is a struct which is probably the main reason for the strange behaviour.
• The needInit in your ObservableObject smells bad at least. If you really need to initialize something, you may consider doing it with some .onAppear() modifier in you ContentView.
• There is probably no need to use .environmentObject and @EnvironmentObject. You could consider using a parameter and @ObsservedObject
• There is probably no need for the ActiveButton at all, if you only use it internally. You could consider using a @State with the selected utton name
• Your BtnTxtView is fine, but consider replacing the conditional (func if) with some animatable properties, if you want to animate the transition.

Based on your code I created a much simpler and working solution.

I removed the ActiveButton class and also the BttnView struct. And I replaced the ContentView with this:

struct ContentView: View {
    var butnsPool: [String]
    var initialHilight: Int
    @State var selectedBox: String = ""

    var body: some View {
        ForEach(butnsPool, id: \.self) { buttonName in
            Button(action: {
                selectedBox = buttonName
            })
            {
                BtnTxtView(theLabel: buttonName,
                           highLight: buttonName == selectedBox)
            }
        }.onAppear {
            selectedBox = butnsPool[initialHilight]
        }
    }
}