SwiftUI在圆角矩形内遮罩矩形 [英] SwiftUI Mask a rectangle inside a rounded rectangle

问题描述

你好.我想知道，在SwiftUI中，如何遮罩圆角矩形的内容，以使子矩形夹住角.

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

我尝试将.mask应用于白色矩形，但是它给期望值带来了不同的结果(有时它不显示粉红色矩形).

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

  ZStack(对齐方式:.topLeading){RoundedRectangle(cornerRadius:16，样式:.continuous).foregroundColor(.white).shadow(半径:10)//在这里尝试使用.mask长方形().fill(Color.pink).frame(minWidth:0，maxWidth:.infinity，maxHeight:150，对齐方式:.top).clipped()}.clipShape(RoundedRectangle(cornerRadius:16))//<<这里 ！！.frame(宽度:300，高度:450，对齐方式:.center) 

Hello there. I am wondering, in SwiftUI, how do you mask the contents of a rounded rectangle so that a child rectangle clips the corners.

In my example I have a white rounded rectangle and a pink rectangle on a zstack, I've tried to apply clipping, but the pink rectangle does not conform to the corners.

I've tried applying .mask to the white rectangle, but it gives different results to expectations (sometimes it doesn't show the pink rectangle).

I did find an example where you can set your own cornerRadius Round Specific Corners SwiftUI

But I was wondering if perhaps there was a way to mask the internals/body of the pink rectangle so that it conforms to the parent's rounded rectangle?

My code follows;

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)
    }

Edit: To clarify:

The pink rectangle should remain as a rectangle, but clip the top left and right to match the parent white rounded rectangle.

解决方案

If I correctly understood your goal, here is a solution (tested with 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)

这篇关于SwiftUI在圆角矩形内遮罩矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！