SwiftUI 在圆角矩形内屏蔽一个矩形答案

【问题标题】：SwiftUI Mask a rectangle inside a rounded rectangleSwiftUI 在圆角矩形内屏蔽一个矩形
【发布时间】：2020-09-14 08:05:59
【问题描述】：

你好。我想知道，在 SwiftUI 中，你如何屏蔽圆角矩形的内容，以便子矩形剪辑角落。

在我的示例中，我在 zstack 上有一个白色圆角矩形和一个粉红色矩形，我尝试应用剪辑，但粉红色矩形不符合角。

我尝试将 .mask 应用于白色矩形，但它给出了与预期不同的结果（有时它不显示粉红色矩形）。

我确实找到了一个示例，您可以在其中设置自己的cornerRadius Round Specific Corners SwiftUI

但我想知道是否有办法掩盖粉红色矩形的内部/主体，使其符合父圆角矩形？

我的代码如下；

var body: some View {
        GeometryReader { geometry in

            Color.gray
                .edgesIgnoringSafeArea(.top)
                .overlay(

                    ZStack (alignment: .topLeading) {

                        RoundedRectangle(cornerRadius: 16,
                                         style: .continuous)
                            .foregroundColor(.white)
                            .shadow(radius: 10)
                             // Tried using .mask here 

                        Rectangle()
                            .fill(Color.pink)
                            .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 150, alignment: .top)
                            .clipped()


                    }
                    .frame(width: 300, height: 450, alignment: .center)
            )

        }
        .edgesIgnoringSafeArea(.all)
    }

编辑：澄清：

粉红色矩形应保持为矩形，但裁剪左上角和右上角以匹配父白色圆角矩形。

【问题讨论】：

标签： ios swiftui mask round-rect

【解决方案1】：

如果我正确理解了您的目标，这里有一个解决方案（使用 Xcode 11.4 测试）

ZStack (alignment: .topLeading) {

    RoundedRectangle(cornerRadius: 16,
                     style: .continuous)
        .foregroundColor(.white)
        .shadow(radius: 10)
         // Tried using .mask here

    Rectangle()
        .fill(Color.pink)
        .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 150, alignment: .top)
        .clipped()


}
.clipShape(RoundedRectangle(cornerRadius: 16))       // << here !!
.frame(width: 300, height: 450, alignment: .center)

【讨论】：

是否可以只定义一次16？为 clipShape 和 RoundRectangle 定义两次似乎有点傻？如果没有，那很好。
@zardon，幻数总是邪恶的，这里可以，在实际项目中最好使用命名常量。
非常感谢，这正是我需要的！

【解决方案2】：

看看这个

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in

            Color.gray
                .edgesIgnoringSafeArea(.top)
                .overlay(

                    ZStack (alignment: .topLeading) {

                        RoundedRectangle(cornerRadius: 16,
                                         style: .continuous)
                            .foregroundColor(.white)
                            .shadow(radius: 10)
                        // Tried using .mask here

                        Rectangle()
                            .fill(Color.pink)
                            .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 150, alignment: .top)
                            .clipShape(RoundedRectangle(cornerRadius: 16)) // <<<<<<


                    }
                    .frame(width: 300, height: 450, alignment: .center)
            )

        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

【讨论】：

粉红色矩形应保持为矩形，但裁剪左上角和右上角以匹配父白色圆角矩形。我会更新问题以反映这一点

【解决方案3】：

@Asperi 已经发布了一个很好的答案，我在SwiftUI 中使用mask 修饰符也做到了这一点。此外，您只需设置一次cornerRadius。

VStack(spacing: 0)
{
    ZStack(alignment: .center)
    {
       Rectangle()
       .fill(Color.red)
       .frame(width: 66, height: 20)

    }


    ZStack(alignment: .center)
    {
       Rectangle()
       .fill(Color.white)
       .frame(width: 66, height: 46)

    }
}
.mask(Rectangle()
        .cornerRadius(3.0)
        .frame(width: 66, height: 66)
)

【讨论】：

【解决方案4】：

我认为更简单的方法是将cornerradius应用于ZStack

ZStack (alignment: .topLeading) {

    RoundedRectangle(cornerRadius: 16,
                 style: .continuous)
        .foregroundColor(.white)
        .shadow(radius: 10)
         // Tried using .mask here

    Rectangle()
       .fill(Color.pink)
       .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 150, alignment: .top)
        //.clipped() //<<= here
}
.frame(width: 300, height: 450, alignment: .center)
.cornerRadius(20) //<<= here

【讨论】：