【问题标题】：How do I create a tabbed panel similar to the Xcode properties panel如何创建类似于 Xcode 属性面板的选项卡式面板
【发布时间】：2021-10-09 22:29:05
【问题描述】：

我正在尝试创建一个类似于 Xcode 属性面板的选项卡式面板，但标准选项卡式面板似乎具有不同的外观和感觉，无法更改它。应该使用哪些控件来创建外观相似的选项卡式面板？

编辑：我没有使用 NSTabViewController - 只是有 TabView ！

【问题讨论】：

标签： macos nstabview

【解决方案1】：

如果您使用故事板，只需将选项卡视图控制器拖到表面并连接到窗口。然后进入选项卡视图控制器的IB设置，将样式更改为工具栏，如下所示：

然后添加标签，并为每个标签添加图像，如下所示：

运行您的应用并享受 XCode 设置视图的外观：

【讨论】：

好的，这几乎就是我想要的，除了我希望标签按钮出现在属性面板上方而不是应用工具栏中。
@DuncanGroenewald 不幸的是，如果您需要任何类型的自定义行为，则需要使用不同的方法。具有表格样式的 NSTabView 并将所选索引绑定到控制器中的变量。然后创建一组图像按钮或其他类型的按钮，并将它们放在堆栈视图中，并将堆栈视图锚定到表格 NSTabView 的顶部。与我们在 iOS 中做事的方式相同。然后有一些选择逻辑等
嗯，好吧，他们使用 Xcode 样式选项卡似乎很奇怪，但没有将其作为标准选项
是的，如果您注意到 Xcode 样式选项卡通常是工具栏的一部分，它附加到单独的窗口。独立、模态或工作表样式。

【解决方案2】：

我刚刚使用故事板和提供的布局创建了一个新项目，添加到视图控制器视图顶部的自定义视图。向自定义视图添加按钮，样式 = 方形，类型 = 切换，并使用提供的模板类型图标。将标签分配给按钮 0-4，并将它们放入水平堆栈视图。然后添加了一条水平线和一个容器视图。然后我将一个选项卡视图控制器添加到情节提要中并将其嵌入到容器视图中。所有按钮都连接到相同的操作。

import Cocoa

class ViewController: NSViewController {

    @IBOutlet var myStackView: NSStackView!

    var oldSelection: Int = 0
    var newSelection: Int = 0

    var buttons: [NSButton]?
    var tabViewDelegate: NSTabViewController?

    @IBAction func selectedButton(_ sender: NSButton) {
        newSelection = sender.tag
        tabViewDelegate?.selectedTabViewItemIndex = newSelection

        buttons![oldSelection].state = .off
        sender.state = .on

        oldSelection = newSelection
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        buttons = (myStackView.arrangedSubviews as! [NSButton])
    }

    override var representedObject: Any? {
        didSet {
        // Update the view, if already loaded.
        }
    }

    override func prepare(for segue: NSStoryboardSegue, sender: Any?) {
        // Once on load
        tabViewDelegate = segue.destinationController as?  NSTabViewController
    }

}

【讨论】：

我无法停止享受这个答案的美丽和优雅。

【解决方案3】：

SwiftUI

实施

struct SystemSegmentControl : View {
    
    // MARK: - Internal -

    @Binding var selection : Int
    let systemImages: [String]

    var body : some View {
        HStack(spacing: 5) {
            ForEach (0..<systemImages.count) { i in
                SystemSegmentButton(selection: self.$selection, selectionIndex: i, systemImage: systemImages[i])
              }
        }
    }
}


struct SystemSegmentButton : View {
    
    // MARK: - Internal -

    @Binding var selection : Int
    let selectionIndex: Int
    let systemImage : String

    var body : some View {
        Button(action: { self.selection = self.selectionIndex }) {
            Image(systemName: systemImage)
                .padding(8)
                .foregroundColor(selectionIndex == selection ? .controlAccentColor : .controlColor)
        }
        .buttonStyle(BorderlessButtonStyle())
    }
}

用法

struct SettingsView: View {
    
    // MARK: - Internal -
            
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                SystemSegmentControl(selection: $selection, systemImages: ["slider.horizontal.3", "eye"])
                Divider()
                switch selection {
                case 0:
                    Text("Tab 1")
                default:
                    Text("Tab 2")
                }
            }
            .frame(width: geometry.size.width, height: geometry.size.height, alignment: .topLeading)
        }
        .frame(width: 250)
    }
    
    // MARK: - Private -
    
    @State private var selection = 0

}

结果

【讨论】：