SwiftUI 图像与标签使用详解：从SF Symbols到自定义图片

上一篇 SwiftUI 文本 介绍了 SwiftUI 中使用Text显示文本。

今天我们介绍 SwiftUI 中使用Image显示图片。

在本章中，我们将探讨Label的使用，这是最常见的用户界面组件之一，以及用于在屏幕上渲染图像的Image视图。 与上一章类似，我将通过构建一个简单的示例演示如何使用Image。

本章涵盖以下主题：

• 什么是SF Symbols以及如何显示系统图像
• 如何显示自定义图像
• 如何调整图像大小
• 如何使用ignoresSafeArea显示全屏图像
• 如何创建圆形图像
• 如何为图像应用叠加效果

目录

1. 创建一个新的SwiftUI项目
2. 理解SF Symbols
3. 显示系统图像
4. 使用自定义图像
5. 调整图像大小
6. 创建圆形图像
7. 为图像应用叠加效果
8. 多色SF Symbols
9. 可变颜色
10. 总结

创建一个新的SwiftUI项目

首先，启动Xcode并创建一个新的项目，选择iOS下的App模板。将项目命名为SwiftUIImage。组织名称可以填写你的公司或组织名称，例如com.yourcompany。确保在用户界面（User Interface）选项中选择SwiftUI。点击下一步并选择一个文件夹来保存项目。

保存项目后，Xcode将加载ContentView.swift文件并显示设计/预览画布。如果看不到预览，可以通过Xcode菜单选择Editor > Canvas来启用。

理解SF Symbols

note

SF Symbols是Apple设计的一套图标库，包含超过5,000个符号，旨在与San Francisco系统字体无缝集成。这些符号具有九种重量和三种比例，并且可以自动与文本对齐。SF Symbols 5引入了更多的动画和新的符号，增强了自定义符号的功能。

在展示图像之前，让我们讨论图像的来源。你可以为应用提供自己的图像，但自iOS 13起，Apple引入了一套名为SF Symbols的系统图像集，开发者可以在任何应用中使用。随着iOS 18的发布，Apple进一步改进了图像集，发布了SF Symbols 6，包含超过800个新符号并支持一系列新动画。

这些图标之所以称为符号，是因为它们与Apple内置的San Francisco字体无缝集成。一个主要优点是无需额外安装即可在任何运行iOS 13或更高版本的设备上使用这些符号。

需要注意的是，不同iOS版本对符号的支持有所不同。基本符号集在iOS 13及以上版本均可使用，而最新的SF Symbols仅限于iOS和iPadOS 18.0。这意味着如果你希望在应用中使用最新符号，需要考虑应用的最低支持iOS版本，并为旧系统用户提供备用选项。

通过利用SF Symbols，你可以确保应用图标在Apple平台上具有一致和原生的外观，同时享受其可扩展性和辅助功能。记得在使用新符号时考虑版本兼容性。

要使用符号，你只需要知道符号的名称。Apple发布了一个名为SF Symbols的应用，允许你轻松浏览和查找适合需求的符号。强烈建议在继续下一部分之前安装该应用。

显示系统图像

要在屏幕上显示系统图像（符号），你需要使用Image视图并初始化systemName参数，如下所示：

Image(systemName: "cloud.heavyrain")

这将创建一个图像视图并加载指定的系统图像。正如之前提到的，SF Symbols与San Francisco字体无缝集成。你可以通过应用font修饰符轻松调整图像的大小：

Image(systemName: "cloud.heavyrain")
    .font(.system(size: 100))

由于符号实际上是字体的一部分，你可以使用size参数来调整字体大小，从而改变图像的尺寸。

同样，由于SF Symbols是字体，你可以应用如foregroundStyle等修饰符来改变其外观。例如，将符号颜色更改为蓝色：

Image(systemName: "cloud.heavyrain")
    .font(.system(size: 100))
    .foregroundStyle(.blue)

要添加阴影效果，可以使用shadow修饰符：

Image(systemName: "cloud.heavyrain")
    .font(.system(size: 100))
    .foregroundStyle(.blue)
    .shadow(color: .gray, radius: 10, x: 0, y: 10)

使用自定义图像

除了使用系统图像，你可能需要在应用中使用自己的图像。以下是如何使用Image视图加载自定义图像的方法。

注意：你可以使用自己的图像，但如果没有合适的图像，可以从Unsplash下载这张图片，并将文件名更改为paris.jpg以便跟随示例。

步骤：

1. 导入图像到资产目录：

   • 确保你已经准备好图像文件（例如paris.jpg）。
   • 按Command+0在Xcode中显示项目导航器，选择Assets。
   • 打开Finder并将图像拖到资产目录的侧边栏中。或者，右键点击空白区域选择**Import...**导入图像。

2. 在代码中显示图像：

   • 使用Image视图并传入图像名称：
   Image("paris")
   • 这将在预览画布中显示图像。但由于图像分辨率较高（4437x6656像素），你可能只会看到图像的一部分。

调整图像大小

要调整图像大小，可以使用resizable修饰符：

