如何使用 SwiftUI 显示准确的星级？

Question

我需要使用 SwiftUI 显示准确的星级，如 3.1、4.8。

想要的结果应该是这样的：

Answer 1

你的一般方法很好，但我相信它可以变得更简单。

下面的代码适应它放置的任何尺寸（所以如果你想要一个特定的尺寸，把它放在一个框架中）。

请注意，在 iOS 14 中不需要内部 ZStack ，但 GeometryReader 仍然没有记录其布局行为（Xcode 12 发行说明中除外），因此这使其明确。

struct StarsView: View {
    var rating: CGFloat
    var maxRating: Int

    var body: some View {
        let stars = HStack(spacing: 0) {
            ForEach(0..<maxRating) { _ in
                Image(systemName: "star.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            }
        }

        stars.overlay(
            GeometryReader { g in
                let width = rating / CGFloat(maxRating) * g.size.width
                ZStack(alignment: .leading) {
                    Rectangle()
                        .frame(width: width)
                        .foregroundColor(.yellow)
                }
            }
            .mask(stars)
        )
        .foregroundColor(.gray)
    }
}

这会以灰色绘制所有星星，然后创建一个正确宽度的黄色矩形，将其遮蔽到星星，并将其绘制在顶部作为叠加层。叠加层自动与它们所附加的视图大小相同，因此您不需要所有框架来使大小与您使用 ZStack 的方式相匹配。