SwiftUI中如何让HStack内文本围绕冒号居中对齐？

核心思路是将原有的单文本拆分三个独立组件（左文本、冒号、右文本），通过HStack的布局特性固定冒号位置，让左右文本分别向冒号对齐，彻底解决冒号随内容移动的问题。

代码修改方案 #

把原代码中的HStack部分替换为以下实现：

// 用可选绑定避免强制解包，提升代码安全性
if let outcome = match.outcome {
    HStack(alignment: .center, spacing: 4) {
        // 左文本：紧贴冒号右侧对齐
        Text(outcome ? "WIN" : "LOSE")
            .font(.system(size: 20, weight: .bold))
            .frame(maxWidth: .infinity, alignment: .trailing)
        
        // 固定在中间的冒号
        Text(":")
            .font(.system(size: 20, weight: .bold))
        
        // 右文本：紧贴冒号左侧对齐
        Text(outcome ? "LOSE" : "WIN")
            .font(.system(size: 20, weight: .bold))
            .frame(maxWidth: .infinity, alignment: .leading)
    }
} else {
    // 处理outcome为nil的 fallback 场景
    Text("VS")
        .font(.system(size: 20, weight: .bold))
}

原理说明 #

• 左右文本设置maxWidth: .infinity，会自动平分HStack的剩余空间，确保冒号始终处于水平居中位置；
• 左文本用.trailing对齐、右文本用.leading对齐，保证两者始终紧贴冒号，不会出现偏移；
• 即使更换成长度不同的文本（比如"VICTORY"和"DEFEAT"），冒号的居中位置也不会改变。

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker