如何使用SwiftUI程序化重现类云朵效果的背景图案？

当然可以用SwiftUI程序化实现这类云朵风格的背景，甚至能做出动态变化的效果。

程序化实现的思路 #

你可以通过自定义Shape，用多个椭圆路径拼接出云朵的蓬松轮廓，再配合渐变填充、模糊效果和透明度调整，模拟云朵的质感。比如下面这个简单的示例代码：

struct CloudShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 用多个椭圆组合出云朵形状
        path.addEllipse(in: CGRect(x: rect.midX - 60, y: rect.midY - 30, width: 80, height: 60))
        path.addEllipse(in: CGRect(x: rect.midX - 20, y: rect.midY - 40, width: 70, height: 70))
        path.addEllipse(in: CGRect(x: rect.midX + 20, y: rect.midY - 30, width: 80, height: 60))
        path.addEllipse(in: CGRect(x: rect.midX - 40, y: rect.midY, width: 120, height: 50))
        return path
    }
}

// 视图中使用
struct CloudBackgroundDemo: View {
    var body: some View {
        ZStack {
            Color.blue.opacity(0.1)
            CloudShape()
                .fill(LinearGradient(gradient: Gradient(colors: [.white, .gray.opacity(0.2)]), startPoint: .top, endPoint: .bottom))
                .blur(radius: 10)
                .opacity(0.8)
                .scaleEffect(1.5)
        }
        .ignoresSafeArea()
    }
}

如果想要更自然的效果，还可以叠加多个不同大小的云朵形状，或者添加缓慢的位移动画，模拟云朵飘动的感觉。

两种方案的选择建议 #

• 直接用图片资源：如果你只需要固定的背景效果，这是最省心的选择。你已经掌握图片的使用方法，直接导入适配好的背景图，用resizable()等方法适配屏幕，效果能1:1还原设计图，而且性能开销比程序化生成更低，不用实时计算路径和渲染。
• 程序化生成：适合需要动态调整的场景——比如要随系统主题切换云朵颜色、让云朵缓慢移动、或者根据屏幕尺寸自动调整云朵大小密度。另外，程序化实现能减少APP的包体积，不用额外添加图片资源。

总结：如果你的背景是静态不变的，直接用图片资源就足够；如果有动态需求或者想优化包体积，再考虑程序化实现。

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