Skip to main content

3、使用Image

这一章，我们将介绍如何添加Image到View中。

Getting ready​

新建一个SwiftUI工程，叫做ImageApp

How to do it…​

首先让我们添加一些图片到Assert中，然后我们再介绍一些modifier来修改图片样式。

  1. 替换Text为VStack
  2. 从https://github.com/PacktPublishing/SwiftUI-Cookbook-2nd-Edition/tree/main/Resources/Chapter01/recipe3下载图片
  3. 拖动图片到Asserts中
  4. 添加一个Image到VStack中
Image("dogs1")

image-20211221224926711

  1. 添加一个.resizable()modifier, 他能让SwiftUI调整图片大小以适应可以用空间。
Image("dogs1")
.resizable()

image-20211221225044534

  1. 我们看到图片被压缩了，继续添加一个.aspectRatio
Image("dogs1")
    .resizable()
    .aspectRatio(contentMode: .fit)

image-20211221225341902

  1. 继续添加 dog-and-nature到VStack中
Image("dog-and-nature")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width:300, height:200)
    .clipShape(Circle())
    .overlay(Circle().stroke(Color.blue, lineWidth: 6))
    .shadow(radius: 10)
  1. 我们写个工具方法来获取UIImage
func getImageFromUIImage(image:String) -> UIImage {
    guard let img = UIImage(named: image) else {
        fatalError("Unable to load image")
    }
    return img
}
  1. 然后使用UIImage来加载图片
Image(uiImage: getImageFromUIImage(image:"dog2"))
    .resizable()
    .frame(width: 200, height: 200)
    .aspectRatio(contentMode: .fit)
  1. 最终效果

image-20211221225942417

How it works…​

添加Image到View上时，Image默认显示原始尺寸。图片可能大了，也可能小了。

要让Image适应屏幕大小，我们需要添加.resizablemodifier。这会让Image缩放以占满可用空间。

为了解决缩放的拉伸问题，我们可以使用.aspectRatiomodifier。

如果我们要限制图片大小固定为某个值，可以使用.framemodifier。

如果想裁剪图片为某个形状，可以使用.clipShapemodifier。

我们还可以使用.overlay和.shadow来添加边框和阴影。

注意modifer的顺序比较重要，不同顺序的组合可能得到不一样的结果。