try 在SwiftUI中做5星评级

发布于04月04日

我试图使一个5星级使用矩形和掩盖它的形状的星星.当矩形是全宽(5星级)时，一切似乎都很好，但当它是其他任何东西时，对齐不起作用.

struct FiveStarRating: View {
    @State private var rating = 0
    var body: some View {
        stars.overlay(alignment: .leading) {
            GeometryReader { proxy in
                Rectangle()
                    .foregroundStyle(.orange)
                    .frame(width: CGFloat(rating) / 5 * proxy.size.width)
                    .animation(.bouncy, value: rating)
                    .allowsHitTesting(false)
                    .mask(stars)
            }
        }
    }

    private var stars: some View {
        HStack {
            ForEach(1...5, id:\.self) { i in
                Image(systemName: "star.fill")
                    .foregroundStyle(.gray)
                    .font(.largeTitle)
                    .onTapGesture {
                        rating = i
                    }
            }
        }
    }
}

推荐答案

您可以再添加一个frame修改器，以确保覆盖占据整个空间(但仍然是leading对齐的)，同时保持Rectangle约束到某个width:

struct FiveStarRating: View {
    @State private var rating = 0
    var body: some View {
        stars
            .overlay{
            GeometryReader { proxy in
                Rectangle()
                    .foregroundStyle(.orange)
                    .frame(width: CGFloat(rating) / 5 * proxy.size.width)
                    .frame(maxWidth: .infinity, alignment: .leading) // <-- Here
                    .animation(.bouncy, value: rating)
                    .allowsHitTesting(false)
                    .mask(stars)
            }
        }
    }
    
    private var stars: some View {
        HStack {
            ForEach(1...5, id:\.self) { i in
                Image(systemName: "star.fill")
                    .foregroundStyle(.gray)
                    .font(.largeTitle)
                    .onTapGesture {
                        rating = i
                    }
            }
        }
    }
}