如何在 SwiftUI for macOS 中使用菜單命令實現多窗口？

Question

情況

實現一個多窗口應用程序，其中每個窗口都有自己的狀態。

例子

這是一個示例（ 在 github 上）來展示這個問題：

import SwiftUI

@main
struct multi_window_menuApp: App {

  var body: some Scene {
    WindowGroup {
      ContentView()
    }.commands {
      MenuCommands()
    }
  }
}

struct ContentView: View {
  @StateObject var viewModel: ViewModel  = ViewModel()
  
  var body: some View {
    TextField("", text: $viewModel.inputText)
      .disabled(true)
      .padding()
  }
}

public class ViewModel: ObservableObject {
  
  @Published var inputText: String = "" {
    didSet {
      print("content was updated...")
    }
  }
}

問題

我們應該如何以編程方式確定當前選擇的視圖是什么，以便在菜單命令即將完成時更新狀態並更新視圖模型中的狀態？

import Foundation
import SwiftUI
import Combine

struct MenuCommands: Commands {
  
  var body: some Commands {
    CommandGroup(after: CommandGroupPlacement.newItem, addition: {
      Divider()
      Button(action: {
        let dialog = NSOpenPanel();
        
        dialog.title = "Choose a file";
        dialog.showsResizeIndicator = true;
        dialog.showsHiddenFiles = false;
        dialog.allowsMultipleSelection = false;
        dialog.canChooseDirectories = false;
        
        if (dialog.runModal() ==  NSApplication.ModalResponse.OK) {
          let result = dialog.url
          if (result != nil) {
            let path: String = result!.path
            do {
              let string = try String(contentsOf: URL(fileURLWithPath: path), encoding: .utf8)
              print(string)
              // how to get access to the currently active view model to update the inputText variable?
              // viewModel.inputText = string
            }
            catch {
              print("Error \(error)")
            }
          }
        } else {
          return
        }
      }, label: {
        Text("Open File")
      })
      .keyboardShortcut("O", modifiers: .command)
    })
  }
}

可能有助於解決此問題的鏈接：

• http://www.gfrigerio.com/build-a-macos-app-with-swiftui/
• https://troz.net/post/2021/swiftui_mac_menus/
• https://onmyway133.com/posts/how-to-manage-windowgroup-in-swiftui-for-macos/

Answer 1

有用的鏈接：

1. 如何僅使用 SwiftUI 從@main App 訪問 NSWindow？
2. 如何在 SwiftUI 視圖中訪問自己的窗口？
3. https://lostmoa.com/blog/ReadingTheCurrentWindowInANewSwiftUILifecycleApp/

（這是我能想到的，如果有人有更好的想法/方法，請分享）

這個想法是創建一個共享的“全局”視圖模型來跟蹤打開的窗口和視圖模型。 每個NSWindow都有一個具有唯一windowNumber的屬性。 當一個窗口變為活動（鍵）時，它通過windowNumber查找視圖模型並將其設置為activeViewModel 。

import SwiftUI

class GlobalViewModel : NSObject, ObservableObject {
  
  // all currently opened windows
  @Published var windows = Set<NSWindow>()
  
  // all view models that belong to currently opened windows
  @Published var viewModels : [Int:ViewModel] = [:]
  
  // currently active aka selected aka key window
  @Published var activeWindow: NSWindow?
  
  // currently active view model for the active window
  @Published var activeViewModel: ViewModel?
  
  func addWindow(window: NSWindow) {
    window.delegate = self
    windows.insert(window)
  }
  
  // associates a window number with a view model
  func addViewModel(_ viewModel: ViewModel, forWindowNumber windowNumber: Int) {
    viewModels[windowNumber] = viewModel
  }
}

然后，對窗口上的每個更改做出反應（當它被關閉時，當它成為一個活動的又名關鍵窗口時）：

import SwiftUI

extension GlobalViewModel : NSWindowDelegate {
  func windowWillClose(_ notification: Notification) {
    if let window = notification.object as? NSWindow {
      windows.remove(window)
      viewModels.removeValue(forKey: window.windowNumber)
      print("Open Windows", windows)
      print("Open Models", viewModels)
    }
  }
  func windowDidBecomeKey(_ notification: Notification) {
    if let window = notification.object as? NSWindow {
      print("Activating Window", window.windowNumber)
      activeWindow = window
      activeViewModel = viewModels[window.windowNumber]
    }
  }
}

