如何使用图标创建一致的工具栏按钮

Question

想要的样子

我希望为我的应用程序制作一个工具栏，其中包含一些简单的按钮，每个按钮都有一个单色图标。下面是一些类似于我试图实现的工具栏按钮的示例，来自邮件的撰写窗口：

请注意，这些按钮具有一致的大小、内部填充、填充和阴影。这是 macOS 上非常一致的风格，出现在 Mail、Safari、Finder 等中。这让我怀疑有一个标准化的 UI 组件来创建这样的按钮。

如果我使用分段控件，每个按钮看起来都正确，每个图标都被正确填充：

现在我想添加与样式匹配的单个按钮。

尝试 1

我的第一次尝试是向NSButton工具栏添加一个“按钮”( )：

这导致了一个有点太短的宽按钮，并且没有与分段控件对齐：

尝试 2

我的第二次尝试是使用分段控件，只有 1 个分段。

这导致按钮具有正确的形状、大小等，但它相对于其标签偏离了中心。

当然，我可以手动调整按钮以匹配目标，但我觉得我错过了一些东西。创建这些标准按钮的正确方法是什么？

Answer 1

这实际上很容易做到，而且您已经很接近了。你可以用NSButton它。请注意，它有不同的样式（在 中定义NSButton.BezelStyle）可供选择。默认的一种是在窗口和模态中使用的一种。但是对于工具栏，为了匹配分段控件和搜索栏的样式，您可以选择样式.texturedRounded。

您还可以通过 Interface Builder 设置样式。请注意，您必须选择按钮本身，而不是它周围的工具栏项。

为了获得正确的大小，您似乎在工具栏项目中设置了图标，而不是按钮本身。

这是我的结果：