SwiftUI如何实现带反斜杠斜向分隔线的矩形双背景布局

想要在SwiftUI中实现一个矩形被**反斜杠样式（右上到左下）**的斜向分隔线分割为两部分，两侧分别展示不同的网络背景图片。尝试使用自定义Triangle Shape裁剪，但无法得到正确的分隔方向与角度，当前实现代码如下：

struct ContentView: View {
    var body: some View {
        VStack {
            VStack {
                Text("VS")
                    .bold()
                    .padding(4)
                    .background(.thinMaterial.opacity(0.8))
                    .clipShape(Circle())
            }
            .frame(maxWidth: .infinity, minHeight: 100)
            .padding()
            .background(
                AsyncImage(url: URL(string: "https://picsum.photos/id/1037/1600/400"), transaction: Transaction(animation: .easeInOut)) { phase in
                    switch phase {
                    case .empty:
                        ProgressView()
                    case let .success(image):
                        image
                            .resizable()
                            .scaledToFill()
                            .frame(maxWidth: .infinity)
                            .transition(.opacity)
                    default:
                        Color.red
                            .transition(.opacity)
                    }
                }
                .overlay(
                    AsyncImage(url: URL(string: "https://picsum.photos/id/1041/1600/400"), transaction: Transaction(animation: .easeInOut)) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                        case let .success(image):
                            image
                                .resizable()
                                .scaledToFill()
                                .frame(maxWidth: .infinity)
                                .transition(.opacity)
                        default:
                            Color.blue
                                .transition(.opacity)
                        }
                    }
                    .clipShape(Triangle())
                )
            )
            .cornerRadius(4)
        }
        .padding()
    }
}

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        return path
    }
}

问题核心是自定义Triangle的路径不符合反斜杠分割的需求，当前路径生成的是右下区域的三角形，我们需要调整Shape路径，将矩形分割为左上和右下两个区域，分别对应两张图片的显示范围。

方案一：自定义左右分割Shape（推荐） #

创建两个Shape分别对应反斜杠分割后的左上、右下区域，分别裁剪两张图片，同时确保"VS"文本显示在最上层：

struct ContentView: View {
    var body: some View {
        VStack {
            // VS 标记，确保在最上层
            Text("VS")
                .bold()
                .padding(4)
                .background(.thinMaterial.opacity(0.8))
                .clipShape(Circle())
                .zIndex(1)
        }
        .frame(maxWidth: .infinity, minHeight: 100)
        .padding()
        .background {
            // 右下区域图片
            AsyncImage(url: URL(string: "https://picsum.photos/id/1037/1600/400"), transaction: Transaction(animation: .easeInOut)) { phase in
                switch phase {
                case .empty:
                    ProgressView()
                case let .success(image):
                    image
                        .resizable()
                        .scaledToFill()
                        .transition(.opacity)
                default:
                    Color.red
                        .transition(.opacity)
                }
            }
            .clipShape(DiagonalRightShape())
            
            // 左上区域图片
            AsyncImage(url: URL(string: "https://picsum.photos/id/1041/1600/400"), transaction: Transaction(animation: .easeInOut)) { phase in
                switch phase {
                case .empty:
                    ProgressView()
                case let .success(image):
                    image
                        .resizable()
                        .scaledToFill()
                        .transition(.opacity)
                default:
                    Color.blue
                        .transition(.opacity)
                }
            }
            .clipShape(DiagonalLeftShape())
        }
        .cornerRadius(4)
        .padding()
    }
}

// 反斜杠左上区域Shape（右上到左下分割线的左上部分）
struct DiagonalLeftShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

// 反斜杠右下区域Shape（右上到左下分割线的右下部分）
struct DiagonalRightShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

方案二：基于原有代码快速修改 #

直接修改原有Triangle的路径，使其对应左上区域，上层图片用该Shape裁剪，底层图片保持完整：

// 修改后的Triangle，对应反斜杠左上区域
struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

关键注意点 #

• 反斜杠分割线是右上到左下，需将矩形拆分为左上和右下两个多边形区域。
• 给"VS"文本添加zIndex(1)，确保它始终显示在两张图片上层。
• 使用scaledToFill()保证图片填充区域，避免拉伸变形。

内容的提问来源于stack exchange，提问作者TruMan1