SwiftUI：相同类型的四个视图均显示为不同大小

Question

我正在创建一个应用程序，可以使人们在棋盘游戏中保持得分。我创建了一个包含玩家名称及其当前得分的视图。我将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)
        }


}
}

董事会视图：

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

            }

        }

    }
    

我正在创建一个应用程序，可以使人们在棋盘游戏中保持得分。我创建了一个包含玩家名称及其当前得分的视图。我将iphone的布局设置为横向并且不在乎...

Answer 1

它终于在昨晚点击了。通过将合并的视图放入HStack，然后将其嵌入到VStack中，我能够解决此问题。现在看起来好多了。