SwiftUI交叉背景实现问题：当前输出与预期不符求解决

你当前的代码仅创建了一个垂直的固定宽度色块，和预期的斜切交叉效果不符，以下是两种可行的修正方案：

方案一：通过旋转+偏移实现 #

直接对彩色矩形进行旋转，并调整尺寸和位置避免空白：

ZStack {
    Color.black.ignoresSafeArea()
    
    Rectangle()
        .fill(viewModel.pageColors[viewModel.currentPageIndex])
        .ignoresSafeArea()
        // 放大宽度避免旋转后出现空白
        .frame(width: UIScreen.main.bounds.width * 1.2, height: UIScreen.main.bounds.height)
        // 启用旋转效果，角度可根据需求微调
        .rotationEffect(Angle(degrees: 8.44))
        // 偏移调整位置，让色块匹配预期覆盖区域
        .offset(x: -UIScreen.main.bounds.width * 0.25)
}

如果想避免硬编码屏幕尺寸，用GeometryReader更优雅：

GeometryReader { geo in
    ZStack {
        Color.black.ignoresSafeArea()
        
        Rectangle()
            .fill(viewModel.pageColors[viewModel.currentPageIndex])
            .ignoresSafeArea()
            .frame(width: geo.size.width * 1.2, height: geo.size.height)
            .rotationEffect(Angle(degrees: 8.44))
            .offset(x: -geo.size.width * 0.25)
    }
}

方案二：自定义Shape精准控制边缘 #

如果需要更精准的斜切边缘，自定义Shape绘制路径是更好的选择：

// 自定义斜切形状
struct DiagonalCutShape: 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.maxX * 0.6, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

// 使用自定义Shape
ZStack {
    Color.black.ignoresSafeArea()
    DiagonalCutShape()
        .fill(viewModel.pageColors[viewModel.currentPageIndex])
        .ignoresSafeArea()
}

两种方案都能实现你想要的交叉斜切背景效果，方案一适合快速调整角度，方案二更适合精准控制边缘位置。

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