视图在父视图中的行为与在预览中的行为不同答案

【问题标题】：View does behave differently in parent view than in preview视图在父视图中的行为与在预览中的行为不同
【发布时间】：2020-03-08 14:51:19
【问题描述】：

我在 SwiftUI 中创建了一个视图，它被包裹在另一个视图中的 Button 中。

struct BuySubscriptionView: View {
    var subscriptionText: String = "Monthly Subscription"
    var amountText: String = "2.99 € / Month"
    var body: some View {
        HStack() {
            VStack(alignment:.leading) {
                Text(subscriptionText)
                .bold()
                    .fixedSize()
                    .foregroundColor(Color(.systemBackground))
                    .padding(.bottom, 5)
                Text("Access to all exercises")
                .fixedSize(horizontal: false, vertical: true)
                    .foregroundColor(Color(.systemBackground))
            }.padding(.vertical)
            VStack(alignment:.trailing) {
                Text("Subscribe")
                    .foregroundColor(Color.baseDark)
                    .padding()
                    .background(Color.white)
                    .cornerRadius(5)
                    .padding(1)
                    .background(Color.black)
                    .cornerRadius(5)
                Text(amountText).bold()
                    .foregroundColor(Color(.systemBackground))
                    .padding(.top)
            }.padding(.leading)
        }
        .padding()
            .background(Color.baseDark)
        .cornerRadius(5)
        .padding(1)
        .cornerRadius(5)
    }
}

我将它包裹在一个按钮中。当我在 PreviewProvider 中使用它时，一切都会正确生成：

static var previews: some View {
        GeometryReader { geometry in
            VStack(spacing: 70) {
                Spacer()
                Button(action: {

                }, label: {
                    BuySubscriptionView(subscriptionText: "Monthly Subscription", amountText: "29.99€/month").frame(width: geometry.size.width * 0.9, height: geometry.size.width * 0.2, alignment: .center)
                })
                Button(action: {

                }, label: {
                    BuySubscriptionView().frame(width: geometry.size.width * 0.9, height: geometry.size.width * 0.2, alignment: .center)
                })
            }
        }
    }

但是在我的应用中实现它时，它们不再具有相同的大小

var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Hello " + self.userName + "!" ).font(.title)
                Spacer().frame(height: geometry.size.height * 0.1)
                self.premiumTextView()
                    .frame(width: geometry.size.width * 0.6)
                Spacer().frame(height: geometry.size.height * 0.1)
                Group {
                    if !self.isPremium {
                        VStack(alignment: .center,spacing: 70) {
                            Button(action: {
                                self.buyPremium()
                            }, label: {
                                BuySubscriptionView()
                                .frame(width: geometry.size.width * 0.9, height: geometry.size.width * 0.2, alignment: .center)
                            })
                            Button(action: {
                                self.buyPremium()
                            }, label: {
                                BuySubscriptionView(subscriptionText: "Yearly Subscription", amountText: "29.99 € / Year")
                                .frame(width: geometry.size.width * 0.9, height: geometry.size.width * 0.2, alignment: .center)
                            })
                        }

                    } else {
                        EmptyView()
                    }
                }
                Spacer().frame(height: geometry.size.height * 0.1)
                LogInOutButton(action: {
                    self.logOut()
                }, title: "Log out", width: geometry.size.width * 0.7)
            }
        }
    }

看起来像这样：

为什么会这样？我做错了什么？

【问题讨论】：

标签： swift swiftui

【解决方案1】：

这是收紧内容的效果 - 您的“每年...”标签更短，因此结果视图更小。请在下面找到稍微更正的标签视图。

struct BuySubscriptionView: View {
    var subscriptionText: String = "Monthly Subscription"
    var amountText: String = "2.99 € / Month"
    var body: some View {
        HStack() {
            VStack(alignment:.leading) {
                Text(subscriptionText)
                .bold()
                    .fixedSize()
                    .foregroundColor(Color(.systemBackground))
                    .padding(.bottom, 5)
                Text("Access to all exercises")
                .fixedSize()                                     // << here!
                    .foregroundColor(Color(.systemBackground))
            }.padding(.vertical)
            Spacer()                                             // << here!
            VStack(alignment:.trailing) {
                Text("Subscribe")
                    .foregroundColor(Color.green)
                    .padding()
                    .background(Color.white)
                    .cornerRadius(5)
                    .padding(1)
                    .background(Color.black)
                    .cornerRadius(5)
                Text(amountText).bold()
                    .foregroundColor(Color(.systemBackground))
                    .padding(.top)
            }.padding(.leading)
        }
        .padding()
            .background(Color.green)
        .cornerRadius(5)
        .padding(1)
        .cornerRadius(5)
    }
}

结果：（使用替换的自定义颜色）

经过测试并适用于 Xcode 11.2 / iOS 13.2

【讨论】：