SwiftUI 精通之路06: SF Symbols

789 阅读2分钟

前言

更新还在继续... 这是我继续参加 第四期创作者训练营 的文章,继续不断总结自己的学习经历。点击查看活动链接

今日学习鸡汤: 无谓所无味,有苦说不出,反正就是懒了...

本章节我们学习如何使用Apple平台不同大小、比例和多色的系统图标。

正文

我们进入我们的工程项目点击Xcode顶部导航的 File > New > File from Template 选择 iOS > SwiftUI 模版创建新的SwiftUI文件

快捷键 Command + N,我们新建文件名为 SFSymbolsBootcamp.swift

Apple 提供了一组超过 2,400 个可配置符号,您可以在应用程序中使用它们。它们与 macOS、iOS、iPadOS、watchOS 和 tvOS 的系统字体 San Francisco 无缝协作。

SF Symbols

SF 符号具有很强的适应性,可以配置为多种重量和尺寸。使用它们就像复制然后粘贴到您的项目中一样简单。要使用这些,请确保您的设备上安装了 SF Symbols app 应用程序。

兼容性

SF Symbols 与 iOS 13 及更高版本、macOS 11 及更高版本、watchOS 6 及更高版本以及 tvOS 13 及更高版本兼容。

粗细程度(重量程度)

SF 符号有各种重量和比例。这使您可以创建易于调整的设计。一些粗细选项包括细、细、粗、重等。下图显示了可用的粗细。

使用 SF Symbols

在 SwiftUI 中,您可以使用 SF Symbols 的名称轻松生成图标。此外,您还可以自定义尺寸(小、中、大)、更改粗细以及更改图标颜色。您还可以使用字体修改器编辑图标。

Image(systemName: "figure.step.training.circle")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .font(.title)
    .foregroundStyle(.blue)
    .frame(width: 300, height: 200)

注意图中代码...

改变尺寸或者缩放比例

您可以将 imageScale 修改器添加到 SF 符号,将其视为图像。 imageScale 修饰符采用以下值之一 - 大、中、小。

VStack(spacing: 30) {
    /* 大号 */
    Image(systemName: "gear")
        .imageScale(.large)
    
    /* 中号 */
    Image(systemName: "gear")
        .imageScale(.medium)
    
    /* 小号 */
    Image(systemName: "gear")
        .imageScale(.small)
}

多色图标

您可以使用多色 SF 符号。在应用程序中,它们出现在“多色”类别中。或者,您可以单击工具栏中的颜色图标。

渲染模式修饰符对于显示所有颜色是必需的。

Image(systemName: "paperplane.circle.fill")
    .renderingMode(.original)

注意:如果您在图标上使用字体属性,您将无法使用多色选项。

好的!

关于图标的内容就这些,一起进步,下章再见👋