Custom Annotations in SwiftUI (MKMapView) - swiftui

I have implemented a MKMapView in SwiftUI and I am showing a list of annotations (stops) as well as the user's location.
I wanted to add the tap functionality to the "stop pins" but I wasn't able to find anything helpful to achieve this.
The problem with this code is that it changes the view of the user location pin and eventually crashes with the following error.
2021-07-10 18:31:21.434538+0900 Bus Finder[5232:2086940] *** Terminating app due to uncaught exception 'NSGenericException', reason: '<Bus_Finder.Stops: 0x2816c4cc0> must implement title, or view (null) must have a non-nil detailCalloutAccessoryView when canShowCallout is YES on corresponding view <MKAnnotationView: 0x13137cd60; frame = (-20 -20; 40 40); opaque = NO; layer = <CALayer: 0x2832e9e20>>'
*** First throw call stack:
(0x196f2a754 0x1ab9f17a8 0x1a6566410 0x1a65655bc 0x1a656464c 0x1a65641d0 0x1982fd458 0x196ea522c 0x196ea4e28 0x196ea4278 0x196e9e02c 0x196e9d360 0x1ae4db734 0x199918584 0x19991ddf4 0x19ddf3370 0x19ddf32fc 0x19d8ebb6c 0x100eacf54 0x100eacff4 0x196b59cf8)
libc++abi: terminating with uncaught exception of type NSException
*** Terminating app due to uncaught exception 'NSGenericException', reason: '<Bus_Finder.Stops: 0x2816c4cc0> must implement title, or view (null) must have a non-nil detailCalloutAccessoryView when canShowCallout is YES on corresponding view <MKAnnotationView: 0x13137cd60; frame = (-20 -20; 40 40); opaque = NO; layer = <CALayer: 0x2832e9e20>>'
terminating with uncaught exception of type NSException
I only want to change the view of the "stops pin" and add the tap functionality.
I pass a list of Stops to the MapView on appear. The Stops structure is at the end.
A visual concept of my problem:
(When commenting the viewFor annotation function)
I want to change the style of the stops pin and add tap functionality to it not the user's location pin.
When I use the viewFor annotation function (the same code as in this question) the user location view changes and then the app crashes.
The MapView file:
// MARK: MapView
struct MapView: UIViewRepresentable {
// MARK: Variables
#Binding var stops: [Stops]
#Binding var centerCoordinate: MKCoordinateRegion
#Binding var action: Action
// MARK: Action Lists
enum Action {
case idle
case reset(coordinate: MKCoordinateRegion)
case changeType(mapType: MKMapType)
}
// MARK: First Time Only
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.delegate = context.coordinator
mapView.showsUserLocation = true
mapView.userTrackingMode = .follow
mapView.isUserInteractionEnabled = true
mapView.centerCoordinate = self.centerCoordinate.center
mapView.setRegion(self.centerCoordinate, animated: true)
return mapView
}
// MARK: Updating UI
func updateUIView(_ view: MKMapView, context: Context) {
switch action {
case .idle:
break
case .reset(let newCoordinate):
view.delegate = nil
DispatchQueue.main.async {
self.centerCoordinate.center = newCoordinate.center
self.action = .idle
view.setRegion(self.centerCoordinate, animated: true)
view.delegate = context.coordinator
}
case .changeType(let mapType):
view.mapType = mapType
}
view.addAnnotations(stops)
}
// MARK: Setting Coordinator
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, MKMapViewDelegate {
var parent: MapView
init(_ parent: MapView) {
self.parent = parent
}
func mapViewDidChangeVisibleRegion(_ mapView: MKMapView) {
parent.centerCoordinate.center = mapView.centerCoordinate
}
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
let annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "TESTING NOTE")
annotationView.canShowCallout = true
annotationView.image = UIImage(systemName: "location.circle")?.withTintColor(.systemGreen, renderingMode: .alwaysOriginal)
let size = CGSize(width: 40, height: 40)
annotationView.image = UIGraphicsImageRenderer(size:size).image {
_ in annotationView.image!.draw(in:CGRect(origin:.zero, size:size))
}
return annotationView
}
}
}
Stops structure file:
// MARK: StopPinPoint
final class Stops: NSObject, Codable, Identifiable, MKAnnotation {
var id: String?
var name: BusStopName
var images: [String]?
var landMarks: [String]?
var coordinate: CLLocationCoordinate2D
var prevNexStop: [String]?
init(id: String?, name: BusStopName, images: [String]?, landMarks: [String]?, coordinates: CLLocationCoordinate2D, prevNextStop: [String]?) {
self.id = id
self.name = name
self.coordinate = coordinates
self.images = images
self.landMarks = landMarks
self.prevNexStop = prevNextStop
}
var location: CLLocation {
return CLLocation(latitude: self.coordinate.latitude, longitude: self.coordinate.longitude)
}
func distance(to location: CLLocation) -> CLLocationDistance {
return location.distance(from: self.location)
}
}
I would appreciate it a lot if someone could help me! I have been working on this problem for weeks now!

