SwiftUI

Question

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

你们中有人知道代码片段是否在某处可用吗？我只从 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)
    }
}

非常感谢！

Answer 1

San Francisco 的圆形字体变体以与主字体相同的方式内置到操作系统中（也有衬线和等宽变体可用）。

要访问它，您需要对 .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.
  }
}

SwiftUI - App Store 评级部分，设计克隆

SwiftUI - App Store Rating Section, Design Clone

fonts

design-patterns

rating

app-store