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

Question

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

如果 3 个文本项在一个简单的 HStack 中对齐，则这些文本字段的总宽度在屏幕上居中对齐，因此“vs”Text 字段会在屏幕上左右晃动。

我相信我可以使用几何体创建上面想要的效果 reader 但这感觉有点费力，我想知道是否有简单的对齐类型或扩展可用于创建想要的效果？

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)
}

结果：

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

Align only one object to the centre in an HStack

list

swiftui

alignment

hstack