如何在SwiftUI中不依赖魔法数字实现Image与Text顶部对齐？

默认的HStack(alignment: .top)无法让不同字体的Text和Image实现视觉上的顶部对齐，核心原因是不同字体的排版容器（如字体的上行高度、内部边距）存在差异，导致布局容器的顶部和视觉元素的顶部不重合。以下是两种无需魔法数字的解决方案：

方案一：自定义垂直对齐指南 #

通过定义自定义的垂直对齐标识，让两个视图都基于自身的实际视觉边界顶部对齐：

extension VerticalAlignment {
    private enum VisualTop: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.top]
        }
    }
    static let visualTop = VerticalAlignment(VisualTop.self)
}

HStack(alignment: .visualTop) {
    Text("50")
        .font(.largeTitle)
        .alignmentGuide(.visualTop) { $0.bounds.minY }

    Image(systemName: "arrow.up.right.circle.fill")
        .font(.caption)
        .foregroundStyle(.gray.opacity(0.7))
        .alignmentGuide(.visualTop) { $0.bounds.minY }
}

这里使用$0.bounds.minY获取视图的实际视觉区域顶部，替代默认的布局容器顶部作为对齐基准，确保两者视觉上完全对齐。

方案二：直接覆盖默认对齐基准 #

如果不需要复用自定义对齐指南，也可以直接为两个视图覆盖默认的.top对齐基准：

HStack(alignment: .top) {
    Text("50")
        .font(.largeTitle)
        .alignmentGuide(.top) { $0.bounds.minY }

    Image(systemName: "arrow.up.right.circle.fill")
        .font(.caption)
        .foregroundStyle(.gray.opacity(0.7))
        .alignmentGuide(.top) { $0.bounds.minY }
}

这种方式更简洁，直接修改默认对齐规则，让视图基于自身视觉边界顶部对齐。

内容的提问来源于stack exchange，提问作者Oskar Persson