CODEWITHSUNDEEP
swiftswiftui
Marco Carandente
Marco Carandente

Reputation: 313

How do I trigger updateUIView of a UIViewRepresentable?

I'm trying to implement the uiView from SpritzSwift into a SwiftUI app, but after the first rendering I can't get it to update. The manager that drives the UIView is working, but the UIView itself is not updating. I expected either that the UiView.setNeedsDisplay() inside the view controller or the changes in the @Bindable variables inside the wrapper would trigger updateUIView, but no dice.

No matter what change I make to the UiView or to its wrapper, it never gets updated (for example, the background never gets updated to clear color in the code example). How do I get this view to update?

Here's the SwiftUI Code:

import SwiftUI
struct Content: View {

    @State public var ssManager:SpritzSwiftManager = SpritzSwiftManager(withText: "", andWordPerMinute: Int(200))
    @State public var ssView:SpritzSwiftView = SpritzSwiftView(frame: CGRect(x: 0, y: 0, width: 200, height: 600 ))
    @State private var currentWord = ""
    
    var body: some View {
        VStack {
            Text("SpritzTest")
                .padding()
            let spritzUIView = SpritzUIViewRepresentable(SpritzView: $ssView,SpritzViewManager:$ssManager, CurrentWord: $currentWord)
            spritzUIView.padding()
            Button(action:
                    {
                        ssManager  = SpritzSwiftManager(withText: "Text try one two three", andWordPerMinute: 200)
                        spritzUIView.SpritzView = SpritzSwiftView(frame: CGRect(x: 0, y: 0, width: 200, height: 40 ))
                        spritzUIView.SpritzView.backgroundColor = .clear
                        ssManager.startReading { (word, finished) in
                            if !finished {
                                self.ssView.updateWord(word!)
                                currentWord = word!.word
                                spritzUIView.CurrentWord = currentWord

                            }
                        }
                    })
            {
                Text("Start")
            }
        }
    }
}

and here's the wrapper:

struct SpritzUIViewRepresentable : UIViewRepresentable{
    @Binding var SpritzView:SpritzSwiftView
    @Binding var SpritzViewManager:SpritzSwiftManager
    @Binding var CurrentWord:String
    
    func makeUIView(context: Context) -> SpritzSwiftView {
           return SpritzView
       }
       func updateUIView(_ uiView: SpritzSwiftView, context: Context) {
       }
}

Upvotes: 18

Views: 17338

Answers (1)

Asperi
Asperi

Reputation: 257693

You need to create UIKit view inside makeUIView and via Binding pass only dependent data. That binding change, when related state - source of truth - changed, calls updateUIView, where you should update your UIKit view.

Here is simplified demo sketch only, to show concept (might have typos):

struct SpritzUIViewRepresentable : UIViewRepresentable{
    @Binding var currentWord: SpritzSwiftWord
    @Binding var backgroundColor: UIColor
    
    func makeUIView(context: Context) -> SpritzSwiftView {
        // create and configure view here
        return SpritzSwiftView(frame: CGRect.zero) // frame does not matter here
    }

    func updateUIView(_ uiView: SpritzSwiftView, context: Context) {
       // update view properties here from bound external data
       uiView.backgroundColor = backgroundColor
       uiView.updateWord(currentWord)
    }
}

and button now should just change model data

    VStack {
        Text("SpritzTest")
            .padding()
        SpritzUIViewRepresentable(backgroundColor: $backgroundColor, SpritzViewManager:$ssManager, currentWord: $currentWord)
           .padding()
        Button(action:
            {
                ssManager  = SpritzSwiftManager(withText: "Text try one two three", andWordPerMinute: 200)

                self.backgroundColor = .clear
                ssManager.startReading { (word, finished) in
                    if !finished {
                        self.currentWord = word
                    }
                }
            })
        {
           Text("Start")
        }

assuming updated properties

@State private var currentWord = SpritzSwiftWord(word: "")
@State private var backgroundColor = UIColor.white         // whatever you want

Upvotes: 23

Related Questions