主页 / coding / 问题 / 79223915
Accepted
duckSern1108
Asked: 2024-11-26 00:45:10 +0800 CST

在闭包中捕获@State[重复]

  • 772

我有一个简单的注册表格，当用户按下时Continue Button，如果他们没有输入任何字段，我会显示一个弹出窗口。

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")
//        }
    }
}

如果我注释掉强捕获[validationMessage] in，当用户第一次按下按钮时，弹出窗口将显示空文本并且body不会重新渲染（基于调用）。但是如果我为of_printChanges提供强捕获或添加修饰符，则主体将重新渲染并且弹出窗口将显示正确的文本。closure.popover.onChangeVStack

我的问题是，为什么当我提供 的强捕获时@State，它会导致body重新渲染？任何见解或建议都将不胜感激！

2 个回答

  1. Best Answer

    SwiftUI 具有依赖项跟踪功能。如果之前在 中调用了它的 getter，则只有在设置a 时才会body再次调用。这样做是伪造对设置依赖项跟踪的 getter 的调用，这就是为什么在它更改时调用 的原因。通常这意味着您的事实来源是错误的。似乎在您的情况下，您使用布尔变量作为事实来源，但实际上应该在有消息要显示时使用。您可以从消息中创建一个计算变量以与弹出窗口一起使用，或者改用新的。@Statebody[validationMessage] inbodyBinding<Bool>popover(item:)

    • 2

  2. 核心问题在于如何showValidationMessage将 用作 的触发器popover，而实际有意义的状态（validationMessage）并没有一致地集成到 SwiftUI 的依赖系统中。

    当前方法（强制强捕获）是一种变通方法，而不是一种干净的设计。相反，请考虑以下解决方案：

    1. 使用popover(item:)

    该popover(item:)API 旨在根据可选的可识别项显示内容。您可以制作validationMessage一个可选的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)
}
    • 这会将 validationMessage 直接绑定到弹出窗口，并且对其进行的更改会自动处理弹出窗口的显示/隐藏，而无需单独的布尔标志。
    1. 使用计算绑定showValidationMessage

    无需明确管理showValidationMessage，直接从中派生validationMessage：

    private var showValidationMessage: Bool {
    !validationMessage.isEmpty
}
    • 更新checkGeneralFormCompletion以确保validationMessage是唯一事实来源：
    private func checkGeneralFormCompletion() {
    validationMessage = firstName.isEmpty ? "First name empty" : lastName.isEmpty ? "Last name empty" : ""
}
    • 更新popover依赖showValidationMessage：
    .popover(isPresented: Binding<Bool>(
    get: { !validationMessage.isEmpty },
    set: { if !$0 { validationMessage = "" } }
)) {
    VStack {
        Text(validationMessage)
    }
    .padding()
    .frame(minWidth: 200)
}
    • 1

相关问题