ios SwiftUI:如何使ZStack嵌入式组件具有相同的圆角半径

kr98yfug  于 2023-03-14  发布在  iOS
关注(0)|答案(1)|浏览(197)

我有两个200*200颜色堆叠在一个ZStack中,具有完全相同的圆角半径40。发现白色无法覆盖其下四个角的红色。为什么会发生这种情况?有任何解决方案吗?

var body: some View {
        ZStack {
            Color.red.frame(width: 200, height: 200)
                .cornerRadius(20)
            Color.white.frame(width: 200, height: 200)
                .cornerRadius(20)
        }
    }

尝试在ZStack上附加cornerRadius,但结果相同

6jjcrrmo

6jjcrrmo1#

问题是你在同一个位置画了两次相同的部分透明的形状,alpha合成并不能处理这个问题,更深入的解释请参见this answer
cornerRadius修改器移动到ZStack上没有任何帮助。ZStack没有自己的外观,因此它只是将修改器向下传递给其子对象。
你需要告诉SwiftUI将角遮罩作为一个组而不是单独应用到ZStack的子对象。一种方法是使用compositingGroup修饰符:

var body: some View {
    ZStack {
        Color.red.frame(width: 200, height: 200)
        Color.white.frame(width: 200, height: 200)
    }
    .compositingGroup()
    .cornerRadius(40)
}

相关问题