SwiftUI：如何让数字文本居中，附加文本紧挨其右侧

要让数字保持原有的居中位置，同时让注释文本紧挨其右侧，有两种简洁的实现方式：

方法一：叠加注释文本（推荐） #

通过在数字文本上叠加注释，既保留数字的居中特性，又能让注释紧贴数字右侧，同时保证两者基线对齐：

VStack {
    Text("first line of text")
        .font(.callout)
    
    Text("100")
        .font(.largeTitle)
        .bold()
        // 将注释对齐到数字的右侧边缘
        .overlay(
            Text("comment")
                .font(.caption)
                // 确保注释与数字的首行基线对齐
                .alignmentGuide(.firstTextBaseline) { $0[.firstTextBaseline] },
            alignment: .trailing
        )
}

数字长度动态变化时（如1、10000），该方案依然有效：数字始终保持在VStack的居中位置，注释自动紧贴数字右侧，视觉效果一致。

方法二：嵌套HStack实现 #

通过左右占位的Spacer，将数字+注释的组合区域固定在容器中心，同时让注释紧贴数字：

VStack {
    Text("first line of text")
        .font(.callout)
    
    HStack(alignment: .firstTextBaseline) {
        // 左侧占位，推动数字居中
        Spacer()
        Text("100")
            .font(.largeTitle)
            .bold()
        Text("comment")
            .font(.caption)
        // 右侧占位，最小长度设为0，避免注释右侧产生空隙
        Spacer(minLength: 0)
    }
}

该方案逻辑直观，数字长度变化时，居中位置会自动调整，注释始终紧跟数字右侧。

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