将UIKit星星动画迁移至SwiftUI遇无显示问题求助

原代码存在的核心问题 #

• 错误混用UIKit与SwiftUI视图层级：直接通过UIApplication.shared.windows.first!获取视图并修改alpha，违背SwiftUI状态驱动设计，且无法定位到单个星星视图。
• ForEach使用不当：ForEach(0..<500)未提供可识别的唯一标识，SwiftUI无法正确追踪每个星星视图的状态。
• Star未遵循View协议：自定义的Star结构体未实现View协议，无法作为SwiftUI视图渲染。
• 闪烁逻辑错误：试图通过修改UIKit视图的alpha实现动画，不符合SwiftUI的动画机制。

修正后的完整实现代码 #

import SwiftUI

// 单个星星视图，包含自身的闪烁状态
struct Star: View, Identifiable {
    let id = UUID() // 提供唯一标识，满足ForEach要求
    let size: CGFloat
    let color: Color
    @State private var alpha: Double = Double.random(in: 0.7...1.0)
    
    var body: some View {
        Circle()
            .fill(color)
            .frame(width: size, height: size)
            .opacity(alpha)
            .onAppear {
                startBlinking()
            }
    }
    
    // 单个星星的闪烁逻辑，使用SwiftUI状态驱动动画
    private func startBlinking() {
        let newAlpha = Double.random(in: 0.7...1.0)
        withAnimation(.easeInOut(duration: 0.1)) {
            alpha = newAlpha
        }
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            startBlinking()
        }
    }
}

// 星星背景容器视图
struct StarBackgroundView: View {
    private let starCount = 500
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                ForEach(0..<starCount) { _ in
                    Star(
                        size: CGFloat.random(in: 1...2),
                        color: Color.randomColor()
                    )
                    .position(
                        x: CGFloat.random(in: 0...geometry.size.width),
                        y: CGFloat.random(in: 0...geometry.size.height)
                    )
                }
            }
        }
    }
}

// 随机颜色扩展
extension Color {
    static func randomColor() -> Color {
        let colors = [
            Color(red: 255/255, green: 200/255, blue: 200/255),
            Color(red: 255/255, green: 200/255, blue: 255/255),
            Color(red: 255/255, green: 255/255, blue: 255/255)
        ]
        return colors.randomElement() ?? .white
    }
}

// 预览
struct StarBackgroundView_Previews: PreviewProvider {
    static var previews: some View {
        StarBackgroundView()
            .background(Color.black) // 预览时添加黑色背景，方便看到白色/浅色星星
    }
}

关键改进点说明 #

• 状态驱动动画：每个星星通过@State变量控制自身透明度，使用SwiftUI原生的withAnimation实现闪烁效果，符合SwiftUI设计范式。
• Identifiable协议：Star结构体实现Identifiable，通过UUID提供唯一id，让ForEach能正确管理每个星星视图。
• 独立闪烁逻辑：每个星星的闪烁逻辑封装在自身内部，无需遍历视图层级，逻辑更清晰。
• 正确的视图层级：使用GeometryReader获取容器尺寸，通过position正确放置星星，无需依赖UIKit的frame操作。

使用方式 #

在需要添加星星背景的视图中直接引入StarBackgroundView即可，例如：

struct ContentView: View {
    var body: some View {
        ZStack {
            StarBackgroundView()
            Text("Hello, Starry Background!")
                .foregroundColor(.white)
                .font(.largeTitle)
        }
        .background(Color.black)
    }
}

内容的提问来源于stack exchange，提问作者Antonio A. Chavez