当键盘仅出现在大设备上时,自定义 TextField 上的浮动标签会移动

问题描述 投票:0回答:0

我在 SwiftUI 中开发了一个自定义文本字段,它具有一个浮动标签作为占位符。当用户开始点击 textField 时,标签会向上移动。

在我的登录视图中,我将我的 TextFields 居中。问题是,当用户触摸 textField 内部时,键盘会弹出并使当前 textField 的占位符以及所有其他 textField 的占位符进行奇怪的移动,然后移回其初始位置。

[TextField-bug] (https://i.stack.imgur.com/UAM2y.gif)

这是我的观点代码:

    var body: some View {
        
        GeometryReader { geometry in
            ScrollView {
                ZStack {
                    VStack {
                        if !isTextFieldEditing {
                            imageTE
                        }
                        Spacer()
                    }
                    VStack {
                        
                        TETextField("ei_apple_login_mail_address", text: $viewModel.email)
                            .keyboardType(.emailAddress)
                            .textContentType(.emailAddress)
                            .textInputAutocapitalization(.never)
                            .padding(.top, .medium)
                            .disabled(!viewModel.isTextFieldActive)
                        
                        TESecureField("ei_apple_login_password", text: $viewModel.password)
                            .keyboardType(.default)
                            .textContentType(.password)
                            .textInputAutocapitalization(.never)
                            .padding(.top, .regular)
                            .disabled(!viewModel.isTextFieldActive)
                        
                        HStack {
                            Spacer()
                            NavigationFlowLink(isActive: $viewModel.showPasswordRecovery) {
                                ResetPasswordNavigationFlow(context: .passwordRecovery)
                            } label: {
                                Text("ei_apple_login_forgot_password")
                            }
                            .font(.footnote)
                            .foregroundColor(.appleBlue)
                        }
                        
                        Button(action: login) {
                            Text("ei_apple_login_cta")
                                .loading(viewModel.isLoading)
                        }
                        .disabled(viewModel.isLoading)
                        .buttonStyle(.primary)
                        .padding([.top, .bottom], .large)
                        .disabled(!viewModel.formIsValid)
                        .customAlert(
                            "ei_common_alert_reactivate_account_title",
                            message: "ei_common_alert_reactivate_account_desc",
                            isPresented: $viewModel.showAccountDeactivatedAlert
                        ) {
                            CustomAlertButton(
                                "ei_common_alert_reactivate_account_cta",
                                role: .destructive,
                                action: reactivateAccount
                            )
                            CustomAlertButton("alert_title_cancel", role: .cancel) { }
                        }
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .frame(minHeight: geometry.size.height)
                    .padding(EdgeInsets(horizontal: .medium, vertical: .regular))
                }
                
            }
            .background(Color.background1.ignoresSafeArea())
            .foregroundColor(.body)
            .navigationBarBackButtonDisplayMode(.minimal)
            .navigationBarTitleDisplayMode(.inline)
            .customNavigationTitle("ei_apple_login_title")
            .toast(viewModel.toastMessage, isPresented: $viewModel.showToast, kind: viewModel.toastKind)
            .onChange(of: viewModel.didFinishLogin, perform: onFinish)
        }
        .onTapGesture {
            // Hide keyboard when user touch the view
            UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
        }
        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
            // Hide TE logo when keyboard apears
            withAnimation(.easeOut(duration: 0.2)) {
                isTextFieldEditing = true
            }
        }
        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
            // show TE logo when keyboard disapears
            withAnimation {
                isTextFieldEditing = false
            }
        }
    }

这个问题似乎只出现在 iOS 16.2 的 iPhone Pro 和 Pro Max 上,较小的设备上不会出现。我想知道是否有人遇到过类似的问题或对如何解决它有任何建议。任何帮助将不胜感激。谢谢!

ios swift swiftui textfield
© www.soinside.com 2019 - 2024. All rights reserved.