iOS：如何在 SwiftUI 页面顶部制作我的图像徽标答案

【问题标题】：iOS: How to make my image logo at the top of the page SwiftUIiOS：如何在 SwiftUI 页面顶部制作我的图像徽标
【发布时间】：2021-06-12 11:09:11
【问题描述】：

首先，我对 iOS 开发和 Swift 非常陌生（从 PHP 来到这里 2 周 :)）

我正在构建我的简单登录页面，并且想知道如何在页面顶部制作我的徽标图像。另外我想知道我是否做错了布局以获得所需的布局，如屏幕截图所示。将不胜感激这方面的帮助。（截图中潦草的标志需要到白底外的顶部）

谢谢

登录视图：

import SwiftUI

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    let verticalPaddingForForm = 40
    var body: some View {
        
        ZStack {
            Color(red: 20/225.0 ,green: 22/225.0 , blue: 25/225.0)
        
            
            
            VStack(spacing: CGFloat(verticalPaddingForForm)) {
                
                Image("logo")
                    .resizable()
                    .scaledToFit()
                
                Divider()
                
                VStack {
                        TextField("Email", text: $email)
                            .padding(.horizontal, 30).padding(.top, 20)
                        Divider()
                            .padding(.horizontal, 30)
                        SecureField("Password", text: $password)
                            .padding(.horizontal, 30).padding(.top, 20)
                        Divider()
                            .padding(.horizontal, 30)

                }
                .background(Color(.white))
                
                
                Text("Forgotten Password")
                    .foregroundColor(.blue)
                    .font(.system(size: 15))
                
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                    Text("Login")
                        .padding()
                        .font(.system(size: 20))
                    
                }
                .background(Color.black)
                .foregroundColor(Color.white)
                .cornerRadius(10)
                .padding(.top, 0)
                .padding(.bottom, 20)
                
            }
            .padding(.horizontal, CGFloat(verticalPaddingForForm))
            .background(Color(.white))
            
            VStack{
                Spacer()
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                    Text("Register")
                        .padding()
                        .font(.system(size: 40))

                    
                }
                .background(Color(red: 20/225.0 ,green: 22/225.0 , blue: 25/225.0))
                .foregroundColor(Color.white)
                .cornerRadius(10)
                .padding()
            }
        }.ignoresSafeArea()
        

    };
}

内容视图：

import SwiftUI


struct ContentView: View {

    var body: some View {
        LoginView()
    }
    
}


extension UIDevice {
    var hasNotch: Bool {
        let bottom = UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? 0
        return bottom > 0
    }
}

【问题讨论】：

标签： ios swift xcode swiftui

【解决方案1】：

试试下面的代码-：

使用ZStack 为您的视图指定backgroundColor，并为其指定修饰符.ignoresSafeArea()。

在ZStack 中使用VStack 来布局其他视图组件。我这边做了一些修改。

   struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    let verticalPaddingForForm = 40
    var body: some View {
        
        ZStack() {
            Color(red: 20/225.0 ,green: 22/225.0 , blue: 25/225.0).ignoresSafeArea()
            VStack(spacing:15){
                
                 Image(systemName: “logo")
                    .resizable()
                    .scaledToFit()
                    .frame( height: 200)
                    .foregroundColor(Color.white)
                    .padding([.top],15)
                
                VStack(spacing: CGFloat(verticalPaddingForForm)) {
                    
                    VStack {
                        TextField("Email", text: $email)
                            .padding(.horizontal, 30).padding(.top, 20)
                        Divider()
                            .padding(.horizontal, 30)
                        SecureField("Password", text: $password)
                            .padding(.horizontal, 30).padding(.top, 20)
                        Divider()
                            .padding(.horizontal, 30)
                        
                    }
                    .background(Color(.white))
                    .padding([.top])
                    
                    
                    Text("Forgotten Password")
                        .foregroundColor(.blue)
                        .font(.system(size: 15))
                    
                    Button(action: {}) {
                        Text("Login")
                            .padding()
                            .font(.system(size: 20))
                        
                    }
                    .background(Color.black)
                    .foregroundColor(Color.white)
                    .cornerRadius(10)
                    .padding([.bottom])
                    
                    
                }
                .background(Color(.white))
                
                Spacer()
                
                Button(action: {}) {
                    Text("Register")
                        .padding()
                        .font(.system(size: 40))
                }
                
                .foregroundColor(Color.white)
                .cornerRadius(10)
                
            }
            
        }
        
    };
}


struct Test1: View {
    
    var body: some View {
        LoginView()
    }
    
}


extension UIDevice {
    var hasNotch: Bool {
        let bottom = UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? 0
        return bottom > 0
    }
}

【讨论】：

【解决方案2】：

您可以使用 ZStack (alignment: .top) 从顶部设置对齐方式。然后您可以在第二个VStack 的末尾使用Spacer() 来展开视图。

以下代码对我有用。这是您的代码，几乎没有什么变化。另外，我建议您创建一个子视图来更好地组织您的代码，而不是在同一个视图中编写所有视图。

import SwiftUI

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    let verticalPaddingForForm = 40
    
    var body: some View {
        ZStack (alignment: .top){
            Color(red: 20/225.0 ,green: 22/225.0 , blue: 25/225.0)
            
            VStack(spacing: CGFloat(verticalPaddingForForm)) {
                
                Image(systemName: "gear")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 100)
                
                Divider()
                
                VStack {
                    TextField("Email", text: $email)
                        .padding(.horizontal, 30).padding(.top, 20)
                    Divider()
                        .padding(.horizontal, 30)
                    SecureField("Password", text: $password)
                        .padding(.horizontal, 30).padding(.top, 20)
                    Divider()
                        .padding(.horizontal, 30)
                    
                }
                .background(Color(.white))
                
                
                Text("Forgotten Password")
                    .foregroundColor(.blue)
                    .font(.system(size: 15))
                
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                    Text("Login")
                        .padding()
                        .font(.system(size: 20))
                    
                }
                .background(Color.black)
                .foregroundColor(Color.white)
                .cornerRadius(10)
                .padding(.top, 0)
                .padding(.bottom, 20)
                
                
                Spacer()
                
            }
            .padding(.horizontal, CGFloat(verticalPaddingForForm))
            .background(Color(.white))
            
            VStack{
                Spacer()
                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
                    Text("Register")
                        .padding()
                        .font(.system(size: 40))
                    
                    
                }
                .background(Color(red: 20/225.0 ,green: 22/225.0 , blue: 25/225.0))
                .foregroundColor(Color.white)
                .cornerRadius(10)
                .padding()
            }
        }
    }
}
struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}

【讨论】：

【解决方案3】：

只需将Spacer() 放在Image("logo") 和Divider() 之间即可将您的徽标推到屏幕顶部

【讨论】：