Image("paris")
    .resizable()

默认情况下，resizable修饰符会以拉伸模式调整图像，即图像会被拉伸以填满整个视图区域（除顶部和底部区域外）。

完整示例：

Image("paris")
    .resizable()
    .scaledToFit()
    .frame(width: 300)

内容模式：

• scaledToFit：保持图像的原始宽高比，并缩放图像以适应视图区域。
• scaledToFill：保持图像的原始宽高比，并缩放图像以填满视图区域，可能会裁剪图像。

例如，使用.scaledToFill：

Image("paris")
    .resizable()
    .scaledToFill()
    .frame(width: 300)
    .clipped()

使用clipped修饰符可以裁剪超出视图区域的部分，确保图像不会溢出。

创建圆形图像

除了将图像裁剪为矩形形状，SwiftUI还提供了多种形状修饰符，如圆形、椭圆形和胶囊形。要创建圆形图像，可以使用clipShape修饰符：

Image("paris")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 300)
    .clipShape(Circle())

或者，使用更简洁的.circle：

Image("paris")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 300)
    .clipShape(.circle)

为图像应用叠加效果

SwiftUI提供了overlay修饰符，允许你在图像上叠加另一个视图。例如，在现有图像上叠加一个系统图像（如heart.fill）：

Image("paris")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 300, height: 300)
    .clipShape(.circle)
    .overlay(
        Image(systemName: "heart.fill")
            .font(.system(size: 50))
            .foregroundColor(.black)
            .opacity(0.5)
    )

示例：在图像上叠加文本

你还可以在图像上叠加文本：

Image("paris")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .overlay(
        Text("If you are lucky enough to have lived in Paris as a young man, then wherever you go for the rest of your life it stays with you, for Paris is a movable feast.\n\n- Ernest Hemingway")
            .fontWeight(.heavy)
            .font(.system(.headline, design: .rounded))
            .foregroundStyle(.white)
            .padding()
            .background(Color.black)
            .cornerRadius(10)
            .opacity(0.8)
            .padding(),
        alignment: .top
    )

在此示例中，overlay修饰符接受一个Text视图，并将其叠加在图像的顶部。通过调整alignment参数，可以控制叠加视图的位置。

使用叠加效果暗化图像

你还可以通过在图像上叠加一个半透明的黑色视图来暗化图像：

Image("paris")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .overlay(
        Color.black
            .opacity(0.4)
    )

或者，使用Rectangle：

Image("paris")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .overlay(
        Rectangle()
            .foregroundStyle(.black)
            .opacity(0.4)
    )

这种方法尤其适用于在明亮的图像上叠加浅色文本，以提高文本的可读性。

示例：在暗化图像上叠加文本

Image("paris")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 300, height: 300)
    .overlay(
        Color.black
            .opacity(0.4)
            .overlay(
                Text("Paris")
                    .font(.largeTitle)
                    .fontWeight(.black)
                    .foregroundStyle(.white)
                    .frame(width: 200)
            )
    )

在这个示例中，我们首先用半透明的黑色叠加层暗化图像，然后在其上叠加一个白色的“Paris”文本。

多色SF Symbols

从iOS 15开始，SF Symbols提供了四种渲染模式，允许你为符号应用多种颜色。比如，square.and.arrow.down符号支持调色板渲染。你可以为符号应用两种或更多对比色。

在SwiftUI中，可以使用symbolRenderingMode修饰符来更改渲染模式，并使用foregroundStyle应用多种颜色：

Image(systemName: "square.and.arrow.down")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.indigo, .yellow, .gray)
    .font(.system(size: 200))

在此代码中，我们将符号渲染模式设置为palette，并通过foregroundStyle修饰符应用多种颜色。

可变颜色

SF Symbols还支持可变颜色功能，你可以通过调整百分比值来改变符号的颜色。这在表示进度等场景中特别有用。

示例：使用可变颜色

Image(systemName: "slowmo", variableValue: 0.6)
    .symbolRenderingMode(.palette)
    .foregroundStyle(.indigo)
    .font(.largeTitle)

在此示例中，我们为符号设置了variableValue参数，并通过foregroundStyle应用颜色。可变颜色适用于所有渲染模式，允许你灵活地调整符号的视觉效果。

总结

本章探讨了在SwiftUI中处理图像的多种方法。我们展示了如何轻松显示图像，并应用一系列修饰符来实现所需的视觉效果。其中，SF Symbols作为内置图标系统，对于独立开发者来说尤其有价值，它消除了寻找和集成第三方图标的需求，大大简化了开发过程。

通过利用SwiftUI的图像功能和SF Symbols，你可以轻松创建视觉上吸引人且一致的界面，节省时间并确保应用符合Apple的设计语言，提升整体用户体验。随着你继续构建SwiftUI项目，记得充分探索这些图像工具的潜力，打造出精美且专业的应用。

继续学习SwiftUI的高级功能，如动画、数据绑定和自定义控件，将进一步提升你的开发技能，帮助你创建更具吸引力和互动性的应用。