SwiftUI: четыре представления одного типа отображаются в разных размерах. - PullRequest
Новая
       73

SwiftUI: четыре представления одного типа отображаются в разных размерах.

1 голос
/ 16 июня 2020

Я создаю приложение, которое позволит людям вести счет в настольных играх. Я создал представление, которое содержит имя игрока и его текущий счет. У меня макет iphone установлен на альбомный, и мне все равно, какой макет используется на ipad. Проблема, с которой я сталкиваюсь, заключается в том, что когда я нахожусь на моем iphone, размеры всех четырех игроков разные. Вы можете видеть, что я пытаюсь использовать .frames, и я предположил, что swiftUI поймет, что четыре представления всегда должны оставаться одинакового размера. Это решение может быть неоптимальным, но я пытаюсь понять, как уместить все это на странице и масштабировать так, чтобы оно соответствовало представлению ipad?

Вот текущий вид: Игрок 1 в правом верхнем углу или игрок 2 в левом нижнем углу будут иметь большие размеры

enter image description here

Просмотр игрока: 

struct PlayerView: View {
var playerName:String
//var score:Int
var body: some View {
    ZStack{
        RoundedRectangle(cornerRadius: 10)
            .stroke(Color.black, lineWidth: 3)
            .frame(minWidth: 115, idealWidth: 115, maxWidth: 384, minHeight: 25, idealHeight: 34, maxHeight: 50, alignment: .center)
        RoundedRectangle(cornerRadius: 10)
            .fill(Color.blue)
            .frame(minWidth: 115, idealWidth: 115, maxWidth: 384, minHeight: 25, idealHeight: 34, maxHeight: 50, alignment: .center)
        Text("\(playerName)")
            .foregroundColor(.white)

    }

Просмотр результатов: 

struct ScoreView: View {

var body: some View {

    ZStack(alignment:.bottom){
        RoundedRectangle(cornerRadius: 25)
                .stroke(Color.black, lineWidth: 3)
                .frame(minWidth: 115, idealWidth: 115, maxWidth: 200, minHeight: 100, idealHeight: 100, maxHeight: 175, alignment: .center)

        RoundedRectangle(cornerRadius: 25)
            .fill(Color.blue)
            .frame(minWidth: 115, idealWidth: 115, maxWidth: 200, minHeight: 100, idealHeight: 100, maxHeight: 175, alignment: .center)
        VStack(spacing: 3){
        Text("Points")
        Text("0")
            .padding(.bottom)
        }
        .foregroundColor(Color.white)
    }
    .aspectRatio(contentMode: .fit)

}

}

Комбинированный просмотр: 

struct ScoreBoardView: View {
var playerName: String
var body: some View {

    ZStack(alignment: .top){
        ScoreView()
            .layoutPriority(2.0)
        PlayerView(playerName: playerName)
            .layoutPriority(1.0)
        }


}

}

Вид доски: 

 var body: some View {

    VStack {
        Text("BANNER PLACEHOLDER")
            .padding([.leading,.trailing],80)
            .padding([.top,.bottom],20)
            .border(Color.black)
        HStack {

            VStack{
                ScoreBoardView(playerName: "Player 1")
                    .padding(.bottom, 50)
                    .padding(.leading,10)

                ScoreBoardView(playerName: "Player 2")
                    .padding(.leading,10)


            }

            addPointsCombinedView()
                .aspectRatio(contentMode: .fit)
                .layoutPriority(1.0)

            VStack{
                ScoreBoardView(playerName: "Player 3")
                    .padding(.bottom, 50)

                ScoreBoardView(playerName: "Player 4")

            }

        }

    }

1 Ответ

0 голосов
/ 16 июня 2020

Вчера вечером наконец щелкнуло. Я смог решить проблему, поместив свое комбинированное представление в HStacks, а затем вставив его в VStacks. Теперь это выглядит намного лучше. 

VStack {
    Text("BANNER PLACEHOLDER")
        .padding([.leading,.trailing],80)
        .padding([.top,.bottom],10)
        .border(Color.black)
        .padding(.top, 5)
        .layoutPriority(1.0)

ZStack{
        addPointsCombinedView()
            .aspectRatio(contentMode: .fit)

    VStack {


        HStack {
            ScoreBoardView(playerName: "Player 1")
                .padding(.leading, 20)
                .padding(.bottom, 7)
                .padding(.top,5)
            Spacer()
            ScoreBoardView(playerName: "Player 2")
                .padding(.trailing, 20)
                .padding(.bottom, 7)
                .padding(.top,5)
        }

        HStack{
                ScoreBoardView(playerName: "Player 3")
                    .padding(.leading, 20)
                    .padding(.top,10)
                    .padding(.bottom,5)
                Spacer()
                ScoreBoardView(playerName: "Player 4")
                    .padding(.trailing,20)
                    .padding(.top,10)
                    .padding(.bottom,5)

           }

        }

    }
}
}

}

...