如何在SwiftUI中实现可复用的动态梯形旭日纹视图？

问题背景 #

原本计划用静态PNG实现梯形旭日纹效果，但静态资源复用性差，因此选择SwiftUI原生重构。目前实现效果已接近预期，但核心问题突出：调用RadialSunburstView()时无法添加水平内边距，根源是代码依赖硬编码的屏幕尺寸，视图失去了SwiftUI布局系统的动态适应性，无法像Rectangle一样自由调整框架、适配内边距。

当前实现的核心问题 #

原代码通过UIScreen.main.bounds强制设置全屏尺寸，导致视图完全忽略外部的padding、frame等布局修饰，彻底丧失了自适应能力。

优化方案与修改代码 #

修改后的完整代码 #

struct SunRay: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            // 基于自身rect比例绘制梯形，保持动态适配性
            path.move(to: CGPoint(x: rect.width * 0.4, y: rect.height))
            path.addLine(to: CGPoint(x: rect.width * 0.6, y: rect.height))
            path.addLine(to: CGPoint(x: rect.width * 0.8, y: 0))
            path.addLine(to: CGPoint(x: rect.width * 0.2, y: 0))
        }
    }
}

struct RadialSunburstView: View {
    // 新增可配置参数，提升复用灵活性
    var rayOpacity: Double = 0.05
    var raySpacing: CGFloat = -8
    var rotationRange: ClosedRange<Int> = -40...40
    var rotationStep: Int = 10
    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                // 背景渐变自适应当前视图高度
                LinearGradient.blueGradient
                    .frame(height: geo.size.height)
                
                // 旭日纹组基于当前视图尺寸适配
                HStack(spacing: raySpacing) {
                    ForEach(Array(stride(from: rotationRange.lowerBound, through: rotationRange.upperBound, by: rotationStep)), id: \.self) { angle in
                        SunRay()
                            .rotation(Angle(degrees: Double(angle)))
                    }
                }
                .foregroundColor(.white.opacity(rayOpacity))
                // 让旭日纹组填满当前视图，确保放射范围适配
                .frame(width: geo.size.width, height: geo.size.height)
                .clipped()
            }
        }
        // 设置默认最小高度，同时允许外部自由修改
        .frame(minHeight: UIScreen.main.bounds.height * 0.15)
        .cornerRadius(20)
        .clipped()
    }
}

// 示例使用场景
struct SunburstDemo: View {
    var body: some View {
        VStack(spacing: 20) {
            // 默认尺寸效果
            RadialSunburstView()
            
            // 添加水平内边距的效果
            RadialSunburstView()
                .padding(.horizontal, 20)
            
            // 自定义高度+内边距的效果
            RadialSunburstView()
                .frame(height: 100)
                .padding(.horizontal, 30)
        }
        .padding()
    }
}

关键改动说明 #

1. 移除硬编码尺寸：所有布局依赖GeometryReader获取的父容器实际尺寸，彻底摆脱对屏幕静态尺寸的绑定。
2. 引入可配置参数：新增rayOpacity、raySpacing等参数，方便后续调整视觉效果，大幅提升视图复用性。
3. 动态布局适配：旭日纹组与背景渐变均跟随父容器尺寸变化，外部添加padding或修改frame时，视图会自动响应调整。
4. 简化射线生成逻辑：用ForEach循环替代手动编写9个射线的冗余代码，同时方便调整射线数量与角度范围。

现在调用RadialSunburstView()时，可自由添加padding(.horizontal)、frame(width:height:)等修饰符，视图会像Rectangle一样完全响应布局修改。

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