SwiftUI登录按钮无法触发ViewModel的login方法及打印输出

核心问题1：Form布局异常导致按钮点击区域失效 #

你的LoginView在Form内部使用了Spacer()，而Form本质是滚动容器，Spacer会无限拉伸占用剩余空间，导致按钮被挤出可交互区域——视觉上按钮可见，但实际点击区域不在屏幕范围内，因此点击时无任何响应。

核心问题2：ViewModel实例不共享 #

ContentView和LoginView各自创建了独立的LoginViewModel实例：

• ContentView的loginVM用于判断是否跳转至MainView
• LoginView的loginVM用于处理登录逻辑
  这会导致登录成功后，ContentView的isAuthenticated状态无法同步更新，永远停留在登录页面。

修复步骤 #

1. 修正LoginView布局 #

移除Form内的Spacer()，改用padding控制间距，确保按钮处于可交互区域：

struct LoginView: View {
    @ObservedObject var loginVM: LoginViewModel // 改为接收外部传入的ViewModel
    @StateObject private var projectListVM = ProjectListViewModel()
    @State private var isPasswordVisible = false
    
    var body: some View {
        Form {
            VStack(alignment: .center, spacing: 20) { // 用固定spacing替代Spacer
                VStack(alignment: .leading, spacing: 10)  {
                    Text("Email")
                        .font(.fieldLabel)
                        .foregroundColor(Color.secondary01Light)
                    TextField("Username", text: $loginVM.username)
                        .keyboardType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .padding()
                        .overlay {
                            RoundedRectangle(cornerRadius: 4, style: .continuous)
                                .stroke(Color(UIColor.systemGray4), lineWidth: 1)
                        }
                }
                
                VStack(alignment: .leading, spacing: 10) {
                    Text("Password")
                        .font(.fieldLabel)
                        .foregroundColor(Color.secondary01Light)
                    SecureField("Password", text: $loginVM.password)
                        .padding()
                        .overlay {
                            RoundedRectangle(cornerRadius: 4, style: .continuous)
                                .stroke(Color(UIColor.systemGray4), lineWidth: 1)
                        }
                }
                
                VStack {
                    Button(action: {
                        print("Login Tapped")
                        loginVM.login()
                    }) {
                        Text("Sign In")
                            .frame(maxWidth: .infinity)
                            .padding(8)
                            .cornerRadius(8)
                    }
                    .padding(.top, 30)
                    .buttonStyle(.borderedProminent)
                    .tint(Color.primary01)
                    .controlSize(.regular)
                    .font(.custom("Poppins-ExtraBold", size: 16))
                    .foregroundColor(.white)
                }
            }
            .padding() // 给整体内容添加padding
        }
    }
}

2. 共享ViewModel实例 #

修改ContentView，将自身的loginVM传递给LoginView：

struct ContentView: View {
    @StateObject private var loginVM = LoginViewModel()
    @StateObject private var projectListVM = ProjectListViewModel()
    @State private var isSecured: Bool = true
    
    var body: some View {
        Group {
            if loginVM.isAuthenticated {
                MainView()
            } else {
                LoginView(loginVM: loginVM) // 传入共享的ViewModel实例
            }
        }
    }
}

3. 完善ViewModel属性绑定 #

将username和password改为@Published，确保TextField输入能实时同步到ViewModel：

class LoginViewModel: ObservableObject {
    @Published var username: String = "" // 添加@Published实现双向绑定
    @Published var password: String = "" // 添加@Published实现双向绑定
    @Published var isAuthenticated: Bool = false
    
    func login() {
        print("Login Called")
        Webservice().login(username: username, password: password) { result in
            print("Login API Call Made")
            switch result {
                case .success(_):
                    print("Got User Data")
                    DispatchQueue.main.async {
                        self.isAuthenticated = true
                    }
                case .failure(let error):
                    print(error.localizedDescription)
            }
        }
    }
}

验证效果 #

完成以上修改后：

• 按钮点击会正常触发print("Login Tapped")和login()方法
• 登录成功后，ContentView的isAuthenticated会同步更新，自动跳转至MainView

内容的提问来源于stack exchange，提问作者Justin Erswell