Question

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

它看起来像这样：

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

Answer 1

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

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

结果：（带有替换的自定义颜色）

demo

经过测试，可与Xcode 11.2 / iOS 13.2一起使用

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

1 个答案: