Trouble with SwiftUI and SwiftPlaygrounds

When using certain elements the app will tell me that there’s an error, even though there isn’t, the elements are:
  • List

  • NavigationView

  • Spacer

  • OutlineGroup

I’ve been searching and trying to fix it, but I have not been able to find a solution.

Also the @State variables do not update the UI

I leave my code below, in case theres an error with it and not Swift Playgrounds

Code Block
// 1 - Import ARKit, RealityKit, PlaygroundSuppor
import ARKit
import RealityKit
import SwiftUI
import PlaygroundSupport
// 2 - Create ARView
let arView = ARView(frame: .zero, cameraMode: .ar, automaticallyConfigureSession: true)
// 3- Create simple AR cube to place in scene
let saturn = MeshResource.generateSphere(radius: 0.15)
let ring = MeshResource.generatePlane(width: 1, depth: 1, cornerRadius: 0.5)
var ringMaterial = SimpleMaterial()
ringMaterial.baseColor = try! MaterialColorParameter.texture(
    TextureResource.load(named: "ring.PNG"))
var saturnMaterial = SimpleMaterial()
saturnMaterial.baseColor = try! MaterialColorParameter.texture(
    TextureResource.load(named: "2k_saturn.jpg"))
let saturnEntity = ModelEntity(mesh: saturn, materials: [saturnMaterial])
let ringEntity = ModelEntity(mesh: ring, materials: [ringMaterial])
saturnEntity.addChild(ringEntity)
let anchorEntity = AnchorEntity(plane: .horizontal)
anchorEntity.name = "My Cube"
anchorEntity.addChild(saturnEntity)
arView.scene.addAnchor(anchorEntity)
// 4 - Generate collision shapes
saturnEntity.generateCollisionShapes(recursive: true)
// 4(b) - Intall Gestures
arView.installGestures([.translation, .rotation, .scale], for: saturnEntity)
// 5 - Create extensions of ARView to enable longPressGesture to delete AR object
extension ARView {
    func enableObjectRemoval() {
        let longPressGestureRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(handleLongPress(recognizer:)))
        self.addGestureRecognizer(longPressGestureRecognizer)
    }
    
    @objc func handleLongPress(recognizer: UILongPressGestureRecognizer) {
        let location = recognizer.location(in: self)
        
        if let entity = self.entity(at: location) {
            if let anchorEntity = entity.anchor, anchorEntity.name == "My Cube" {
                anchorEntity.removeFromParent()
                print("Remove anchor" + anchorEntity.name)
            }
        }
    }
}
// 5(b) - Create enableObjectRemoval() function to add longPressGesture recognizer
arView.enableObjectRemoval()
struct ContentView: View {
    @State private var showView = false
    @State private var selection = 0
    @State private var showARView = false
    @State var selectedPlanet: PlanetModel
    
    var body: some View {
        Button("Show me") {
            self.showView.toggle()
        }
        .fullScreenCover(isPresented: $showView) {
            HStack {
                ARViewContainer().ignoresSafeArea(.all)
                    .frame(maxWidth: showARView ? .infinity : 0)
                NavigationView {
                    VStack {
                        HStack {
                            selectedPlanet.image
                                .resizable()
                                .scaledToFill()
                                .frame(width: 150, height: 150)
                        }
                        List {
                            ForEach(planets) { planet in 
                                if selectedPlanet.name != planet.name {
                                    NavigationLink(destination: PlanetDetailedView(planet: planet)) {
                                        PlanetView(selectedPlanet: selectedPlanet, thisPlanet: planet)
                                    }
                                }
                            }
                        }
                    }
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button(action: {
                                withAnimation {
                                    self.showARView.toggle()
                                    print("Show AR View Toggle: \(showARView)")
                                }
                            }) {
                                Label("Show AR View", systemImage: "arkit")
                            }
                        }
                    }
                    .navigationBarTitle("Solar System", displayMode: .inline)
                }
                .navigationViewStyle(StackNavigationViewStyle())
            }
        }
    }
}
struct PlanetView: View {
    
    let selectedPlanet: PlanetModel
    let thisPlanet: PlanetModel
    
    var body: some View {
        HStack {
            thisPlanet.image
                .resizable()
                .scaledToFill()
                .frame(width: 100, height: 100)
            Text(thisPlanet.name)
                .padding(.leading, 15)
                .font(.title)
            Spacer()
            Button(action: {
                
            }) {
                Label("Switch Planet", systemImage: "arrow.left.arrow.right")
            }
        }
    }
}
struct PlanetDetailedView: View {
    
    let planet: PlanetModel
    
    var body: some View {
        ScrollView {
            planet.image
                .resizable()
                .scaledToFit()
                .frame(height: 150)
        }
        .navigationBarTitle(planet.name)
    }
}
struct ARViewContainer: UIViewRepresentable {
    func makeUIView(context: Context) -> ARView {
        let newARView = ARView(frame: .zero)
        return arView
    }
    
    func updateUIView(_ uiView: ARView, context: Context) {
        
    }
}
PlaygroundPage.current.setLiveView(ContentView(selectedPlanet: planets[0]))


And the PlanetModel is below.

Code Block
import SwiftUI
public struct PlanetModel: Identifiable {
    public var id = UUID()
    public var name: String
    public var image: Image
    public var distanceToSun: Float
    
    public init(_ name: String, image: UIImage, distanceToSun: Float) {
        self.name = name
        self.image = Image(uiImage: image)
        self.distanceToSun = distanceToSun
    }
}
public let planets = [
    PlanetModel("Sun", image:  imageLiteral(resourceName: "Foto 3.png"), distanceToSun: 0),
    PlanetModel("Earth", image:  imageLiteral(resourceName: "Foto 1.png"), distanceToSun: 1),
    PlanetModel("Mars", image:  imageLiteral(resourceName: "Foto.png"), distanceToSun: 1.5),
    PlanetModel("Jupiter", image:  imageLiteral(resourceName: "Foto 2.png"), distanceToSun: 5.2),
    PlanetModel("Saturn", image:  imageLiteral(resourceName: "Captura.PNG"), distanceToSun: 9.5)
]


If you haven’t already, click on the speedometer button in the bottom left of the canvas and turn off Enable Results. It says it may reduce performance and I have had this issue myself.

When this is on, the labels to the right of lines of code appear giving you some information about what it is doing and how many times the line has been run. This is likely the cause of the errors Playgrounds is giving you because it is working harder to produce these results instead of focusing on displaying the results in the canvas.

If this doesn’t work, check your code for any possible errors: typos, syntax, etc.
Trouble with SwiftUI and SwiftPlaygrounds
 
 
Q