SwiftUI - 自定义图像视图

图像视图在屏幕上显示单个或多个图像。它是 SwiftUI 中最重要的视图。使用图像视图，我们可以轻松地从资源目录中显示图像。它可以轻松地与各种图像格式一起使用，例如 PNG、JPEG、PDF 等。它还可以高效地与 SFSymbols 协同工作。

图像视图轻松管理和操作图像，以创建更具创意的布局。它还支持各种修饰符来拉伸、缩放、调整大小或将图像固定到特定位置。图像视图只能显示图像，它没有交互性。

在 SwiftUI 中使用图像视图显示图像

使用图像视图显示图像是一种非常直接的方法，我们需要遵循以下步骤在屏幕上显示图像：

步骤 1：准备图像

要在图像视图中显示图像，首先需要通过拖放图像文件将图像添加到 **Assets.xcassets** 文件夹中。

步骤 2：添加图像视图

要在视图中添加图像，请打开 ContentView.swift 文件，然后在 body 属性内使用图像视图。由于我们已将图像放在资源中，因此我们在图像视图中传递图像的引用。这降低了由于图像名称不正确而导致运行时错误的风险。如果对资源目录进行了任何更改，则会在代码中使用图像作为引用的位置发出通知，以便您可以在编译代码之前进行更改。

struct ContentView: View {
   var body: some View {
      Image("imageName")
   }
}

步骤 3：运行应用程序

在模拟器或设备上运行应用程序以查看图像。

示例

以下 SwiftUI 程序用于创建图像视图。

import SwiftUI

struct ContentView: View {
   var body: some View {
      Image(.wallpaper)
   }
}

#Preview {
   ContentView()
}

输出

在 SwiftUI 中自定义图像视图

通过自定义图像视图，我们可以借助 SwiftUI 提供的各种修饰符来更改图像的外观和行为以符合设计要求。使用这些修饰符，我们可以更改图像视图的形状、大小、颜色和其他视觉属性。SwiftUI 提供各种内置修饰符来自定义 Image 视图中的图像，一些常用的修饰符如下：

修饰符	描述
`frame(width:height:alignment:)`	用于显式设置图像视图的宽度和高度。
`resizable()`	用于调整图像大小。
`aspectRatio(contentMode:)`	用于在调整图像大小的同时管理图像的纵横比。
`clipShape(RoundedRectangle(cornerRadius:))`	用于使图像视图的角变圆。此修饰符还用于更改图像的形状。
`padding()`	用于在图像视图周围插入空间。
`Image(systemName:"SymbolName")`	用于显示 SF Symbol。
`shadow(radius:)`	用于在图像视图上应用阴影效果。
`overlay()`	用于在图像顶部覆盖另一个视图。
`opacity()`	用于设置图像视图的不透明度。

示例

以下 SwiftUI 程序用于自定义图像视图。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Image(.wallpaper)
            .resizable()
            .frame(width: 300, height: 200)
         Image(.wallpaper)
            .resizable()
            .frame(width: 300, height: 200)
            .clipShape(Capsule())
         Image(.wallpaper)
            .resizable()
            .frame(width: 300, height: 200)
            .shadow(radius: 30)
            .opacity(0.7)
         Image(systemName: "star")
            .frame(width: 300, height: 200)
            .font(.largeTitle)           
      }
   }
}

#Preview {
   ContentView()
}

输出

打印页面