iOS：如何在 SwiftUI 页面顶部制作我的图像徽标
Posted
技术标签:
【中文标题】iOS：如何在 SwiftUI 页面顶部制作我的图像徽标【英文标题】：iOS: How to make my image logo at the top of the page 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
【问题讨论】：
【参考方案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() 之间即可将您的徽标推到屏幕顶部
【讨论】：
以上是关于iOS：如何在 SwiftUI 页面顶部制作我的图像徽标的主要内容，如果未能解决你的问题，请参考以下文章
如何在 SwiftUI 中制作动态 PageViewController？
iOS SwiftUI：ScrollView 忽略顶部安全区域
iOS 15.0+ 中 SwiftUI 顶部或底部悬浮功能小面板的极简实现