提供一種查找與當前視圖關聯的窗口的方法：

import SwiftUI

struct HostingWindowFinder: NSViewRepresentable {
  var callback: (NSWindow?) -> ()
  
  func makeNSView(context: Self.Context) -> NSView {
    let view = NSView()
    DispatchQueue.main.async { [weak view] in
      self.callback(view?.window)
    }
    return view
  }
  func updateNSView(_ nsView: NSView, context: Context) {}
}

這是使用當前窗口和視圖模型更新全局視圖模型的視圖：

import SwiftUI

struct ContentView: View {
  @EnvironmentObject var globalViewModel : GlobalViewModel
  
  @StateObject var viewModel: ViewModel  = ViewModel()
  
  var body: some View {
    HostingWindowFinder { window in
      if let window = window {
        self.globalViewModel.addWindow(window: window)
        print("New Window", window.windowNumber)
        self.globalViewModel.addViewModel(self.viewModel, forWindowNumber: window.windowNumber)
      }
    }
    
    TextField("", text: $viewModel.inputText)
      .disabled(true)
      .padding()
  }
}

然后我們需要創建全局視圖模型並將其發送到視圖和命令：

import SwiftUI

@main
struct multi_window_menuApp: App {
  
  @State var globalViewModel = GlobalViewModel()
  
  var body: some Scene {
    WindowGroup {
      ContentView()
        .environmentObject(self.globalViewModel)
    }
    .commands {
      MenuCommands(globalViewModel: self.globalViewModel)
    }
    
    Settings {
      VStack {
        Text("My Settingsview")
      }
    }
  }
}

以下是命令的外觀，因此它們可以訪問當前選定/活動的 viewModel：

import Foundation
import SwiftUI
import Combine

struct MenuCommands: Commands {
  var globalViewModel: GlobalViewModel
  
  var body: some Commands {
    CommandGroup(after: CommandGroupPlacement.newItem, addition: {
      Divider()
      Button(action: {
        let dialog = NSOpenPanel();
        
        dialog.title = "Choose a file";
        dialog.showsResizeIndicator = true;
        dialog.showsHiddenFiles = false;
        dialog.allowsMultipleSelection = false;
        dialog.canChooseDirectories = false;
        
        if (dialog.runModal() ==  NSApplication.ModalResponse.OK) {
          let result = dialog.url
          if (result != nil) {
            let path: String = result!.path
            do {
              let string = try String(contentsOf: URL(fileURLWithPath: path), encoding: .utf8)
              print("Active Window", self.globalViewModel.activeWindow?.windowNumber)
              self.globalViewModel.activeViewModel?.inputText = string
            }
            catch {
              print("Error \(error)")
            }
          }
        } else {
          return
        }
      }, label: {
        Text("Open File")
      })
      .keyboardShortcut("O", modifiers: [.command])
    })
  }
}

一切都在這個 github 項目下更新和運行： https ://github.com/ondrej-kvasnovsky/swiftui-multi-window-menu

Answer 2

我在解決類似問題時遇到了這個問題。 我相信 SwiftUI 的方式是使用FocusedValue ：

// create an active viewmodel key
struct ActiveViewModelKey: FocusedValueKey {
  typealias Value = ViewModel
}

extension FocusedValues {
  var activeViewModel: ViewModel? {
    get { self[ActiveViewModelKey.self] }
    set { self[ActiveViewModelKey.self] = newValue }
  }
}

struct ContentView: View {
  @StateObject var viewModel: ViewModel  = ViewModel()
  
  var body: some View {
    TextField("", text: $viewModel.inputText)
      ...
      .focusedValue(\.activeViewModel, viewModel) // inject the focused value
  }
}

struct MenuCommands: Commands {
  @FocusedValue(\.activeViewModel) var activeViewModel // inject the active viewmodel
  
  var body: some Commands {
    CommandGroup(after: CommandGroupPlacement.newItem, addition: {
      Divider()
      Button(action: {
        ...
        activeViewModel?.inputText = string
      }, label: {
        Text("Open File")
      })
      .keyboardShortcut("O", modifiers: [.command])
    })
  }
}