SwiftUI的HStack中如何仅让单个"vs"Text控件固定居中对齐

方案1：左右等宽分区实现（最简便） #

原理是把行容器平均分成左、中、右三部分，左右两侧各占一半屏幕宽度，分别右对齐/左对齐队名，中间的vs天然处于绝对居中位置：

struct MatchupRow: View {
    let homeTeam: String
    let awayTeam: String
    // 可选：队名和vs的间距
    let spacing: CGFloat = 6
    
    var body: some View {
        HStack(spacing: spacing) {
            // 左侧主队区域：右对齐队名
            HStack {
                Spacer(minLength: 0)
                Text(homeTeam)
                    .multilineTextAlignment(.trailing)
            }
            .frame(maxWidth: .infinity)
            
            // 居中的vs
            Text("vs")
                .foregroundStyle(.secondary)
                .fontWeight(.medium)
            
            // 右侧客队区域：左对齐队名
            HStack {
                Text(awayTeam)
                    .multilineTextAlignment(.leading)
                Spacer(minLength: 0)
            }
            .frame(maxWidth: .infinity)
        }
        // 整行撑满父容器宽度
        .frame(maxWidth: .infinity)
    }
}

调用示例：

// 列表中使用
List {
    MatchupRow(homeTeam: "洛杉矶湖人", awayTeam: "波士顿凯尔特人")
    MatchupRow(homeTeam: "金州勇士", awayTeam: "布鲁克林篮网")
    MatchupRow(homeTeam: "广东宏远", awayTeam: "辽宁本钢")
}
.listStyle(.plain)

该方案无需额外定义全局规则，默认限制是左右队名最多各占一半屏幕宽度，超出自动折行，完全适配绝大多数赛程表的设计需求。

方案2：自定义对齐指南实现（无半区宽度限制） #

如果需要支持超长队名可以突破半区宽度限制，不希望被半区宽度约束，可以自定义对齐指南实现：

1. 首先定义全局的vs居中对齐标识：

extension HorizontalAlignment {
    private enum VsCenterAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.center]
        }
    }
    static let vsCenter = HorizontalAlignment(VsCenterAlignment.self)
}

2. 实现对阵行视图：

struct FreeWidthMatchupRow: View {
    let homeTeam: String
    let awayTeam: String
    let spacing: CGFloat = 6
    
    var body: some View {
        HStack(spacing: spacing) {
            Text(homeTeam)
                .multilineTextAlignment(.trailing)
                // 主队尾部对齐vs的中心线
                .alignmentGuide(.vsCenter) { $0[.trailing] }
            
            Text("vs")
                .foregroundStyle(.secondary)
                .fontWeight(.medium)
                // vs自身中心线作为对齐基准
                .alignmentGuide(.vsCenter) { $0[.center] }
            
            Text(awayTeam)
                .multilineTextAlignment(.leading)
        }
        // 整行以自定义的vsCenter为基准对齐到父容器中心
        .frame(maxWidth: .infinity, alignment: Alignment(horizontal: .vsCenter, vertical: .center))
    }
}

该方案没有半区宽度限制，仅当左右队名总长度超出屏幕宽度时才会触发折行。

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