SwiftUI 复刻 App Store 评分模块：如何实现圆角数字及完整布局

1. 圆角数字效果实现 #

你遇到的带圆角的数字效果不需要自定义字体或额外图层，直接用系统提供的字体修饰符即可实现：

• iOS 17及以上版本，直接调用系统字体的rounded()方法：

Text("4.7")
    .font(.system(size: 48, weight: .heavy).rounded())
    .foregroundColor(.primary)

• 兼容iOS 15及以上更低版本，使用系统内置的SF Pro Rounded字体即可：

Text("4.7")
    .font(.custom("SFProRounded-Heavy", size: 48))
    .foregroundColor(.primary)

2. 完整评分模块实现代码 #

补全后的包含星级分布柱状图的完整实现如下，可直接基于此调整细节：

import SwiftUI

struct AppStoreRatingSection: View {
    // 模拟评分分布数据，顺序为5星到1星的占比
    let ratingDistribution: [Double] = [0.6, 0.25, 0.1, 0.03, 0.02]
    let totalRatingCount: Int = 12486
    let averageScore: String = "4.7"
    
    var body: some View {
        VStack(spacing: 16) {
            HStack(alignment: .top, spacing: 24) {
                // 左侧评分展示区域
                VStack(alignment: .leading, spacing: 4) {
                    Text("评分")
                        .font(.title2)
                        .fontWeight(.bold)
                        .foregroundColor(.primary)
                    Text(averageScore)
                        .font(.system(size: 48, weight: .heavy).rounded())
                        .foregroundColor(.primary)
                    Text("\(totalRatingCount) 个评分")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
                
                Spacer()
                
                // 右侧星级分布柱状图区域
                VStack(spacing: 6) {
                    ForEach(0..<5) { index in
                        HStack(spacing: 8) {
                            Text("\(5 - index) 星")
                                .font(.subheadline)
                                .foregroundColor(.secondary)
                                .frame(width: 40, alignment: .trailing)
                            GeometryReader { proxy in
                                RoundedRectangle(cornerRadius: 2)
                                    .fill(Color.secondary.opacity(0.3))
                                    .overlay(alignment: .leading) {
                                        RoundedRectangle(cornerRadius: 2)
                                            .fill(Color.blue)
                                            .frame(width: proxy.size.width * ratingDistribution[index])
                                    }
                            }
                            .frame(height: 8)
                        }
                    }
                }
                .padding(.top, 8)
            }
            
            // 查看全部评分按钮
            Button {
                // 跳转评分列表的业务逻辑
            } label: {
                HStack {
                    Text("查看全部评分")
                        .font(.subheadline)
                        .fontWeight(.medium)
                    Spacer()
                    Image(systemName: "chevron.right")
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
                .foregroundColor(.blue)
            }
        }
        .padding()
        .background(Color(UIColor.systemBackground))
        .cornerRadius(12)
    }
}

3. 动效扩展方案 #

如果需要实现App Store同款的柱状图加载动效，可给每个柱状条的宽度添加@State变量控制，页面onAppear时通过withAnimation(.easeOut(duration: 0.8).delay(Double(index)*0.1))实现依次加载的效果。

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