SwiftUI：底部对齐不同帧大小的文本和图像

Posted 2023-02-24

【中文标题】SwiftUI：底部对齐不同帧大小的文本和图像

【英文标题】：SwiftUI: Bottom aligning text and images of different frame sizes

【发布时间】：2021-12-30 15:19:12

【问题描述】：

我试图底部对齐一个 imageIcon 和 2 个不同字体大小的文本，但由于某种原因，字体较大的文本似乎没有正确对齐。

HStack(alignment: .bottom) 
    Image(uiImage: UIImage(named: "baseline_accessible_black_24pt") ?? UIImage())
        .resizable()
        .frame(width: 24, height: 24)
        .background(Color.green)

    Text("2")
        .font(.system(size: 56))
        .fontWeight(.bold)
        .background(Color.blue)

    Text("mins")
        .font(.body)
        .background(Color.pink)

.background(Color.yellow)

结果：

请注意，“2”底部有空格。如何调整插图以使所有 UI 组件都在底部对齐？

【参考方案1】：

您可以将图像和文本与以下VerticalAlignment 对齐。只需将HStack 的对齐方式从.bottom 更改为：

HStack(alignment: .lastTextBaseline) 
    /* ... */

结果（使用临时图像）：

With backgrounds	Without backgrounds

Texts 下面仍然有一些空间，因为像 j 这样的字母会延伸到文本基线下方。没有背景颜色，您不会注意到。