如何使用 SwiftUI 將表情符號與 iOS 中的文本垂直對齊？

Question

我在文本視圖 (SwiftUI) 中有表情符號，它與文本的 rest 垂直對齊。

我有的代碼：

var body: some View {
VStack {
  Text("PUT THE BULLLS EYE 🎯 AS CLOSE AS YOU CAN TO THE")
    .bold()
    .kerning(2.0)
    .multilineTextAlignment(.center)
    .lineSpacing(4.0)
    .font(.system(size: 13, weight: .medium, design: .default))

  Text("89")
  HStack {
    Text("1")
    Slider(value: Binding.constant(50), in: 1.0...100.0)
    Text("100")
  }
  Button(action: {}) {
    Text("Hit Me!")
  }
}

注意屏幕截圖中的目標表情符號位於文本下方，我想與同一行中文本的 rest 對齊。 有任何想法嗎？

Answer 1

您可以使用+來附加Text組件。 然后，您可以更改其中一個元素的基線：

Group {
   Text("PUT THE BULLLS EYE ").bold().kerning(2.0)
   + Text("🎯").baselineOffset(3) + Text(" AS CLOSE AS YOU CAN TO THE").bold().kerning(2.0)
}
.multilineTextAlignment(.center)
.lineSpacing(4.0)
.font(.system(size: 13, weight: .medium, design: .default))

我上面的版本很脆弱，因為它取決於當前字體大小的幻數 (3)，但是您可以做一些工作來計算其他大小的值。