SwiftUI - 应用商店评级部分，设计克隆

Posted 2023-02-19

【中文标题】SwiftUI - 应用商店评级部分，设计克隆

【英文标题】：SwiftUI - App Store Rating Section, Design Clone

【发布时间】：2021-12-25 22:28:42

【问题描述】：

我正在尝试在 App Store 设计中定位我的应用中的一个部分并以相同的方式构建它：

你们有谁知道代码 sn-p 是否在某处可用？我只在 App Store 中找到了动画挑战。

无论如何，我试图自己复制它，但我不明白四舍五入的数字 (4,7) 是如何创建的。它是自定义字体还是标准字体周围有某种层？目前我一直在克隆这个布局。

这是我尝试过的：

struct AppStoreRatingSection: View 
    var body: some View 
        HStack
            VStack
                Text("Bewertungen")
                    .font(.title)
                    .fontWeight(.heavy)
                    .foregroundColor(.primary)
                Text("4,3")
                    .font(.title)
                    .fontWeight(.heavy)
                    .foregroundColor(.primary)
            
            Spacer()
            VStack 
                Text("Chart here")
            
        
        .padding(.horizontal)
    

非常感谢！

【参考方案1】：

旧金山的圆角字体变体与主字体一样内置于操作系统中（也有衬线和等宽变体可用）。

要访问它，您需要对 .font() 修饰符中使用的参数稍有不同：

Text("4,7")
  .font(.system(.title, design: .rounded))

有关详细信息，请参阅documentation for the SwiftUI Font object。

另外，请注意，您实际显示的文本很可能是格式化数字而不是字符串。如果您让系统为您转换您的号码，它会识别区域设置 - 所以您在哪里看到 4,7 我在英国，会看到 4.7 等等。

有几种方法可以实现格式化，但使用 ios 15 的最新方法，它可能看起来像：

struct MyView: View 
  var rating = 4.6542 // assume this is calculated somewow

  var body: some View 
    // ...
    Text(rating, format: .number.precision(.fractionLength(1)))
      .font(.system(.title, design: .rounded))
      // etc.