list - 仅将一个对象与 HStack 中的中心对齐

Question

我正在尝试在 SwiftUI 中创建一个简单的夹具列表（一个团队与另一个团队的列表）。“vs”Text字段需要在屏幕上居中对齐，team1 紧邻此左侧，team2 紧邻右侧。下图显示了一个简单的示例。请注意，vs 始终出现在中心线上，并且团队名称基本上是与“vs”Text框对齐的前导或尾随...

如果 3 个文本项以 simple 对齐HStack，则这些文本字段的总宽度在屏幕中央对齐，因此“vs”Text字段将在屏幕上左右移动。

我相信我可以使用几何阅读器在上面创建所需的效果，但这感觉有点费力，我想知道是否有一个简单的对齐类型或扩展可以用来创建所需的效果？

Answer 1

您可以使用对齐指南。这个答案也vs以屏幕为中心，而不仅仅是相对于彼此。

代码：

struct ContentView: View {
    private let games: [Game] = [
        Game("Manchester United", vs: "Arsenal"),
        Game("Liverpool", vs: "Newcastle United")
    ]

    var body: some View {
        ZStack(alignment: .centerVs) {
            Color.clear
                .frame(height: 0)
                .frame(maxWidth: .infinity)
                .alignmentGuide(.centerVs) { d in
                    d[HorizontalAlignment.center]
                }

            VStack(alignment: .centerVs) {
                ForEach(games) { game in
                    HStack {
                        Text(game.team1)

                        Text("vs")
                            .alignmentGuide(.centerVs) { d in
                                d[HorizontalAlignment.center]
                            }

                        Text(game.team2)
                    }
                }
            }
        }
    }
}

struct Game: Identifiable {
    let id = UUID()
    let team1: String
    let team2: String

    init(_ team1: String, vs team2: String) {
        self.team1 = team1
        self.team2 = team2
    }
}

extension HorizontalAlignment {
    private struct CenterVsAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.center]
        }
    }

    static let centerVs = HorizontalAlignment(CenterVsAlignment.self)
}

extension Alignment {
    static let centerVs = Alignment(horizontal: .centerVs, vertical: .center)
}

结果：