如何使用SwiftUI将工具栏添加到macOS应用程序? [英] How do I add a toolbar to a macOS app using SwiftUI?

问题描述

我正在尝试使用SwiftUI将标题栏内的工具栏添加到macOS应用中，类似于下面所示.

I am trying to add a toolbar inside the title bar to a macOS app using SwiftUI, something similar to what is shown below.

我无法找到一种使用SwiftUI实现此目的的方法.目前，我的视图中有工具栏(仅有一个文本字段)，但我想将其移动到标题栏中.

I am unable to figure out a way to achieve this using SwiftUI. Currently, I have my toolbar (which just has a text field) inside my view, but I want to move it into the title bar.

我当前的代码:

struct TestView: View {
    var body: some View {
        VStack {
            TextField("Placeholder", text: .constant("")).padding()
            Spacer()
        }
    }
}

因此，就我而言，我需要在工具栏内添加文本字段.

So, in my case, I need to have the textfield inside the toolbar.

推荐答案

方法1:

Approach 1:

这是通过添加标题栏附件来完成的.我可以通过修改AppDelegate.swift文件来完成此操作.我必须应用一些奇怪的填充物才能使其看起来正确.

This is done by adding a titlebar accessory. I was able to get this done by modifying the AppDelegate.swift file. I had to apply some weird padding to make it look right.

AppDelegate.swift

func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Create the SwiftUI view that provides the window contents.
        let contentView = ContentView()

        // Create the titlebar accessory
        let titlebarAccessoryView = TitlebarAccessory().padding([.top, .leading, .trailing], 16.0).padding(.bottom,-8.0).edgesIgnoringSafeArea(.top)

        let accessoryHostingView = NSHostingView(rootView:titlebarAccessoryView)
        accessoryHostingView.frame.size = accessoryHostingView.fittingSize

        let titlebarAccessory = NSTitlebarAccessoryViewController()
        titlebarAccessory.view = accessoryHostingView       

        // Create the window and set the content view. 
        window = NSWindow(
            contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
            styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
            backing: .buffered, defer: false)
        window.center()
        window.setFrameAutosaveName("Main Window")

        // Add the titlebar accessory
        window.addTitlebarAccessoryViewController(titlebarAccessory)

        window.contentView = NSHostingView(rootView: contentView)
        window.makeKeyAndOrderFront(nil)
    }

TitlebarAccessory.swift

import SwiftUI

struct TitlebarAccessory: View {
    var body: some View {

        TextField("Placeholder", text: .constant(""))

    }
}

结果:

方法2(替代方法):

这里的想法是使用情节提要来完成工具栏部分，而使用SwiftUI来完成应用的其余部分.这是通过使用情节提要作为用户界面创建一个新应用来完成的.然后转到情节提要，删除默认的View Controller并添加一个新的 NSHostingController .通过设置其关系将新添加的Hosting Controller连接到主窗口.使用界面生成器将工具栏添加到窗口中.

The idea here is to do the toolbar part using storyboard and the rest of the app using SwiftUI. This is done by creating a new app with storyboard as the user interface. Then go to the storyboard and delete the default View Controller and add a new NSHostingController. Connect the newly added Hosting Controller to the main window by setting its relationship. Add your toolbar to the window using interface builder.

将自定义类添加到您的 NSHostingController 并将其SwiftUI视图加载到其中.

Attach a custom class to your NSHostingController and load your SwiftUI view into it.

下面的示例代码:

import Cocoa
import SwiftUI

class HostingController: NSHostingController<SwiftUIView> {

    @objc required dynamic init?(coder: NSCoder) {
        super.init(coder: coder, rootView: SwiftUIView())       

    }

}

使用这种方法还可以自定义工具栏.

Using this approach also gives you the ability to customize the toolbar.

这篇关于如何使用SwiftUI将工具栏添加到macOS应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！