So I have the following HStack() with a ForEach on a some buttons as shown in the code below:

@State var mapType = 0

@State var mapDisplay: [String] = [
    "Standard",
    "Hybrid",
    "Image",
]

HStack {
    ForEach(mapDisplay, id: \.self) { item in
        VStack {
            HStack {
                VStack {
                    Button(action: {
                        switch item {
                          case "Standard": mapSettings.mapType = 0
                          case "Hybrid": mapSettings.mapType = 1
                          case "Image": mapSettings.mapType = 2
                          default: mapSettings.mapType = 0
                        }
                        print("User has selected \(item) map type.")
                    }, label: {
                        ZStack {
                            Text(item)
                        }
                    }) //: Button
                } //: VStack
            } //: HStack
        }
    } //: ForEach
    .onChange(of: mapType) { newValue in
        mapSettings.mapType = newValue
        log.info("The new map type is: \(newValue)")
    }
} //: HStack

The buttons are outputted like this (Just the top 3):

Does anyone know how I can trigger an onChange() when clicking between those top 3 buttons? I can't seem to trigger the log.info at all.

CodePudding user response：

You don't need

@State var mapType = 0

Your button is setting

mapSettings.mapType

Then just change

.onChange(of: mapSettings.mapType) { newValue in
    log.info("The new map type is: \(newValue)")
}