So basically after a bit more searching, I found out the answer.
In order to not change the user's location pin, I have to check the type of annotation and if the type is MKUserLocation I should return nil.
Following that the reason for the crash was that I had to make the Stops structure confirm to MKPointAnnotation and remove or override the coordinate variable then when I am making a list of Stops I can simply define the title, subtitle and coordinates.

Related

Binding array is empty when accessed through Coordinator

I am having an issue with my Coordinator. I am interacting with a MKMapView via SwiftUI. I am passing in a Binding to the UIViewRepresentable and need to access that same Binding in the Coordinator. Inside the Coordinator I determine what strokeColor to use for my polyline. When I try to access the routes Binding from my Coordinator it is always empty. When I set a breakpoint inside the MapView on the updateUIView function the binding is indeed populated.
Heres the code:
import SwiftUI
import MapKit
struct MapView: UIViewRepresentable {
var region: MKCoordinateRegion
#Binding var routes: [RouteData]
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.delegate = context.coordinator
mapView.showsUserLocation = true
mapView.setRegion(region, animated: true)
addOverlays(mapView)
return mapView
}
func updateUIView(_ view: MKMapView, context: Context) {
addOverlays(view)
removeOverlays(view)
}
private func addOverlays(_ view: MKMapView) {
for route in routes {
for point in route.points {
let waypoints = point.waypoints
let polyline = MKPolyline(coordinates: waypoints, count: waypoints.count)
polyline.title = route.routeID
view.addOverlay(polyline)
}
}
}
private func removeOverlays(_ view: MKMapView) {
for overlay in view.overlays {
if let routeID = overlay.title!, routes.first(where: { $0.routeID == routeID }) == nil {
view.removeOverlay(overlay)
}
}
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
}
class Coordinator: NSObject, MKMapViewDelegate {
let parent: MapView
init(_ parent: MapView) {
self.parent = parent
}
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
if let routePolyline = overlay as? MKPolyline {
let renderer = MKPolylineRenderer(polyline: routePolyline)
// Always prints route is empty even though I set a break point inside the parents' updateUIView func and the route is populated.
print("parents routes: \(self.parent.routes)")
if let title = routePolyline.title, let route = self.parent.routes.first(where: { $0.routeID == title }) {
renderer.strokeColor = UIColor(convertRGBStringToColor(color: route.route.rtclr))
} else {
renderer.strokeColor = UIColor.blue
}
renderer.lineWidth = 5
return renderer
}
return MKOverlayRenderer()
}
}
A few mistakes
#Binding var routes: [RouteData] should be let routes: [RouteData] because you don’t change it so don’t need the write access.
Coordinator(self) Should be Coordinator(), self is an old value the Coordinator should not hang on to.
Subclass MKPolyline to add your colour properties eg https://stackoverflow.com/a/44294417/259521
makeUIView Should return context.coordinator.mapView
addOverlays should only add ones that are not already added. You need to essentially implement a diff in updateUIView.
Update is called after make so no need to add overlays in make.

