SwiftUI:如何仅裁剪图像的底部

时间:2020-03-29 02:01:32

标签: image swiftui

我有一个图像,希望以200的高度固定在视图顶部。我从以下内容开始:

struct ContentView: View {
    var body: some View {
        VStack {
            Image("frog")
                .resizable()
                .scaledToFill()
                .frame(height:200)

            Spacer()
        }
    }
}

这给了我

enter image description here

您可以看到蓝色轮廓框(高度为200)。现在,我希望图像继续从安全区域溢出以填充视图的顶部。但是我想将图像裁剪到其底框,所以我得到了这样的东西:

enter image description here

我也可以这样处理,将整个图像向上移动到图像的自然底部位于帧的底部:

enter image description here

我尝试了各种各样的修饰符,以及使用GeometryReader,但都无法获得任何结果。 我需要使用它来处理任意尺寸的图像。

2 个答案:

答案 0 :(得分:1)

要向上移动图像,您可以执行以下操作:

.frame(height:200, alignment: .bottom)

答案 1 :(得分:1)

以下为您提供第二张屏幕截图的效果:

Image("frog")
    .resizable()
    .scaledToFill()
    .frame(height:200)
    .mask(Rectangle().edgesIgnoringSafeArea(.top)) // << here !!