SwiftUI中Image自适应大小AspectFill、AspectFit

SwiftUI中想要让Image能够实现类似于UIViewContentModeAspectFit或者ApectFill的效果需要把两个修改器(modifier)结合起来使用。

1
2
3
Image("xxx")
.resizable(resizingMode: .stretch)
.aspectRatio(contentMode: .fit)

func resizable(capInsets:, resizingMode:)对应的是UIImage的resizableImageWithCapInsets:resizingMode:capInsets确定了不被拉伸影响的上下左右四边距,四边距以外的部分会被resizingMode影响。Image.ResizingMode.stretch铺满整个空间,会发生形变,Image.ResizingMode.stretch平铺,也就是说如果图片的大小不足以占满空间就把图片复制多份,如果图片比空间大只会展示出来和空间一样大的部分并且图片的左上角和容器的左上角对齐,其他部分会被裁掉。

aspectRatio(_ aspectRatio:,contentMode:)修改器设置长宽比和填充方式,aspectRatio参数是视图的长:宽contentMode是填充方式其中Fill表示填满空间,长边会超出容器,Fit会保证长边填满空间短边会留出空白。

据我观察,单独对Image使用aspectRatio修改器没有效果,需要结合resizable修改器才行。

到公众号【iOS开发栈】学习更多SwiftUI、iOS开发相关内容。