How do I make a UITextView inside of a UIViewRepresentable update when I add an attribute to an NSMutableAttributedString?

I am trying to make a WYSIWYG editor by interfacing between SwiftUI and UIKit via a UIViewRepresentable. I am primarily using SwiftUI but am using UIKit here as it seems SwiftUI does not currently support the functionality needed.
My problem is, when I set the NSMutableAttributedString to be already containing a string with attributes, if I then select that text in the UIViewRepresentable before typing any new text and press the underline button in the UIToolBar to add the attribute, the attribute is added to the NSMutableAttributedString but the UIView does not update to show the updated NSMutableAttributedString. However, if I type a single character and then select the text and add the underline attribute, the UIView updates.
Could someone explain why this is and maybe point me towards a solution? Any help would be greatly appreciated.
Below is the code:
import SwiftUI
import UIKit
struct ContentView: View {
#State private var mutableAttributedString: NSMutableAttributedString = NSMutableAttributedString(
string: "this is the string before typing anything new",
attributes: [.foregroundColor: UIColor.blue])
var body: some View {
EditorExample(outerMutableString: $mutableAttributedString)
}
}
struct EditorExample: UIViewRepresentable {
#Binding var outerMutableString: NSMutableAttributedString
#State private var outerSelectedRange: NSRange = NSRange()
func makeUIView(context: Context) -> some UITextView {
// make UITextView
let textView = UITextView()
textView.font = UIFont(name: "Helvetica", size: 30.0)
textView.delegate = context.coordinator
// make toolbar
let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: textView.frame.size.width, height: 44))
// make toolbar underline button
let underlineButton = UIBarButtonItem(
image: UIImage(systemName: "underline"),
style: .plain,
target: context.coordinator,
action: #selector(context.coordinator.underline))
toolBar.items = [underlineButton]
textView.inputAccessoryView = toolBar
return textView
}
func updateUIView(_ uiView: UIViewType, context: Context) {
uiView.attributedText = outerMutableString
}
func makeCoordinator() -> Coordinator {
Coordinator(innerMutableString: $outerMutableString, selectedRange: $outerSelectedRange)
}
class Coordinator: NSObject, UITextViewDelegate {
#Binding var innerMutableString: NSMutableAttributedString
#Binding var selectedRange: NSRange
init(innerMutableString: Binding<NSMutableAttributedString>, selectedRange: Binding<NSRange>) {
self._innerMutableString = innerMutableString
self._selectedRange = selectedRange
}
func textViewDidChange(_ textView: UITextView) {
innerMutableString = textView.textStorage
}
func textViewDidChangeSelection(_ textView: UITextView) {
selectedRange = textView.selectedRange
}
#objc func underline() {
if (selectedRange.length > 0) {
innerMutableString.addAttribute(.underlineStyle, value: NSUnderlineStyle.single.rawValue, range: selectedRange)
}
}
}
}
It's not working because NSAttributedString is a class and #State is for value types like structs. This means the dependency tracking is broken and things won't update correctly.
Also your UIViewRepresentable and Coordinator design is non-standard so I thought I would share an example of the correct way to do it. The binding is change to a string, which is a value type so it's working (minus the underline feature obviously).
struct ContentView: View {
//#State private var mutableAttributedString: NSMutableAttributedString = NSMutableAttributedString(
// string: "this is the string before typing anything new",
// attributes: [.foregroundColor: UIColor.blue])
#State var string = "this is the string before typing anything new"
var body: some View {
VStack {
// EditorExample(outerMutableString: $mutableAttributedString)
// EditorExample(outerMutableString: $mutableAttributedString) // a second to test bindings are working\
//Text(mutableAttributedString.string)
EditorExample(outerMutableString2: $string)
EditorExample(outerMutableString2: $string)
}
}
}
struct EditorExample: UIViewRepresentable {
//#Binding var outerMutableString: NSMutableAttributedString
#Binding var outerMutableString2: String
// this is called first
func makeCoordinator() -> Coordinator {
// we can't pass in any values to the Coordinator because they will be out of date when update is called the second time.
Coordinator()
}
// this is called second
func makeUIView(context: Context) -> UITextView {
context.coordinator.textView
}
// this is called third and then repeatedly every time a let or `#Binding var` that is passed to this struct's init has changed from last time.
func updateUIView(_ uiView: UITextView, context: Context) {
//uiView.attributedText = outerMutableString
uiView.text = outerMutableString2
// we don't usually pass bindings in to the coordinator and instead use closures.
// we have to set a new closure because the binding might be different.
context.coordinator.stringDidChange2 = { string in
outerMutableString2 = string
}
}
class Coordinator: NSObject, UITextViewDelegate {
lazy var textView: UITextView = {
let textView = UITextView()
textView.font = UIFont(name: "Helvetica", size: 30.0)
textView.delegate = self
// make toolbar
let toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: textView.frame.size.width, height: 44))
// make toolbar underline button
let underlineButton = UIBarButtonItem(
image: UIImage(systemName: "underline"),
style: .plain,
target: self,
action: #selector(underline))
toolBar.items = [underlineButton]
textView.inputAccessoryView = toolBar
return textView
}()
//var stringDidChange: ((NSMutableAttributedString) -> ())?
var stringDidChange2: ((String) -> ())?
func textViewDidChange(_ textView: UITextView) {
//innerMutableString = textView.textStorage
//stringDidChange?(textView.textStorage)
stringDidChange2?(textView.text)
}
func textViewDidChangeSelection(_ textView: UITextView) {
// selectedRange = textView.selectedRange
}
#objc func underline() {
let range = textView.selectedRange
if (range.length > 0) {
textView.textStorage.addAttribute(.underlineStyle, value: NSUnderlineStyle.single.rawValue, range: range)
// stringDidChange?(textView.textStorage)
}
}
}
}

