Как я могу центрировать виды на экране вместо окружающих контейнеров?

Question

Я прошел бесчисленные уроки по SwiftUI в целом и по выравниваниям в контейнерах представления, но ни один из них не смог ответить на мой вопрос.

Я хотел бы создать список совпадений пинг-понга, выглядящий так:

«-» - символы партитур должны находиться в центре экрана независимо от того, где находятся другие тексты и как долго они находятся. Но все, что я получил до сих пор, выглядит так: Мой код выглядит так:

struct MatchView: View {

    @ObservedObject var match: Match

    init(match: Match){
        self.match = match
    }

    var body: some View {
        VStack{
            HStack{
                Text(self.match.player1.name)
                .onTapGesture {
                    self.match.objectWillChange.send()
                    self.match.makePoint(player: 1)
                    print("1: " + String(self.match.currentSet.pointsPlayer1))
                }
                .onLongPressGesture {
                    self.match.objectWillChange.send()
                    self.match.subPoint(player: 1)
                    print("1: " + String(self.match.currentSet.pointsPlayer1))

                }

                if self.match.setsWon1 == 2{
                    Text("?")
                }else{
                    Text("")
                }
                Spacer()
                HStack{
                    Text(String(self.match.setsWon1))
                    Text(" - ")
                    Text(String(self.match.setsWon2))
                }
                Spacer()
                if self.match.setsWon2 == 2{
                    Text("?")
                }else{
                    Text("")
                }
                Text(self.match.player2.name)
                .onTapGesture {
                    self.match.objectWillChange.send()
                    self.match.makePoint(player: 2)
                    print("2: " + String(self.match.currentSet.pointsPlayer2))
                }
                .onLongPressGesture {
                    self.match.objectWillChange.send()
                    self.match.subPoint(player: 2)
                    print("2: " + String(self.match.currentSet.pointsPlayer2))

                }


            }
            ForEach(self.match.sets){set in
                HStack{
                    Spacer()
                    HStack{
                        Text(String(set.pointsPlayer1))
                        .foregroundColor(Color.gray)
                        Text(" - ")
                        .foregroundColor(Color.gray)
                        Text(String(set.pointsPlayer2))
                        .foregroundColor(Color.gray)
                    }
                    Spacer()
                }
            }
        }
    }
}

Заранее спасибо за вашу помощь!

Answer 1

Это может быть достигнуто с помощью следующего шаблона (протестировано с Xcode 11.3 / iOS 13.3)

ZStack {                   // center alignment for content by default
    HStack {
        Text("Left Text")
        Spacer()               // << pushes texts to edges
        Text("Right Text")
    }
    Text("Centerred Text")
}

Answer 2

Попробуйте разделить ваш вид на три столбца с фиксированной шириной 30% ширины экрана. Сначала вы должны обернуть ваш родительский вид с GeometryReader , который даст вам размеры экрана, затем передать ширину дочернему представлению, установить кадр для каждого HStack, который будет представлять ваши столбцы, и, наконец, установить пропорциональна ширине. Вот пример, основанный на вашем коде.

Child View

struct MatchSet: Hashable {
    var pointsPlayer1: Int
    var pointsPlayer2: Int
}

struct Match: Hashable {
    var sets: [MatchSet]
    var currentSet: MatchSet
    var player1Name: String
    var player2Name: String
    var setsWon1: Int
    var setsWon2: Int
}

struct MatchView: View {
    let parentViewWidth: CGFloat
    var match: Match

    var body: some View {
        VStack{
            HStack{
                HStack{
                    Text(self.match.player1Name).lineLimit(1)
                    if self.match.setsWon1 == 2{
                        Text("?")
                    }else{
                        Text("")
                    }
                }.frame(width: parentViewWidth * 0.3)

                HStack{
                    Text(String(self.match.setsWon1))
                    Text(" - ")
                    Text(String(self.match.setsWon2))
                }.frame(width: parentViewWidth * 0.3)

                HStack {
                    if self.match.setsWon2 == 2{
                        Text("?")
                    }else{
                        Text("")
                    }
                    Text(self.match.player2Name).lineLimit(1)
                }.frame(width: parentViewWidth * 0.3)
            }

            ForEach(self.match.sets, id: \.self){set in
                HStack{
                    Text(String(set.pointsPlayer1))
                    Text(" - ")
                    Text(String(set.pointsPlayer2))
                }
            }
        }
    }
}

Parent View

//...    
var body: some View {
    GeometryReader { metrics in
        VStack {
            ForEach(self.matches, id: \.self) { match in
                MatchView(parentViewWidth: metrics.size.width, match: match)
            }
            Spacer()
        }
    }
}