如何使用 SwiftUI 在 iOS 中将表情符号与文本垂直对齐？答案

【问题标题】：How to vertically align emoji with text in iOS using SwiftUI?如何使用 SwiftUI 在 iOS 中将表情符号与文本垂直对齐？
【发布时间】：2021-06-17 23:53:10
【问题描述】：

我在文本视图 (SwiftUI) 中有表情符号，但它没有与文本的其余部分垂直对齐。

我的代码：

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!")
  }
}

注意截图中的目标表情符号？？？位于文本下方，我想与同一行中的其余文本对齐。有什么想法吗？

【问题讨论】：

我不认为你可以做任何事情，除了尝试不同的字体。不过，使用小写文本时它不太明显。

标签： ios swift user-interface swiftui

【解决方案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)，但您可以做一些工作来计算其他大小的版本。

【讨论】：