SwiftUI 将 SF 符号作为文本与文本对齐

Question

我需要在视图中显示一个 SF 符号（图像）和一个文本（作为标题）。由于文本可能很长，我希望它在第二行的图像下方通过。

预期结果（几乎！）：

我首先尝试了 HStack 图片和文字。但是文本不在图像下方：第二行以左 'padding' 开头（对应于左图像 space）。

所以我做了这段代码（以获取之前的屏幕截图）：

HStack(alignment:.top) {
    Text(Image(systemName: "circle.hexagongrid.circle"))
        .font(.caption)
        .foregroundColor(.pink)
    +
    Text("A long text as example")
        .font(.title2).bold()
        .foregroundColor(.pink)
}
.frame(width:140)

但我想将图像与第一行的中心对齐。图片中心应垂直位于 A 顶部和 g 底部的中间。

重要的是我的第二条（以及更多）线在我的图像下方通过。而且我不想要更大的图像字体。

Answer 1

首先，您可以删除 HStack，因为它是多余的。您可以将其替换为方括号 () 以封装新的 Text，这样您就可以使用更多修饰符，例如设置宽度。

主要解决方案是使用 baselineOffset(_:)，这意味着您可以将图像从 Text 的基线偏移。下面，我们只偏移 1，但这可以是您想要的任何值（包括小数，例如 0.99）。

代码：

struct ContentView: View {
    var body: some View {
        (
            Text(Image(systemName: "circle.hexagongrid.circle"))
                .font(.caption)
                .foregroundColor(.pink)
                .baselineOffset(1)
            +
            Text("A long text as example")
                .font(.title2)
                .bold()
                .foregroundColor(.pink)
        )
        .frame(width: 140)
    }
}

结果：

好处：您可以在 Text 合并后移动您的 foregroundColor(.pink) 修饰符，因此您不必复制它。

Answer 2

我不知道你是否可以强制图像在所有情况下自动居中，但你可以向文本中的图像添加一个 .baselineOffset() 修饰符以将图像向上移动一个固定的数量。例如：


Text(Image(systemName: "circle.hexagongrid.circle"))
  .font(.caption)
  .foregroundColor(.pink)
  .baselineOffset(3.0)
+
Text("A long text as example")
  .font(.title2).bold()
  .foregroundColor(.pink)

一旦找到默认文本大小的正确偏移量，您就可以通过使偏移大小相对于基本大小来适应可访问性变化，例如

Struct MyView: View {
  @ScaledMetric(relativeTo: .title2) var baselineOffset: CGFloat = 3.0

  // and in your body…
  .baselineOffset(baselineOffset)

SwiftUI 将 SF 符号作为文本与文本对齐

SwiftUI align SF Symbol as text with a text

image

text

swiftui

alignment