SwiftUI，构建项目时，水平堆栈中的按钮未呈现

Question

由于某些原因，当我在SwiftUI的“预览/画布”窗格中“恢复”代码时，我可以看到我的社交媒体按钮清晰显示，但是当我通过按下构建按钮运行代码时，将我带到单独的模拟器我没有看到我的社交媒体按钮。在过去的两天里，我一直在坚持这一点，现在不确定这是否是新SwiftUI的错误。

注意：我有一个NavigationLink在另一个页面中调用到当前页面。

请参见前者的示例：

请参见错误渲染的示例（使用命令+ R）：

请在下面查看实际代码。

import SwiftUI

struct CreateAccountView: View {

@State var username: String = ""
@State var password: String = ""
    @State var passwordVerify: String = ""
@State private var showPassword = false
@State private var showPasswordVerify = false
@State private var current: Int? = nil


var body: some View {

    NavigationView{

        GeometryReader { (deviceSize: GeometryProxy) in

            ZStack {
                //Define a screen color
                LinearGradient (gradient: Gradient(colors:[Color(ColorsSaved.gitLabDark),Color(ColorsSaved.gitLabLight)]),startPoint: .leading,endPoint: .trailing)
                    //Extend the screen to all edges
                    .edgesIgnoringSafeArea(.all)

                VStack {
                    Text ("Create Account")
                        .foregroundColor(.white)
                        .fontWeight(.bold)
                        .padding ()

                    Group {
                        HStack {
                            Image ("user")
                                .resizable ()
                                .scaledToFit()
                                .padding (10)

                            TextField("Username", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)
                                .padding(12)
                                .padding (.leading, -10)
                                .padding(.leading, -3)
                            Spacer ()
                        } .padding (.leading, 10)

                        Spacer ()

                        HStack {
                            Image ("mail")
                                .resizable ()
                                .scaledToFit()
                                .padding (10)

                            TextField("Email", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)
                                .padding(12)
                                .padding (.leading, -10)
                                .padding(.leading, -3)
                        } .padding (.leading, 10)

                        Spacer()

                        HStack {
                            Image ("phone")
                                .resizable ()
                                .scaledToFit()
                                .padding (10)

                            TextField("Phone", text: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant("")/*@END_MENU_TOKEN@*/)
                                .padding(12)
                                .padding (.leading, -10)
                                .padding(.leading, -3)
                        } .padding (.leading, 10)

                        Spacer()


                        HStack {
                            Image("unlock")
                                .resizable()
                                .scaledToFit()
                                .padding (11)
                            if self.showPassword == true{
                                TextField("Password", text: self.$password)
                                    .padding(12)
                                    .padding (.leading, -10)
                                    .padding(.leading, -3)
                                // .frame(width: 175)// if you want to custom where the lock,passwordm and eye relation
                            } else {
                                SecureField("Password", text: self.$password)
                                    .padding(12)
                                    .padding (.leading, -10)
                                    .padding(.leading, -3)

                            }
                            Button (action: {self.showPassword.toggle()}) {
                                if self.showPassword == true {
                                    Image("eye-unlock")
                                        .resizable()
                                        .scaledToFit()
                                        .padding (11)
                                        .foregroundColor (.secondary)
                                } else {
                                    Image("eye")
                                        .resizable()
                                        .scaledToFit()
                                        .padding (11)
                                        .foregroundColor (.secondary)
                                }

                            }// closes button
                        } .padding(.leading, 10)//close Hstack for lock
                            .padding (.trailing, 10)

                        Spacer()

                        HStack {
                            Image("unlock")
                                .resizable()
                                .scaledToFit()
                                .padding (11)
                            if self.showPasswordVerify == true{
                                TextField("Verify Password", text: self.$passwordVerify)
                                    .padding(12)
                                    .padding (.leading, -10)
                                    .padding(.leading, -3)
                                // .frame(width: 175)// if you want to custom where the lock,passwordm and eye relation
                            } else {
                                SecureField("Verify Password", text: self.$passwordVerify)
                                    .padding(12)
                                    .padding (.leading, -10)
                                    .padding(.leading, -3)

                            }
                            Button (action: {self.showPasswordVerify.toggle()}) {
                                if self.showPasswordVerify == true {
                                    Image("eye-unlock")
                                        .resizable()
                                        .scaledToFit()
                                        .padding (11)
                                        .foregroundColor (.secondary)
                                } else {
                                    Image("eye")
                                        .resizable()
                                        .scaledToFit()
                                        .padding (11)
                                        .foregroundColor (.secondary)
                                }

                            }// closes button
                        } .padding(.leading, 10)//close Hstack for lock
                            .padding (.trailing, 10)


                    }.background(Color.white)
                        .clipShape(RoundedRectangle(cornerRadius: 40))
                        .shadow(radius: 10)
                        .frame(maxHeight:40, alignment: .leading)
                        .padding(.leading, 25)
                        .padding (.trailing, 25)




                    VStack (spacing: 2) {
                        Button (action: {print("create Account pressed!!")}) {
                            Text("Create")
                                .fontWeight(.bold)
                                .padding(10)
                                .foregroundColor(.orange)

                                .padding (.leading, 75)
                                .padding(.trailing, 75)


                        } .padding (.leading, 10)
                        .clipShape(RoundedRectangle(cornerRadius: 50))
                            .overlay(
                                Capsule(style: .continuous)
                                    .stroke(Color.orange, style: StrokeStyle(lineWidth: 2)))
                            .shadow(radius: 10)
                            .frame(maxHeight:40, alignment: .leading)
                        Spacer()
                        Text ("OR")
                            .fontWeight(.black)
                            .foregroundColor(.white)

                        Spacer()

                        Text ("Sign up using social accounts")
                            .foregroundColor(.white)
                            .fontWeight(.light)
                        Spacer ()

                        HStack {
                            Button (action: {print("Facebook Account pressed!!")}) {
                                Image("facebook")
                                .resizable()
                                .scaledToFit()
                                .padding (-3)


                        }
                            Spacer()

                            Button (action: {print("Twitter Account pressed!!")}) {
                                Image("twitter")
                                    .resizable()
                                    .scaledToFit()
                                .padding (-3)

                            }
                            Spacer()

                            Button (action: {print("Twitter Account pressed!!")}) {
                                Image("google")
                                    .resizable()
                                    .scaledToFit()
                                .padding (-3)


                            }
                        }.padding(.trailing, 45)
                            .padding (.leading, 45)
                            .offset(y: 10)
                        .buttonStyle(PlainButtonStyle())//allows buttons to render correclty whilein a navi view

                    }.padding(.top, 40)
                        .offset (y: -10)




                }
                    .offset (y:-50)

            }

        }
    }
}
}

struct CreateAccountView_Previews: PreviewProvider {
static var previews: some View {
    CreateAccountView()
  }
}

Answer 1

考虑到即使将快照复制到测试环境中后，我也看不到按钮图像。用我的项目资产中的图像替换它们的名称后，它们将出现在“预览”和“模拟器”中。

因此，我可以假设您忘记了将这些按钮图像添加到目标资产目录中。

顺便说一句，在较小的机型上也要测试您的布局，该布局是经过严格编码的，因为在iPhone 11（及更高版本）中，它们可以放入屏幕，但例如在iPhone 8上，则不适合。

经过以下测试：Xcode 11.2 / iOS 13.2 /模拟器iPhone 8和iPhone 11 Pro