主页 / coding / 问题 / 79272644
Accepted
Deepak Sharma
Asked: 2024-12-12 01:27:32 +0800 CST

SwiftUI“遮盖”视图的左侧和右侧部分

  • 772

我有一个圆角矩形，我想遮盖它的左右部分（其宽度可以自定义为State变量）。我希望圆角矩形在应用左右遮盖时保留其圆角矩形形状。我说遮盖是为了解释，但.mask如果在整个视图上对手势识别器的命中测试中产生问题，实际实现可能不会使用修饰符。

这是屏蔽圆角矩形左侧和右侧部分的代码。

struct MaskTesting: View {

  @State var rectWidth:CGFloat = 300
  @State var leftMaskWidth:CGFloat = 100
  @State var rightMaskWidth:CGFloat = 100

  var body: some View {
    
    Rectangle()
        .fill(Color.orange)
        .frame(maxHeight:70)
        .frame(width: rectWidth)
        .clipShape(RoundedRectangle(cornerRadius: 5))
        .overlay(alignment: .leading) {
            Rectangle()
                .fill(Color.purple)
                .frame(maxHeight:70)
                .frame(width: leftMaskWidth)
        }
        .overlay(alignment: .leading) {
            Rectangle()
                .fill(Color.purple)
                .frame(maxHeight:70)
                .frame(width: rightMaskWidth)
                .offset(x:rectWidth - 100)
        }
    
}

输出是这样的。但我希望输出中的主橙色视图是圆角矩形而不是普通矩形。如何在 SwiftUI 中实现它？

在此处输入图片描述

1 个回答

  1. Best Answer

    as RoundedRectanglemask 似乎是最明显的解决方案：

    Rectangle()
    .fill(.orange)
    .frame(maxHeight: 70)
    .frame(width: rectWidth)
    .mask {
        RoundedRectangle(cornerRadius: 5)
            .padding(.leading, leftMaskWidth)
            .padding(.trailing, rightMaskWidth)
    }
    .background(.purple)

    但是，您说这是不可能的，因为它不适用于命中测试。所以这里还有另外两种可能的技术。

    1. 使用.blendMode

    蒙版效果也可以通过 来实现.blendMode。具体来说，混合模式.destinationOut可用于从底层视图中“剪切”出形状。混合模式的“范围”需要通过应用 来限制.compositingGroup，否则它会继续烧入下层：

    Rectangle()
    .fill(.orange)
    .frame(maxHeight: 70)
    .frame(width: rectWidth)
    .overlay {
        RoundedRectangle(cornerRadius: 5)
            .padding(.leading, leftMaskWidth)
            .padding(.trailing, rightMaskWidth)
            .blendMode(.destinationOut)
            .background(.purple)
            .compositingGroup()
    }

    截屏

    2. 使用自定义Shape夹子形状

    另一种方法是定义一个自定义的Shape，然后可以将其用作剪辑形状：

    struct CustomClipShape: Shape {
    let leftMaskWidth: CGFloat
    let rightMaskWidth: CGFloat

    func path(in rect: CGRect) -> Path {
        Path(
            roundedRect: CGRect(
                x: rect.minX + leftMaskWidth,
                y: rect.minY,
                width: rect.width - leftMaskWidth - rightMaskWidth,
                height: rect.height
            ),
            cornerRadius: 5
        )
    }
}

    Rectangle()
    .fill(.orange)
    .frame(maxHeight: 70)
    .frame(width: rectWidth)
    .clipShape(
        CustomClipShape(
            leftMaskWidth: leftMaskWidth,
            rightMaskWidth: rightMaskWidth
        )
    )
    .background(.purple)

    结果看起来和以前一样。

    关于命中测试，可以通过设置相同的形状来限制接受命中测试的区域.contentShape：

    .contentShape(
    CustomClipShape(
        leftMaskWidth: leftMaskWidth,
        rightMaskWidth: rightMaskWidth
    )
)

    如果这些技术不能解决命中测试问题，那么也许您可以更详细地阐述问题到底是什么，以便可以将其作为主要问题来解决。

    • 1

相关问题