有没有办法在 macOS SwiftUI 开发中使用 SF Symbols？

Posted 2023-02-24

【中文标题】有没有办法在 macOS SwiftUI 开发中使用 SF Symbols？

【英文标题】：Is there a way to use SF Symbols in macOS SwiftUI development?

【发布时间】：2019-09-24 10:34:36

【问题描述】：

SF Symbols 提供了一组超过 2,400 个一致且高度可配置的符号，您可以在应用中使用它们。 Apple 设计了 ​​SF Symbols 以与 San Francisco 系统字体无缝集成，因此这些符号自动确保与各种粗细和大小的文本在光学上垂直对齐。

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

据我所知，在 macOS 项目中尝试使用 SF 符号时，macOS 不支持 NSImage(systemName: String) 语法。

具体来说，我试图在工具栏项上使用 SF Symbol 字形。

【问题讨论】：

您是否有理由希望使用NSImage 而不是Image？毕竟，您使用的是SwiftUI。

他想使用Image还是NSImage都没有关系，因为它们都不支持macOS上的init(systemName:)初始化器。

【参考方案1】：

SF Symbol 现在可用于 ma​​cOS 11。

SF 符号适用于 ios 13 及更高版本、macOS 11 及更高版本、watchOS 6 及更高版本以及 tvOS 13 及更高版本。

这是你如何使用它：

NSImage(systemSymbolName: "hammer", accessibilityDescription: nil)

如果您想支持 macOS 10.15 及更低版本，您必须使用 SF Symbols Mac 应用程序并将符号导出为 SVG，然后将其导入 Xcode 项目中的资产文件。您可以从here 获取该应用程序。

【讨论】：

当我尝试使用这个初始化器时，为什么 Xcode 无法识别它？

我使用的是 Xcode 12.1 和 macOS 11。我猜我需要 Xcode 12.2 或 12.3。你是哪个版本的？

更新到 Xcode 12.2 后，符号出现了。这是此 API 的最低版本。

为 macOS 11.1 编译时，Xcode 无法为我完成 systemSymbolName。我使用了NSImage *image = [NSImage imageWithSystemSymbolName:@"hammer" accessibilityDescription:nil];（也许我有错误的objc语法，因为一个是type method，另一个是initializer）。

在将nil 赋予accessibilityDescription: 参数时，这是一个不好的例子！人们盲目地复制/粘贴这个。为了支持有视力障碍的人，您应该传递一个有用的（和本地化的）文本，用户可以通过 VoiceOver 阅读！

【参考方案2】：

macOS 不支持 SF 符号（目前）

但您可以下载SF Symbols App 并将您需要的符号导出为独立图像。

【讨论】：

可能这就是我想要的。感谢您的提示！

我在here解决了这个问题

如何在旧的 iOS 应用和 macOS 上支持旧金山字体burcugeneci.wordpress.com/…

@VictorKushnerov 将符号导出为图像，根据需要对其进行缩放并将它们添加到您的资产目录中。

@vadian 不同的设备有不同的 dpi。我更喜欢使用矢量图像在所有设备上呈现高质量。

【参考方案3】：

SF 符号在 macOS 上不可用。来自 Apple 的人机界面指南：

您可以在运行 iOS 13 及更高版本、watchOS 6 的应用中使用 SF 符号 及更高版本，以及 tvOS 13 及更高版本。

【参考方案4】：

您还可以将 SF Symbols 应用程序中的符号导出为 SVG，然后使用此工具将其转换为 SwiftUI Shape：quassummanus.github.io/SVG-to-SwiftUI/

【参考方案5】：

如果您的 macOS 版本低于 macOS 11。

下载sfsymbols并导出所有符号https://github.com/davedelong/sfsymbols

在您的 Xcode 项目中选择 Assets.xcassets

将图标集文件夹作为新资源拖到 Xcode 中的 Assets.xcassets

【参考方案6】：

目前还没有办法在 macOS 上使用 SF 符号。但是，您可以将此扩展用作 macOS 的后备，以便您的代码可以在多个平台上运行。

extension Image 
    init(systemName: String) 
        self.init("YOUR FALL BACK IMAGE(s)")
    

【参考方案7】：

重要 在使用下面的代码之前阅读这篇文章How to support San Francisco Fonts on old iOS app and macOS

Button(action: ) 
  Image(systemName: "star")            

我为 macOS 制作了Image，如下所示

这就是它在 macOS 上的外观

对于剪切/粘贴：

import SwiftUI

#if os(macOS)
struct Image: View 
  let symbol: String

  init(systemName: String) 
    self.symbol = [
      "speaker":      "?",
      "speaker.fill": "?",
      "star":         "☆",
      "star.fill":    "★"
      ][systemName] ?? "?"   

  var body: some View 
    Text(symbol)
  

#endif

【讨论】：

除非您要求所有用户都安装该字体，否则这将不起作用。

是的，刚刚在 App 中这样使用它们，发现它们在 Apple 审阅者的机器上看起来像问号。