问题描述
我是 SwiftUI 的新手，有一个关于如何设置相对于屏幕安全区域的 vstack 的问题。
我目前正在编写一个应用程序，该应用程序将在登录屏幕中有一个单一的登录/注册按钮。这个想法是，如果在登录屏幕中输入的电子邮件地址不存在，屏幕上会显示更多的子视图，并且屏幕现在看起来像一个注册屏幕。
我能够使用这段代码实现我想要的......
import SwiftUI
import Combine
struct ContentView: View {
@State var userLoggedIn = false
@State var registerUser = false
@State var saveLoginInfo = false
@Observedobject var user = User()
var body: some View {
// *** What modifier can I use for this vstack to clip subviews that exceed the screen's safe area?
vstack(alignment: .leading) {
// Show header image and title
HeaderView()
// Show views common to both log-in and registration screens
CommonViews(registerUser: $registerUser,email: $user.email,password: $user.password)
if !registerUser {
// Initially show only interfaces needed for log-in
LoginViewGroup(saveLoginInfo: $saveLoginInfo,registerUser: $registerUser,message: $user.message,signInAllowed: $user.isValid)
} else {
// Show user registration fields if user is new
RegistrationScreenView(registerUser: $registerUser,message: $user.message)
}
Spacer()
// Show footer message
FooterMessage(message: $user.message)
}
.padding(.horizontal)
// Background modifier will check the area occupied by ContentView in the screen
.background(Color.gray)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
class User: ObservableObject {
@Published var email: String = ""
@Published var password: String = ""
@Published var message: String = ""
@Published var isValid: Bool = false
private var disposables: Set<AnyCancellable> = []
var isEmailPasswordValid: AnyPublisher<Bool,Never> {
Publishers.CombineLatest($email,$password)
.dropFirst()
.map { (email,pass) in
if !self.isValidEmail(email) {
self.message = "Invalid email address"
return false
}
if self.password.isEmpty {
self.message = "Password should not be blank"
return false
}
self.message = ""
return true
}
.erasetoAnyPublisher()
}
init() {
isEmailPasswordValid
.receive(on: RunLoop.main)
.assign(to: \.isValid,on: self)
.store(in: &disposables)
}
private func isValidEmail(_ email: String) -> Bool {
let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
let emailPred = nspredicate(format:"SELF MATCHES %@",emailRegEx)
return emailPred.evaluate(with: email)
}
}
struct HeaderView: View {
var body: some View {
vstack {
HStack {
Spacer()
Image(systemName: "a.book.closed")
.resizable()
.scaledToFit()
.frame(height: UIScreen.main.bounds.height * 0.125)
.padding(.vertical)
Spacer()
}
HStack {
Spacer()
//Text("Live Fit Mealkit Ordering App")
Text("Some text underneath an image")
.font(.title3)
Spacer()
}
}
}
}
struct RegistrationScreenView: View {
@State var phone: String = ""
@State var confirmPassword: String = ""
@Binding var registerUser: Bool
@Binding var message: String
var body: some View {
vstack(alignment: .leading) {
Text("Confirm Password")
.font(.headline)
.padding(.top,5)
SecureField("Re-enter password",text: $confirmPassword)
.padding(.all,10)
.background(Color(.secondarySystemBackground))
Text("Phone number")
.font(.headline)
.padding(.top,10)
TextField("e.g. +1-416-555-6789",text: $phone)
.textContentType(.emailAddress)
.autocapitalization(.none)
.padding(.all,10)
.background(Color(.secondarySystemBackground))
Text("Profile photo")
.font(.headline)
.padding(.top,10)
HStack {
Image(systemName: "camera")
.resizable()
.scaledToFit()
.frame(width: UIScreen.main.bounds.size.width * 0.35,height: UIScreen.main.bounds.size.width * 0.35)
.padding(.leading,15)
Spacer()
vstack {
Button("Use Camera",action: {print("Launch Camera app")})
.padding(.all)
.frame(width: UIScreen.main.bounds.size.width * 0.4)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
Button("Choose Photo",action: {print("Launch Photos app")})
.padding(.all)
.frame(width: UIScreen.main.bounds.size.width * 0.4)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}.padding(.trailing,15)
}
HStack {
Button("Register",action: {})
.padding(.all)
.frame(width: UIScreen.main.bounds.size.width * 0.5)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
Spacer()
Button("Cancel",action: {
registerUser.toggle()
message = ""
})
.padding(.all)
.frame(width: UIScreen.main.bounds.size.width * 0.3)
.background(Color.red)
.foregroundColor(.white)
.cornerRadius(10)
}.padding(.horizontal)
}
}
}
struct CommonViews: View {
@Binding var registerUser: Bool
@Binding var email: String
@Binding var password: String
var body: some View {
vstack {
Text("Email")
.font(.headline)
.padding(.top,registerUser ? 10 : 20)
TextField("Enter email address",text: $email)
.textContentType(.emailAddress)
.autocapitalization(.none)
.padding(.all,10)
.background(Color(.secondarySystemBackground))
Text("Password")
.font(.headline)
.padding(.top,registerUser ? 5 : 10)
SecureField("Enter password",text: $password)
.padding(.all,10)
.background(Color(.secondarySystemBackground))
}
}
}
struct LoginViewGroup: View {
@Binding var saveLoginInfo: Bool
@Binding var registerUser: Bool
@Binding var message: String
@Binding var signInAllowed: Bool
var body: some View {
vstack {
HStack {
Spacer()
Button("Sign-in / Sign-up") {
signInButtonpressed()
}
.font(.title2)
.padding(15)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
.opacity(signInAllowed ? 1.0: 0.5)
.disabled(!signInAllowed)
Spacer()
}
.padding(.top,30)
Toggle("Save username and password?",isOn: $saveLoginInfo)
.padding()
}
}
private func signInButtonpressed() {
// **Note**:
// The code inside this function will check a database to see whether the user's email address exists and will decide whether to login the user (if corresponding password is correct) or display the registration view.
// To simplify things,the database checking code was removed and the button action will simply just show the additional user registration fields regardless of the email input
registerUser = true
message = "New user registration"
}
}
struct FooterMessage: View {
@Binding var message: String
var body: some View {
HStack {
Spacer()
Text(message)
.foregroundColor(.red)
.padding(.bottom)
Spacer()
}
}
}
如果 vstack 内视图的总高度小于安全视图区域高度，则 ContentView 中最顶部 vstack 内的子视图似乎包含在屏幕的安全视图区域内（这是我所期望的） .当我在最顶部的 vstack 中添加灰色背景修饰符以查看相对于手机屏幕覆盖了多少视图时，可以验证这一点。
VStack falls within safe area (Click to see image)
但是，我注意到当 vstack 内的子视图超过安全区域的高度时（例如显示附加注册字段时），子视图不会被剪裁而是溢出到安全区域之外。
VStack spills out of safe area (Click to see image)
是否有一个修饰符可以用于最顶部的 vstack，它允许我剪裁将从安全区域溢出的子视图的顶部和底部边缘？
我想在使用不同的手机预览运行我的应用程序时将其用作视觉指示器，以便我可以更轻松地查看如果 vstack 的子视图溢出我必须执行多少高度调整特定 iphone 屏幕尺寸的安全区域。
我尝试查找此信息，但我所看到的与我想要的相反。 :)
此外，是否有更好的方法来实现 vstack 中子视图的自动调整大小以使其适合屏幕的安全区域高度，而不是使用：
.frame(minHeight,idealHeight,maxHeight)
感谢可以提供的任何建议。 谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）