How can I show/hide the title of my MKPointAnnotation() pin after I set it inside of my UIViewRepresentable updateUIView (SwiftUI)?

I would like to toggle the visibility of the title of my MKPointAnnotation after I tap the pin. I tried changing the title directly in
func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) but it tells me that it's only a get property and I cannot change it inside of my Coordinator class.
Any help would be much appreciated!
Here is the relevant code...
import SwiftUI
import MapKit
import CoreLocationUI
struct MapViewTest: UIViewRepresentable {
#EnvironmentObject var viewModel: MapViewModel
#Binding var region: MKCoordinateRegion
#Binding var lineCoordinates: [[CLLocationCoordinate2D]]
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.delegate = context.coordinator
mapView.region = region
mapView.showsUserLocation = true
return mapView
}
func updateUIView(_ view: MKMapView, context: Context) {
view.setRegion(region, animated: true)
for i in viewModel.locations {
let pin = MKPointAnnotation()
pin.coordinate = i.coordinate
pin.title = i.name
view.addAnnotation(pin)
}
for i in lineCoordinates{
let polyline = MKPolyline(coordinates: i, count: i.count)
view.addOverlay(polyline)
}
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
}
class Coordinator: NSObject, MKMapViewDelegate {
var parent: MapViewTest
init(_ parent: MapViewTest) {
self.parent = parent
}
func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
}
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
if let routePolyline = overlay as? MKPolyline {
let renderer = MKPolylineRenderer(polyline: routePolyline)
renderer.strokeColor = UIColor.systemBlue
renderer.lineWidth = 10
return renderer
}
return MKOverlayRenderer()
}
}
Whenever you are making a MapKit annotation, you should include func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView?. This function allows you to configure your pins, but it also allows you to reuse unused pins. Whenever a pin disappears from a map (scrolling around, etc.), that pin is not destroyed, but it is held to be reused in another pin is needed. This saves processor and memory.
In your Coordinator class add the following function:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
// create a unique identifier for pin reuse
let identifier = "Placemark"
// see if there already is a created pin
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
if annotationView == nil {
// there wasn't a pin, so we make a new one
annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
// this is where your title is allowed to be shown when tapping the pin
annotationView?.canShowCallout = true
// this gives you an information button in the callout if needed
// if you use the rightCalloutAccessoryView you must implement:
// func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl)
annotationView?.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)
} else {
// we have an old annotation, so update it
annotationView?.annotation = annotation
}
return annotationView
}

