SwiftUI开发macOS APP，如何自定义标题栏（TitleBar）

macOS APP应用的标题栏（TitleBar）是指包含“交通信号灯”（红黄绿三个小按钮）的一栏，通常TitleBar只包括“交通信号灯”和一个title。

由于我们开发的app样式不是使用的系统样式，系统提供的TitleBar我们又改不了颜色，会与我们的应用主题形成鲜明的反差，如图：

另外，TitleBar的位置我们想自由的放置一些自定义按钮、选项，不想浪费这个位置，所以我们想把TitleBar隐藏掉。

我们使用SwiftUI开发macOS APP，那么怎么把TitleBar隐藏掉呢？

答案是通过WindowGroup的windowStyle API设置窗口样式为HiddenTitleBarWindowStyle，例如：

var body: some Scene {
        WindowGroup {
            ConsoleHome(openFile: self.openFile)
        }.commands {
            //.......
        }.windowStyle(HiddenTitleBarWindowStyle())

        WindowGroup(id: "analysis") {
            ConsoleAnalysis(openFile: self.openFile)
        }.windowStyle(HiddenTitleBarWindowStyle())
    }

但，这样只是将TitleBar隐藏了而已，TitleBar占用的位置还是空在那里的。

假如我们自定义的TitleBar如下：

var body: some View {
        VStack(spacing: 0, content: {
          	// 自定义TitleBar
						HStack(spacing: 0, content: {
                Text(getTitle())
                    .font(.headline)
                    .padding(.leading, 80)
            }).frame(maxWidth: .infinity,maxHeight: 30, alignment: .leading)
                .background(.themeBackgroundBase200)
                .foregroundStyle(.themeContentBase)
          // 窗口主视图
          // ......
       })
}

现在我们只需调用一个方法，就能让自定义的TitleBar占用原先TitleBar的位置：

var body: some View {
        VStack(spacing: 0, content: {
						HStack(spacing: 0, content: {
                Text(getTitle())
                    .font(.headline)
                    .padding(.leading, 80)
            }).frame(maxWidth: .infinity,maxHeight: 30, alignment: .leading)
                .background(.themeBackgroundBase200)
                .foregroundStyle(.themeContentBase)
          // .....
       }).edgesIgnoringSafeArea(.top)
}

是的，就是调用.edgesIgnoringSafeArea(.top)，让视图忽略屏幕顶部的安全区域。

设置之前：

设置之后：

最后，由于设置HiddenTitleBarWindowStyle样式之后，双击TitleBar的位置缩放窗口就不生效了，我们需要自己实现这个功能。当用户双击TitleBar时，调用NSApp.keyWindow?.zoom(nil)实现缩放窗口。

var body: some View {
        VStack(spacing: 0, content: {
						HStack(spacing: 0, content: {
                Text(getTitle())
                    .font(.headline)
                    .padding(.leading, 80)
            }).frame(maxWidth: .infinity,maxHeight: 30, alignment: .leading)
                .background(.themeBackgroundBase200)
                .foregroundStyle(.themeContentBase)
          			.onTapGesture(count: 2, perform: {
                    NSApp.keyWindow?.zoom(nil)
                })
          // .....
       }).edgesIgnoringSafeArea(.top)
}

总结：

1. 通过WindowGroup的windowStyle API设置窗口样式为HiddenTitleBarWindowStyle，隐藏系统的默认TitleBar。
2. 通过edgesIgnoringSafeArea(.top)来让自定义的TitleBar占用系统默认TitleBar的位置。
3. 通过onTapGesture和NSApp.keyWindow.zoom实现双击缩放窗口的功能。