Início / coding / Perguntas / 79223915
Accepted
duckSern1108
Asked: 2024-11-26 00:45:10 +0800 CST

Capturar @State no fechamento [duplicado]

  • 772

Tenho um formulário de registro simples. Quando o usuário pressiona Continue Button, mostro um popover caso ele não digite nenhum campo.

struct ContentView: View {
    @State var firstName = ""
    @State var lastName = ""
    
    @State private var validationMessage = ""
    @State private var showValidationMessage = false
    
    private var isFormValid: Bool {
        !firstName.isEmpty &&
        !lastName.isEmpty
    }
    
    private func checkGeneralFormCompletion() {
        if isFormValid {
            showValidationMessage = false
        } else {
            let errorText = {
                if firstName.isEmpty {
                    return "First name empty"
                } else if lastName.isEmpty {
                    return "Last name empty"
                } else {
                    return ""
                }
            }()
            validationMessage = errorText
            showValidationMessage = !errorText.isEmpty
        }
    }
    
    var body: some View {
        
        VStack(spacing: 12) {
            let _ = Self._printChanges()
            
            TextField("First Name", text: $firstName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.bottom, 10)
            
            TextField("Last Name", text: $lastName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.bottom, 10)
            
            Button(action: {
                checkGeneralFormCompletion()
            }) {
                Text("Continue")
                    .foregroundColor(.white)
                    .padding(.horizontal, 45)
                    .padding([.top, .bottom], 10)
                    .background( Color.red)
                    .cornerRadius(5)
            }
            
            .popover(isPresented: self.$showValidationMessage,
                     attachmentAnchor: .point(.top),
                     arrowEdge: .top,
                     content: { [validationMessage] in
                let _ = print("validationMessage :: popover :: ", validationMessage)
                VStack {
                    Text(validationMessage)
                }
                .multilineTextAlignment(.center)
                .lineLimit(0)
                .foregroundStyle(.black)
                .font(.system(size: 18, weight: .semibold, design: .rounded))
                .padding()
                .presentationCompactAdaptation(.none)
                .fixedSize(horizontal: false, vertical: true)
                .frame(minWidth: 200)
            })
            .padding(.top, 70)
            
        }
        .padding()
//        .onChange(of: validationMessage) { oldValue, newValue in
//            print("CHANGE text VALIDATE MSG")
//        }
//        .onChange(of: showValidationMessage) { oldValue, newValue in
//            print("CHANGE VALIDATE MSG")
//        }
    }
}

Se eu comentar a captura forte [validationMessage] in, quando o usuário pressionar o botão pela primeira vez, o popover mostrará um texto vazio e bodynão será renderizado novamente (com base na _printChangeschamada). Mas se eu fornecer captura forte para closureou .popoveradicionar .onChangemodificador a VStack, o corpo será renderizado novamente e o popover mostrará o texto correto.

Minha pergunta é por que quando eu forneço captura forte de @State, isso causa bodya renderização novamente? Quaisquer insights ou sugestões seriam apreciados!

2 respostas

  1. Best Answer

    O SwiftUI tem um recurso de rastreamento de dependência. Ele só chamará bodynovamente quando a @Statefor definido se seu getter tiver sido chamado anteriormente dentro de body. Fazer [validationMessage] iné fingir uma chamada para o getter que configura o rastreamento de dependência e é por isso bodyque é chamado quando ele muda. Normalmente, isso significa que sua fonte de verdade está errada. Parece que no seu caso você está usando uma variável booleana como fonte de verdade, mas deveria quando há uma mensagem para mostrar. Você pode criar uma Binding<Bool>variável computada a partir da mensagem para usar com o popover ou usar o novo popover(item:)em vez disso.

    • 2

  2. O problema central está em como o showValidationMessageestá sendo usado como gatilho para o popover, enquanto o estado significativo real ( validationMessage) não é consistentemente integrado ao sistema de dependências do SwiftUI.

    A abordagem atual (forçar captura forte) é uma solução alternativa em vez de um design limpo. Em vez disso, considere as seguintes soluções:

    1. Usarpopover(item:)

    A popover(item:)API é projetada para mostrar conteúdo com base em um item identificável opcional. Você pode fazer validationMessageum opcional String:

    @State private var validationMessage: String? = nil

private func checkGeneralFormCompletion() {
    if isFormValid {
        validationMessage = nil
    } else {
        validationMessage = firstName.isEmpty ? "First name empty" : "Last name empty"
    }
}

.popover(item: $validationMessage) { message in
    VStack {
        Text(message)
    }
    .padding()
    .frame(minWidth: 200)
}
    • Isso vincula diretamente a validationMessage ao popover, e as alterações feitas nele manipulam automaticamente a exibição/ocultação do popover sem a necessidade de um sinalizador booleano separado.
    1. Use uma ligação computada parashowValidationMessage

    Em vez de gerenciar explicitamente showValidationMessage, derive-o diretamente de validationMessage:

    private var showValidationMessage: Bool {
    !validationMessage.isEmpty
}
    • Atualização checkGeneralFormCompletionpara garantir validationMessageque seja a única fonte da verdade:
    private func checkGeneralFormCompletion() {
    validationMessage = firstName.isEmpty ? "First name empty" : lastName.isEmpty ? "Last name empty" : ""
}
    • Atualização popoverpara confiar em showValidationMessage:
    .popover(isPresented: Binding<Bool>(
    get: { !validationMessage.isEmpty },
    set: { if !$0 { validationMessage = "" } }
)) {
    VStack {
        Text(validationMessage)
    }
    .padding()
    .frame(minWidth: 200)
}
    • 1

relate perguntas