Ios SwiftUI：同一类型的四个视图都显示为不同的大小

我正在创建一个应用程序，可以让人们在棋盘游戏中记分。我创建了一个包含球员姓名和他们当前得分的视图。我将iphone的布局设置为横向，不在乎ipad上使用哪种布局。我遇到的问题是，当我在iphone上时，四个播放器视图的大小都是不同的。您可以看到，我正在尝试使用.frames，我假设swiftUI会意识到这四个视图应该始终保持相同的大小。这个解决方案可能不是最优的，但我正试图找出如何将其全部放在页面上，并将其扩展到ipad视图中

以下是当前视图： 右上角的玩家1或左下角的玩家2都是不错的尺寸

玩家视图：

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


}

分数视图：

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


}

}

组合视图：

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

            }

        }

    }

---

昨晚它终于成功了。通过将我的组合视图放入hstack，然后将它们嵌入vstack，我能够解决这个问题。现在看起来好多了

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)

           }

        }

    }
}
}

---

}

它昨晚终于点击了。通过将我的组合视图放入hstack，然后将它们嵌入vstack，我能够解决这个问题。现在看起来好多了

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)

           }

        }

    }
}
}

---

}

许多硬编码参数，使用相对和计算。能否添加您的

addpoints组合视图

，使其成为一个？我认为您可以通过在每个顶部和底部记分板之间添加一个

Spacer（）

来解决您的问题。基本上，你需要一些额外的空间，以便记分板vstack与加分板的高度相同view@Asperi我想让我的代码更好。你能给我一个如何使用相对和计算参数的例子吗？许多硬编码参数，使用相对和计算。你能添加你的

addPointsCombinedView

使它成为一个？我认为您可以通过在每个顶部和底部记分板之间添加一个

Spacer（）

来解决您的问题。基本上，你需要一些额外的空间，以便记分板vstack与加分板的高度相同view@Asperi我想让我的代码更好。你能给我一个例子，说明如何使用这个解决方案的相对和计算参数吗？