SwiftUI 将 SF Symbol 作为文本与文本对齐

Posted 2023-02-24

【中文标题】SwiftUI 将 SF Symbol 作为文本与文本对齐

【英文标题】：SwiftUI align SF Symbol as text with a text

【发布时间】：2021-12-30 20:52:11

【问题描述】：

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

预期结果（几乎！）：

我首先尝试了带有图像和文字的HStack。但文字不在图像下方：第二行以左侧“填充”开头（对应于左侧图像空间）。

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

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 底部的中间。

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

【问题讨论】：

您是否尝试在文本中添加图像？这可以在 SwiftUI 中完成：Text(Image(…)+Text(…))

是的，我做到了。看看我的代码，有+ 加入两个文本。

不完全是。我说：文字（图片+文字）。

几乎没问题：图像与文本对齐。但是图像的字体与其余文本不同，而您的解决方案确实如此。我想要一个比文本更小的图像。

【参考方案1】：

我不知道你是否可以强制图像在所有情况下都自动居中，但你可以在图像中添加.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)

【讨论】：

谢谢，这是完美的。特别是使用 ScaledMetric 来支持可访问性。

【参考方案2】：

首先，您可以删除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)
    

结果：

---

奖励：您可以在 Texts 组合后移动您的 foregroundColor(.pink) 修饰符，因此您不必复制它。

【讨论】：

感谢您的回答。它工作正常！由于 ScaledMetric 以及我必须在我的应用程序中支持可访问性，Scott Matthewman 的答案要好一些。