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 视图中的图像，一些常用的修饰符如下 −

示例

以下 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()
}

输出