How to prevent auto-zooming with IOS MapKit when using userTrackingMode = .followWithHeading? (using SwiftUI)

How can one prevent auto-zooming with IOS MapKit when using userTrackingMode = .followWithHeading? That is I am setting the current user location to the centre of the screen, and have "view.userTrackingMode = .followWithHeading" so that the map orientates to north, but when you zoom in/out manually the MapView automatically overrides this and zooms back to the level it seems to prefer being at.
I was to be able to zoom in, then the zoom level stays like this, whilst it keeps the map centred to user location, and keeps auto-rotating to keep map aligned to north.
I am using SwiftUI so have effectively do have the location being passed into GCMapView as a parameter (as the means to keep the SwiftUI GCMapView up to date with latest user location). So not sure if this is causing an issue?
Some key bits (have pulled some code out to show relevant lines) of the MapKit call backs I'm using:
struct FlightView: View {
#EnvironmentObject var locationManager : GCLocationManager
#State var centreUserLocation : Bool = false
var body: some View {
GCMapView(
flight: flight,
userLocation: locationManager.userLocation,
centreUserLocation: centreUserLocation,
initalZoomDone: initalZoomDone
)
}
}
struct GCMapView : UIViewRepresentable {
let map = MKMapView()
func makeUIView(context: Context) -> MKMapView {
map.delegate = context.coordinator
map.isRotateEnabled = true
map.userTrackingMode = .followWithHeading
map.showsUserLocation = true
return map
}
func updateUIView(_ view: MKMapView, context: Context) {
if let userLocation = userLocation {
view.centerCoordinate = userLocation
view.userTrackingMode = .followWithHeading // Needed to keep map rotating to align to North
}
}
func makeCoordinator() -> Coordinator {
return Coordinator(self)
}
class Coordinator: NSObject, MKMapViewDelegate {
var parent: GCMapView
init(_ parent: GCMapView) {
self.parent = parent
super.init()
}
}
}

Prevent reflow/redraw every time #State is changed

