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

【问题标题】：SwiftUI: Four views of the same type all show as different sizesSwiftUI：相同类型的四个视图都显示为不同的大小
【发布时间】：2020-06-16 02:50:14
【问题描述】：

我正在创建一个可以让人们在棋盘游戏中记分的应用。我创建了一个包含玩家姓名和他们当前分数的视图。我将我的 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")

            }

        }

    }

【问题讨论】：

很多硬编码参数，改用相对和计算。
您能否添加您的addPointsCombinedView 使其成为minimal reproducible example？我认为您可以通过在每个顶部和底部记分板之间添加Spacer() 来解决您的问题。本质上，您需要在某个地方放置额外的空间，以便记分牌 vstack 与添加点视图的高度相同
@Asperi 我想让我的代码更好。你能给我一个例子，说明如何在这个解决方案中使用相对和计算的参数吗？

标签： ios swiftui scale frame

【解决方案1】：

昨晚终于成功了。我能够通过将我的组合视图放入 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)

           }

        }

    }
}
}

}

【讨论】：