A Little Guide of NSViewControllerRepresentable
What is NSViewControllerRepresentable
In SwiftUI, there are no View Controllers, only Views. So what should we do if want to use something related to View Controllers? Here comes NSViewControllerRepresentable/UIViewControllerRepresentable. Basically, we can use instance of View Controller Representable as View, contains a view controller.
Since view controllers have their own view, ViewControllerRepresentable has not view body.
protocol NSViewControllerRepresentable : View where Self.Body == Never
A Simple Sample of NSViewControllerRepresentable
- Create a new SwiftUI app.
- Add a new file, choose Cocoa Class, name it as TextViewController.swift.
Choose create xib file as well. - Add a close button and label.
- TextViewController.swift
//
// TextViewController.swift
// ViewControllerRepresentable Test
//
// Created by zhaoxin on 2022/6/12.
//
import Cocoa
class TextViewController: NSViewController {
@IBOutlet weak var label: NSTextField!
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func closeButtonClicked(_ sender: Any) {
self.dismiss(sender)
}
}
- TextView
//
// TextView.swift
// ViewControllerRepresentable Test
//
// Created by zhaoxin on 2022/6/12.
//
import AppKit
import SwiftUI
struct TextView:NSViewControllerRepresentable {
func makeNSViewController(context: Context) -> TextViewController {
let controller = TextViewController()
return controller
}
func updateNSViewController(_ nsViewController: TextViewController, context: Context) {
}
}
- ContentView.swift
//
// ContentView.swift
// ViewControllerRepresentable Test
//
// Created by zhaoxin on 2022/6/12.
//
import SwiftUI
struct ContentView: View {
@State var title = ""
@State var showTextView = false
var body: some View {
HStack {
TextField("Title", text: $title)
Button("Show Text View") {
showTextView = true
}
.sheet(isPresented: $showTextView) {
TextView()
}
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
The app ran as below, but the close button didn't work.
Coordinator
View Controllers are class, and View Representables are structs. We use Coordinator to pass changes to SwiftUI.
- TextView
// ViewControllerRepresentable Test
//
// Created by zhaoxin on 2022/6/12.
//
import AppKit
import SwiftUI
struct TextView:NSViewControllerRepresentable {
@Environment(\.presentationMode) var presentationMode
@Binding var title:String
class Coordinator: NSObject, TextViewControllerDelegate {
var parent: TextView
init(_ parent: TextView) {
self.parent = parent
}
func textView(_ tvc: TextViewController) {
self.parent.presentationMode.wrappedValue.dismiss()
}
}
func makeNSViewController(context: Context) -> TextViewController {
let controller = TextViewController()
controller.delegate = context.coordinator
return controller
}
func updateNSViewController(_ nsViewController: TextViewController, context: Context) {
nsViewController.label.stringValue = title
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
}
- TextViewController
//
// TextViewController.swift
// ViewControllerRepresentable Test
//
// Created by zhaoxin on 2022/6/12.
//
import Cocoa
class TextViewController: NSViewController {
@IBOutlet weak var label: NSTextField!
weak var delegate:TextViewControllerDelegate?
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func closeButtonClicked(_ sender: Any) {
delegate?.textView(self)
}
}
protocol TextViewControllerDelegate:AnyObject {
func textView(_ textView:TextViewController)
}
- ContentView
//
// ContentView.swift
// ViewControllerRepresentable Test
//
// Created by zhaoxin on 2022/6/12.
//
import SwiftUI
struct ContentView: View {
@State var title = ""
@State var showTextView = false
var body: some View {
HStack {
TextField("Title", text: $title)
Button("Show Text View") {
showTextView = true
}
.sheet(isPresented: $showTextView) {
TextView(title: $title)
}
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}//
// ContentView.swift
// ViewControllerRepresentable Test
//
// Created by zhaoxin on 2022/6/12.
//
import SwiftUI
struct ContentView: View {
@State var title = ""
@State var showTextView = false
var body: some View {
HStack {
TextField("Title", text: $title)
Button("Show Text View") {
showTextView = true
}
.sheet(isPresented: $showTextView) {
TextView(title: $title)
}
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
App ran like this and the close button worked.
Update Variables of NSViewController
You may aware that there was a func
func updateNSViewController(_ nsViewController: TextViewController, context: Context) {
nsViewController.label.stringValue = title
}
We couldn't call nsViewController.label.stringValue = title in makeNSViewController, as in the make function the View Controller was created, but the xib was not loaded. We can think this update as viewDidLoad function in View Controller.
