SwiftUI图片调整小纸条

·

1 min read

在SwiftPlayground中使用图片

我们可以使用Image将一个图片放入SwiftUI的View中,如果图片在Swift Playgrounds的资源库中,可以使用Image(uiImage: UIImage(#imageLiteral(resourceName: "young.jpg")))这样来使用,如果我们不加任何修饰就会看到图片原始的样子:

image.png

显然这两张图片无法完整的显示出来了。

Resizable

我们可以使用 .resizable() 修饰符来调整图片大小。它会让图片撑满当前自己View的区域。

image.png

SwiftUI帮我们达到了图片自动layout到整个屏幕的效果,但是,显然图片已经变形了。

Aspect ratio

fit

为了让图片保持原有尺寸的长宽比(不让其变形),我们可以使用.aspectRatio(contentMode: .fit) 修饰符,它会沿一个边缩放图像以适应大小,宽出的边就会留下空白,从而保证显示出整张图片来:

image.png

这样效果就非常棒了,在尽可能撑满当前View的情况下又不让图片保持了长宽比不发生变形的情况了。你完全可以使用.scaledToFit()修饰符替代.aspectRatio(contentMode: .fit),它们的效果是完全一样的:

image.png

fill

如果我们不想让任何一边有空白,.aspectRatio(contentMode: .fit) 会让图片沿最长的边填充View,这样就会发生最小的边图片会超出View的范围被放大。

image.png

我们对小宝宝的图片加上了fill,效果很好,所有的边都满了,但是图片的高也被放大了,把下面的小姐姐的图片向下挤压了。

如果我们把小姐姐的图片加上fill后,小姐姐的图片把下面的View充满了,但是显然也把小宝宝的图片挤没了。我们使用.scaledToFill()替代.aspectRatio(contentMode: .fit),再将图片所在的视图固定化大小看看就明白fill实质上是突破了View的边界的意思了:

image.png

Clipping

如果我们不想要让突破出去的部分显示出来,哪么你需要使用.clipped()修饰符手动剪裁突出的部分:

image.png

overlay

如果你即想使用fill又不想使用frame,使用Stack的auto layout,同时不让下面的图片挤压上方的图片呢?这时可以使用一个无色的Color占位,再使用overlay显示图片即可:

image.png