主页 / coding / 问题 / 78984884
Accepted
Deepak Sharma
Asked: 2024-09-14 18:27:36 +0800 CST

仅用背景颜色填充 SwiftUI 的一部分

  • 772

我正在尝试在 SwiftUI 中设计一个视频修剪器视图，如下所示。结果如下。我的问题是，我是否可以将中间部分（即除左右 20 个点和上下 5 个点之外的所有内容）透明，以便我可以在它们后面显示缩略图（也许通过自定义剪辑形状）？

在此处输入图片描述

  var body: some View {
    HStack(spacing: 10) {
        Image(systemName: "chevron.compact.left")
            .frame(height:70)
        
        Spacer()
        
        Image(systemName: "chevron.compact.right")
    }
    .foregroundColor(.black)
    .font(.title3.weight(.semibold))
    .padding(.horizontal, 7)
    .padding(.vertical, 3)
    .background(.yellow)
    .clipShape(RoundedRectangle(cornerRadius: 7))
    .frame(width: 300)
    .onGeometryChange(for: CGFloat.self) { proxy in
        proxy.size.width
    } action: { width in
        print("width = \(width)")
    }

}

2 个回答

  1. Best Answer

    而不是background和，而是clipShape使用background(_:in:fillStyle:)。这允许您指定要Shape在其中填充背景颜色的。

    你可以Shape这样写：

    struct VideoTrimmerBackgroundShape: Shape {
    func path(in rect: CGRect) -> Path {
        RoundedRectangle(cornerRadius: 7)
            .path(in: rect)
            .subtracting(
                RoundedRectangle(cornerRadius: 7)
                    .path(in: rect.insetBy(dx: 20, dy: 5))
            )
    }
}

    我只是从非嵌入的路径中减去嵌入的圆角矩形创建的路径。

    然后

    .background(.yellow, in: VideoTrimmerBackgroundShape())
// you don't need clipShape anymore!

    subtracting从 iOS 17 开始可用。如果需要支持较低版本，您可以直接添加较小的圆角矩形作为子路径，但使用奇偶填充。

    struct VideoTrimmerBackgroundShape: Shape {
    func path(in rect: CGRect) -> Path {
        var p = RoundedRectangle(cornerRadius: 7)
            .path(in: rect)
        p.addPath(
            RoundedRectangle(cornerRadius: 7)
                .path(in: rect.insetBy(dx: 20, dy: 5))
        )
        return p
    }
}

    .background(.yellow, in: VideoTrimmerBackgroundShape(), fillStyle: .init(eoFill: true))
    • 2

  2. 另一种裁剪背景部分的方法是使用 叠加层.blendMode(.destinationOut)。还需要将其应用于.compositingGroup()结果，以防止混合模式烧入更深的层。

    替换这些修饰符：

    .background(.yellow)
.clipShape(RoundedRectangle(cornerRadius: 7))

    和：

    .background {
    RoundedRectangle(cornerRadius: 7)
        .fill(.yellow)
        .overlay {
            Rectangle()
                .padding(.vertical, 5)
                .padding(.horizontal, 20)
                .blendMode(.destinationOut)
        }
        .compositingGroup()
}

    截屏

    您在已接受的答案的评论中提到，您希望 V 形看起来居中。由于您在侧面应用了 7 的填充，这意味着在内侧也应用了 7 的填充（或间距）。

    实现此目的的一种方法是将 V 形移动到覆盖层中。这样实际上整个视图就可以简化：

    var body: some View {
    RoundedRectangle(cornerRadius: 7)
        .fill(.yellow)
        .frame(width: 300, height: 76)
        .overlay {
            HStack(spacing: 7) {
                Image(systemName: "chevron.compact.left")
                Rectangle()
                    .padding(.vertical, 5)
                    .blendMode(.destinationOut)
                Image(systemName: "chevron.compact.right")
            }
            .padding(.horizontal, 7)
            .font(.title3.weight(.semibold))
            .foregroundStyle(.black)
        }
        .compositingGroup()
}

    截屏

    编辑在此特定情况下，您使用纯色填充，中间部分是方形矩形。这意味着，只需使用基本技术即可构建视图 - 无需使用混合模式，也无需使用自定义形状。

    • 使用HStack作为基础视图，就像您已经做的那样。
    • 要么修复的大小HStack，要么应用填充以将其大小限制在可用空间内。
    • 使图像在范围内达到全高HStack并根据需要应用填充。
    • 给图像添加黄色背景。
    • 不要填充 背景HStack，而是用合适粗细的线条描边其边框。
    • Spacer然后里面就会HStack自动出现“洞”。

    要使边角变圆，可以使用圆角矩形作为边框。但是，这意味着要调整图像的填充，以使方角不显示出来。或者，使用矩形边框，然后应用剪辑形状，就像您最初所做的那样：

    var body: some View {
    HStack {
        Image(systemName: "chevron.compact.left")
            .frame(maxHeight: .infinity)
            .padding(.horizontal, 7)
            .background(.yellow)
        Spacer()
        Image(systemName: "chevron.compact.right")
            .frame(maxHeight: .infinity)
            .padding(.horizontal, 7)
            .background(.yellow)
    }
    .font(.title3.weight(.semibold))
    .foregroundStyle(.black)
    .frame(width: 300, height: 76)
    .border(.yellow, width: 5)
    .clipShape(RoundedRectangle(cornerRadius: 7))
}
    • 1

相关问题