didSelectItemAt causes UI to reflow/redraw every time value for lastSelectedIndex is changed, causing performance issue. I'm not sure if I have used #State properly to propagate value from child to parent.
P.S. I need to use UICollectionView for a reason instead of swiftui List or ScrollView.
import Foundation
import SwiftUI
struct ContentView: View {
#State var lastSelectedIndex : Int = -1
var body: some View {
ZStack {
CustomCollectionView(lastSelectedIndex: $lastSelectedIndex)
Text("Current Selected Index \(lastSelectedIndex)")
}
}
}
struct CustomCollectionView: UIViewRepresentable {
#Binding var lastSelectedIndex : Int
func makeUIView(context: Context) -> UICollectionView {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: 400, height: 300)
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: CustomCollectionViewCell.reuseId)
collectionView.delegate = context.coordinator
collectionView.dataSource = context.coordinator
collectionView.backgroundColor = .systemBackground
collectionView.isDirectionalLockEnabled = true
collectionView.backgroundColor = UIColor.black
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = false
collectionView.alwaysBounceVertical = false
return collectionView
}
func updateUIView(_ uiView: UICollectionView, context: Context) {
uiView.reloadData()
}
func makeCoordinator() -> CustomCoordinator {
CustomCoordinator(self)
}
}
class CustomCoordinator: NSObject, UICollectionViewDataSource, UICollectionViewDelegate {
let parent:CustomCollectionView
init(_ parent:CustomCollectionView) {
self.parent = parent
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
100
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CustomCollectionViewCell.reuseId, for: indexPath) as! CustomCollectionViewCell
cell.backgroundColor = UIColor.red
cell.label.text = "Current Index is \(indexPath.row)"
NSLog("Called for Index \(indexPath.row)")
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
parent.lastSelectedIndex = indexPath.row
}
}
class CustomCollectionViewCell: UICollectionViewCell {
static let reuseId = "customCell"
let label = UILabel()
override init(frame: CGRect) {
super.init(frame: frame)
label.numberOfLines = 0
contentView.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
label.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Quick fix
You can use an ObservableObject for this purpose
class Model: ObservableObject {
#Published var index: Int
init(index: Int) { self.index = index }
}
Create a container view for your text field that will update when this model changes:
struct IndexPreviewer: View {
#ObservedObject var model: Model
var body: Text { Text("Current Selected Index \(model.index)") }
}
Then include this model and the observer in your ContentView:
struct ContentView: View {
private let model = Model(index: -1)
var body: some View {
VStack {
IndexPreviewer(model: model)
CustomCollectionView(lastSelectedIndex: index)
}
}
var index: Binding<Int> {
Binding {model.index} set: {model.index = $0}
}
}
Explanation
The problem is that once you update a #State property, the containing view's body will be re-evaluated. So you cannot create a #State property on the view that contains your collection view, because each time you select a different cell, a message will be sent to your container who will re-evaluate it's body that contains the collection view. Hence the collection view will refresh and reload your data like Asperi wrote in his answer.
So what can you do to resolve that? Remove the state property wrapper from your container view. Because when you update the lastSelectedIndex, your container view (ContentView) should not be rendered again. But your Text view should be updated. So you should wrap your Text view in a separate view that observes the selection index.
This is where ObservableObject comes in to play. It is a class that can store State data on itself instead of being stored directly in a property of a view.
So why does IndexPreviewer update when the model changes and ContentView not, you might ask? That is because of the #ObservedObject property wrapper. Adding this to a view will refresh the view when the associated ObservableObject changes. That is why we do not include #ObservedObject inside ContentView but we do include it in IndexPreviewer.
How/Where to store your models?
For the sake of simplicity I added the model as a constant property to ContentView. This is however not a good idea when ContentView is not the root view of your SwiftUI hierarchy.
Say for example that your content view also receives a Bool value from its parent:
struct Wrapper: View {
#State var toggle = false
var body: some View {
VStack {
Toggle("toggle", isOn: $toggle)
ContentView(toggle: toggle)
}
}
}
struct ContentView: View {
let toggle: Bool
private let model = Model(index: -1)
...
}
When you run that on iOS 13 or 14 and try to click on collection view cell and then change the toggle, you will see that the selected index will reset to -1 when you change the toggle. Why does this happen?
When you click on the toggle, the #State var toggle will change and since it uses the #State property wrapper the body of the view will be recomputed. So another ContentView will be constructed and with it, also a new Model object.
There are two ways to prevent this from happening. One way is to move your model up in the hierarchy. But this can create a cluttered root view at the top of your view hierarchy. In some cases it is better to leave transient UI state local to your containing UI component. This can be achieved by an undocumented trick which is to use #State for your model objects. Like I said, it is currently (july 2020) undocumented but properties wrapped using #State will persist their value accross UI updates.
So to make a long story short: You should probably be storing your model using:
struct ContentView: View {
#State private var model = Model(index: -1)
It is a feature of #State to cause dependent view refresh. In case of representable changing dependent state calls updateUIView, so, as you put reloadData in it - its reloaded:
func updateUIView(_ uiView: UICollectionView, context: Context) {
// Either remove reload from here (ig. make it once in makeUIView to load
// content, or make reload here only conditionally depending on some parameter
// which really needs collection to be reloaded
// uiView.reloadData()
}