SwiftUI镜像clipsToBounds

Question

在尝试使用SwiftUI (Xcode11.0beta2)时，我尝试用图像填充视图：

Image("large")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 80, height: 80, alignment: .center)
    .border(Color.black)

如下所示：

​

​

我想应用类似于UIView.clipsToBounds的东西，这样图像就被剪裁了，盒子外面的部分就看不见了。

Answer 1

您可以使用.clipped()修饰符，其效果与UIView.clipsToBounds类似

Image("large")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 80, height: 80, alignment: .center)
    .border(Color.black)
    .clipped() // Equal to clipsToBounds = true

Answer 2

Image("large")
   .resizable()
   .clipShape(Circle())
   .frame(width: 200.0, height: 200.0)
   .overlay(Circle().stroke(Color.white,lineWidth:4).shadow(radius: 10))

​

​

Answer 3

Use GeometryReader can fix the issue where if the clipped region of the image overlaps a button, that button will NOT work

like this:
GeometryReader { geo in
   Image("large")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 80, height: 80, alignment: .center)
    .border(Color.black)
 }.frame(width: 150, height: hh)