iOS SwiftUI 中级之视图的剪裁效果《春泉洗药图》
最终效果
名画赏析
SwiftUI世界里万物皆视图,因此苹果为我们提供了多种方式来改变视图的形状。例如我们可以对视图进行剪切、遮罩、虚化和其他更为复杂的操作。下面我们就一起来学习一下吧
剪裁
有时我们可以frame修饰符来限制视图的大小,但必须允许视图可以缩放,frame才能生效。如果缩放后的图像大于提供的frame,则可造成超出该范围并与其他视图重叠。为了解决这个问题,SwiftUI允许我们将视图的内容剪切到其frame内。让我们看几个个简单的例子。
1. 剪裁掉多余部分
struct ContentView: View {
var body: some View {
VStack{
Text("春泉洗药图")
.font(.largeTitle)
Image("chun_quan_xi_yao_tu12")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(height: 300)
}
}
}
效果
如上图所示,Image视图单独使用frame造成了溢出范围。下面我们添加clipped修饰符来解决这个问题。
struct ContentView: View {
var body: some View {
VStack{
Text("春泉洗药图")
.font(.largeTitle)
Image("chun_quan_xi_yao_tu12")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(height: 300)
.clipped(antialiased: true)
}
}
}
如您在上面的示例中看到的,我们使用了clipped修饰符。该修饰符使我们可以在其范围内剪切视图的内容。它还采用抗锯齿效果来平滑视图。