Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
733 views
in Technique[技术] by (71.8m points)

button - SwiftUI,构建项目时,水平堆栈中的按钮未呈现(SwiftUI, buttons in horizontal stack not rendering when building project)

For some reason when I 'resume' my code in the preview/canvas pane in SwiftUI I can see my social media buttons show up clearly, however when I run the code by pressing the build button which takes me to the separate simulator I do not see my social media buttons.

(由于某些原因,当我在SwiftUI的预览/画布窗格中“恢复”我的代码时,我可以看到我的社交媒体按钮清晰显示,但是当我通过按下构建按钮来运行代码时,该按钮将我带到单独的模拟器看到我的社交媒体按钮。)

I have been stuck on this for the past 2 day, not sure if this is a bug with the new SwiftUI or not at this point.

(在过去的两天里,我一直在坚持这一点,现在不确定这是否是新SwiftUI的错误。)

Note: I have a navigationLink called in another page to this current page.

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

Please see example of the former:

(请参阅前者的示例:) 画布/预览窗格:正确

Please see example of the the incorrect rendering (using command + R):

(请查看错误渲染的示例(使用命令+ R):) 建立专案时版本不正确

Please see the actual code below.

(请参阅下面的实际代码。)

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()
  }
}
  ask by bain translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Taking into account that I don't see button images after copied snapshot into my test environment even in Preview.

(考虑到即使将快照复制到测试环境中后,我也看不到按钮图像。)

And after replacing their names with images from my project assets they appear and in Preview and in Simulator.

(用我的项目资产中的图像替换它们的名称后,它们将出现在“预览”和“模拟器”中。)

So, I can assume that you've forgotten to add those button images into your target assets catalog.

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

BTW, test your layout, which is highly hardcoded, on smaller models as well, because in iPhone 11 (and above) they fit into screen, but for example on iPhone 8 they don't.

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

Tested on: Xcode 11.2 / iOS 13.2 / Simulator iPhone 8 & iPhone 11 Pro

(测试于:Xcode 11.2 / iOS 13.2 / Simulator iPhone 8&iPhone 11 Pro)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...