SwiftUI 控件之 Image

发表于 更新于 分类于 阅读次数：

在 SwiftUI 中，我们可以使用Image控件来展示一张图片。

基础使用

在 SwiftUI中，如果我们需要使用Image显示一张图片，首先我们需要先将图片资源拖到蓝色的Assets文件夹中，然后使用图片的文件名加载显示。

1
Image("avatar")

在最新的 Xcode 15.0中，增加了使用下面的方式加载资源文件夹中的图片的特性：

1
Image(.avatar)

上面两种方式的效果是一样的。

常用的修饰器

宽高

设置图片显示的frame：

1
2
Image(.avatar)
	.frame(width: 100, height: 200)

当我们设置Image的frame后，我们发现它并没有按照我们所给的宽高进行显示，这是因为我们需要先添加 resizzble 修饰器。

1
2
3
Image(.avatar)
	.resizable()
	.frame(width: 100, height: 200)

填充

但是此时我们可能会发现，我们的图片显示变形 了，这主要是因为我们的图片宽高比例和所给的frame 的宽高比例并不一致。我们可以通过设置scaledToFill或者scaledToFit 修饰器来修饰图片的填充样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            VStack {
                Image(.avatar)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100, height: 200)
                    .border(.red)
                Text("scaledToFit")
            }
            Divider()
            VStack {
                Image(.avatar)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .scaledToFill()
                    .frame(width: 100, height: 200)
                    .border(.red)
                Text("scaledToFill")
            }
        }
    }
}

效果如下：

在预览图中，红色 的边框表示我们实际设置的frame 范围。在同一张图片和同样的frame设置下，我们可以很清楚的看到scaledToFit和scaledToFill的区别：

  • scaledToFit 会优先按照给定的frame 宽度（width）进行填充；
  • scaledToFill 会优先按照给定的frame 高度（height）进行填充。

对齐方式

我们可以在通过frame设置宽高的时候来设置图片的对齐方式：

1
.frame(width: 100, height: 200,alignment: .center)

默认情况下为居中（center）对齐方式.

图片裁切

当图片超出定义的frame范围时，可以使用clipped 修饰器让图片显示的范围和我们定义的frame 一致：

1
2
3
4
5
6
Image(.avatar)
     .resizable()
     .scaledToFill()
     .frame(width: 100, height: 200,alignment: .top)
     .border(.red)
     .clipped()

效果如下：

将图片按照形状进行裁切：

1
.clipShape(Circle())

给图片添加一个 Overlay

如果我们想要给Image添加一个遮罩层可以使用overlay修饰器，它的参数是一个View类型，这意味这我们可以将任意一个View类型的视图作为遮罩层。

1
2
3
4
5
6
.overlay {
                  Image(systemName: "heart.fill")
                      .foregroundStyle(.white)
                      .font(.system(size: 40))
                      .opacity(0.8)
              }

效果如下：

overlay也可以通过设置alignment参数来设置遮罩层的对齐方式，例如：

1
2
3
4
5
6
7
8
9
10
.overlay(alignment: .center, content: {
               Text("这是用AI生成的一个头像")
                   .foregroundStyle(.black)
                   .font(.title)
                   .fontWeight(.bold)
                   .padding()
                   .background(.white)
                   .clipShape(RoundedRectangle(cornerRadius: 8)) // 添加圆角
                   .opacity(0.8) // 透明度
           })

Image 加载显示 SF Symbols

SF Symbols 是 Apple 提供的一套系统内置的常用图标集。在最新的SF Symbols 5 中已经提供了总共5296个各种各样的图标。

在使用这些系统图标时，只需要使用Image(systemName:String)这个方法即可，systemName就是图标的名称。

1
Image(systemName: "heart.circle")

需要注意的一点是，SF Symbols 本质上还是属于字体的一部分，所以很多适用于字体设置的修饰器同样也适用于它。例如，

1
2
3
4
Image(systemName: "heart.circle")
             .font(.title)
             .fontWeight(.bold)
             .foregroundStyle(.red)

SF Symbols支持多种颜色和多种渲染模式。

通过代码可以这么进行设置：

1
2
3
4
5
Image(systemName: "pencil.circle.fill")
           .font(.largeTitle)
           .fontWeight(.bold)
           .symbolRenderingMode(.palette) // 渲染模式
           .foregroundStyle(.yellow, .tint, .red) // 颜色设置

对于一些特殊的Symbols，它可以设置一个可变的值，根据这个实现不同的样式。例如：

1
2
3
Image(systemName: "slowmo", variableValue: 0.2)
                .font(.system(size: 50))
                .foregroundStyle(.indigo)

不同值的效果如下：

在最新的 SwiftUI 和 SF Symbols中还支持添加动画效果，我们将在后续动画部分进行介绍。