SwiftUIを使用してmacOSアプリにツールバーを追加するにはどうすればよいですか?


9

SwiftUIを使用して、タイトルバー内のツールバーをmacOSアプリに追加しようとしています。以下に示すようなものです。

macOSアプリのタイトルバーのツールバー

SwiftUIを使用してこれを実現する方法を理解できません。現在、ビュー内にツールバー(テキストフィールドのみ)がありますが、タイトルバーに移動します。

私の現在のコード:

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

したがって、私の場合、ツールバー内にテキストフィールドを配置する必要があります。


私はmacOSターゲットでSwiftUIについて話しています。
Bijoy Thangaraj

いいえ、naviationBarTitle修飾子はmacOS SwiftUIでは使用できません。
Bijoy Thangaraj

現在のところ、SwiftUIではツールバーはサポートされていません。本当に必要な場合(なぜ?)AppKitの1つを使用しても、まだそこにあります...本当に。
Asperi

@Asperi私はこれを行うことができました-以下の答えを見てください。ツールバー(またはタイトルバーアクセサリー)は今でもmacOSアプリで広く使用されていますね。
Bijoy Thangaraj

@Asperi AppKitのものを使用するということは、NSToolbarにNSViewRepresentableを使用するということですか?もしそうなら、私はその方法を試しましたが、成功しませんでした。あなたがそのように解決策を持っているなら、私はそれをチェックしたいと思います。
Bijoy Thangaraj

回答:


4

アプローチ1:

これは、タイトルバーアクセサリを追加することによって行われます。AppDelegate.swiftファイルを変更することで、これを行うことができました。私はそれを正しく見せるために奇妙なパディングを適用しなければなりませんでした。

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(""))

    }
}

結果:

macOSツールバー内のコンテンツ

アプローチ2(代替方法):

ここでの考え方は、ストーリーボードを使用してツールバー部分を実行し、SwiftUIを使用してアプリの残りの部分を実行することです。これは、ユーザーインターフェイスとしてストーリーボードを使用して新しいアプリを作成することによって行われます。次に、ストーリーボードに移動してデフォルトのビューコントローラーを削除し、新しいを追加しNSHostingControllerます。新しく追加したホスティングコントローラーをメインウィンドウに関連付けます。インターフェイスビルダーを使用してウィンドウにツールバーを追加します。

ストーリーボードの構成

カスタムクラスをにアタッチし、NSHostingControllerそれにSwiftUIビューを読み込みます。

以下のサンプルコード:

import Cocoa
import SwiftUI

class HostingController: NSHostingController<SwiftUIView> {

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

    }

}

このアプローチを使用すると、ツールバーをカスタマイズすることもできます。


右クリックして[カスタマイズツールバー]を選択して編集可能にする方法はありますか?(FinderやPagesなどと同様)
sqwk

1
最初のソリューションでは、違います。しかし、上記の私の応答に追加した代替アプローチを見てください。これにより、ツールバーをカスタマイズするオプションが表示されます。
Bijoy Thangaraj
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.