SwiftUI Маска прямоугольника внутри прямоугольника с закругленными углами

Question

Здравствуйте. Мне интересно, в SwiftUI, как вы маскируете содержимое прямоугольника с закругленными углами, чтобы дочерний прямоугольник обрезал углы.

В моем примере у меня есть белый прямоугольник с закругленными углами и розовый прямоугольник на zstack, я Я пробовал применить обрезку, но розовый прямоугольник не соответствует углам.

Я пробовал применить .mask к белому прямоугольнику, но это дает разные результаты, чем ожидалось (иногда это не отображается розовый прямоугольник).

Я нашел пример, в котором вы можете установить свой собственный угол Радиус Спецификация округления c Углы 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)
    }

Изменить: чтобы уточнить:

Розовый прямоугольник должен остаться как прямоугольник, но обрезать верхний левый и правый угол, чтобы соответствовать родительскому белому прямоугольнику с закругленными углами.

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

Answer 2

@ Asperi уже опубликовал отличный ответ, я сделал это также, используя модификатор mask в SwiftUI . Кроме того, вам нужно только один раз установить 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)
)

Answer 3

проверьте это

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